定位当前地理位置

根据用户的地理位置提供相关地区服务，已经是非常普遍的一项功能，例如本地生活类网站、外卖网站等。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);

定位当前地理位置

猜你喜欢