一。公司活动页使用到根据当前城市获取当前商场数据的功能，所以我开始做使用h5的新特性geolocation，以下有两种获取当前城市的方案(移动端)：（注意：必须是https协议才能使用geolocation获取经纬度）
1.使用百度地图api获取当前城市
2.使用geolocation获取经纬度，把经纬度给服务器接口获取当前城市，服务器端也是调用百度地图api获取的当前城市，这样做是为了我们对这个功能可以有一定的控制，防止出现一些意外状况
二。服务端接口实现方式
/*获取当前地理位置*/
import CurrentCityModel from '../models/CurrentCityModel';
export default class Geolocation {
constructor() {
this.currentCityModel = new CurrentCityModel();
}
getCity(longitude, latitude) {
return new Promise((resolve, reject)=> {
this.currentCityModel.getCurrentCity(longitude, latitude)
.then((data = {})=> {
resolve(data.city);
})
.catch((error)=> {
reject(error);
});
})
}
getLocation() {
if (navigator.geolocation) {
return new Promise((resolve, reject)=> {
navigator.geolocation.getCurrentPosition(
(position) => {//定位成功
let coords = position.coords, longitude = coords.longitude, latitude = coords.latitude;
this.getCity(longitude, latitude)
.then(resolve)
.catch(reject);
},
(error)=> {
//定位失败
this.locationError(error);
},
{
// 指示浏览器获取高精度的位置，默认为false
enableHighAccuracy: true,
// 指定获取地理位置的超时时间，默认不限时，单位为毫秒
//timeout: Infinity,
timeout: 5000,
// 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
maximumAge: 1000000
});
});
} else {
alert("Your browser does not support Geolocation!");
}
}
locationError(error) {
console.log('获取地理位置失败');
switch (error.code) {
case error.TIMEOUT://超时
alert("A timeout occured! Please try again!");
break;
case error.POSITION_UNAVAILABLE://表示无法确定设备的位置
alert('We can\'t detect your location. Sorry!');
break;
case error.PERMISSION_DENIED://表示没有权限使用地理定位API
alert('Please allow geolocation access for this to work.');
break;
case error.UNKNOWN_ERROR:
alert('An unknown error occured!');
break;
}
}
}
三。百度地图api实现方式
百度地图api:JavaScript API首家支持Https，已全面开放，无需申请可直接使用。
注意：仅JavaScript API V2.0及以上版本支持https，其他JavaScript API版本均不支持。使用https服务，请先检查您的版本以及配置注意事项。
这说明在项目中不需要考虑http或https请求，可以直接使用它的服务
1.使用方式
1.1 注册百度地图api
1.2 获取密钥<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
1.3 将密钥放入项目中
1.4 调用其服务获得对象数据
2.功能实现
/*Description:利用百度地图jsapi获取用户当前城市*/
export function getCurrentCity(fn) {
let currentCity = '';
let geolocation = new BMap.Geolocation();
/*获取地址时异步的*/
geolocation.getCurrentPosition(
function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) { //通过Geolocation类的getStatus()可以判断是否成功定位。
var pt = r.point;
let gc = new BMap.Geocoder();
gc.getLocation(pt, function (rs) {
currentCity = rs.addressComponents;
if (currentCity) {
fn(currentCity);
}
});
} else {
//关于状态码
//BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
//BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
//BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。
//BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
//BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。
//BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。
//BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)
switch (this.getStatus()) {
case 2:
alert('位置结果未知 获取位置失败.');
break;
case 3:
alert('导航结果未知 获取位置失败..');
break;
case 4:
alert('非法密钥 获取位置失败.');
break;
case 5:
alert('对不起,非法请求位置 获取位置失败.');
break;
case 6:
alert('对不起,当前 没有权限 获取位置失败.');
break;
case 7:
alert('对不起,服务不可用 获取位置失败.');
break;
case 8:
alert('对不起,请求超时 获取位置失败.');
break;
}
}
},
{
enableHighAccuracy: true
}
);
}
