根据用户的地理位置提供相关地区服务,已经是非常普遍的一项功能,例如本地生活类网站、外卖网站等。HTML5新功能中提供了获取用户位置的能力,使用HTML5 Geolocation API来构建基于地理位置的应用。
Geolocation API通过navigator.geolocation全局对象进行访问。初次访问时,浏览器会询问用户是否共享位置,若用户选择允许程序使用Geolocation API权限。判断浏览器是否支持Geolocation API,可以通过判断是否存在navigator对象得知。
if(navigator.geolocation){
// 获取地理位置
}else{
console.log('您的浏览器不支持geolocation');
}
获取用户的当前位置,可以调用navigator.geoloaction的getCurrentPosition方法
navigator.geolocation.getCurrentPosition(
function success(position){},
function error(positionError){},
options
)
完整的代码如下:
function success(position){
console.log('获取位置成功', position.coords);
}
function error(positionError){
console.log('获取位置失败', positionError.code, positionError.message);
}
var options = {
enableHighAccuracy:false,
timeout:10000,
maxinumAge:0
}
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(success, error, options);
}else{
console.log('您的浏览器不支持geolocation');
}
成功获取位置后,会调用回调函数success。返回的参数position对象包含包含获取位置时的时间戳timestamp和坐标信息coords。coords对象包含了很多有用的位置数据信息。
- latitude:坐标纬度。
- longitude:坐标经度。
- accuracy:坐标精度,单位为米。
当获取位置失败时,会调用回调函数error。返回的参数positionError的message属性包含了相关的错误信息描述,positionError.code标识错误的原因,positionError.code的值有以下几种:
- UNKNOW_ERROR(0):其他错误。
- PERMISSION_DENIED(1):用户拒绝分享位置信息。
- POSITION_UNAVALABLE(2):获取用户位置信息失败。
- TIMEOUT(3):获取用户位置信息超时。
getCurrentPosition方法的参数options可以用来设置以下内容:
- enableHighAccuracy:布尔值,是否获取高精度的位置信息,如果开启可能会增加响应时间,默认值为false。
- timeout:定位超时时间,单位为毫秒,如果到达时间没有取得用户位置信息,则触发失败回调函数,默认值为0,表示无限大。
- maxinumAge:用户位置信息缓存的最大时间(单位为毫秒),默认值为0。
当用户位置变化时,还可以通过watchPosition方法监听用户的位置信息,watchPosition的参数和getCurrentPosition相同。函数执行后返回一个唯一标识,可以通过clearWatch方法来取消监听。
var watchId = navigator.geolocation.watchPosition(success, error, options);
navigator.geolocation.clearWatch(watchId);