HTML5 Geolocation watchPosition() API

在现代的 Web 应用程序中，位置定位已成为一种不可或缺的功能。而 Geolocation API 是实现位置定位的同非常重要的一种方式。该 API 能够允许开发人员基于用户的位置和设备信息，实现一系列的个性化服务。

简介

Geolocation API 有两个方法，分别是 getCurrentPosition() 和 watchPosition()。其中前者只获取一次位置信息，而后者则能够连续获取用户的位置信息。watchPosition() 的优势在于通过不断获取用户位置来实现在线地址追踪，或是实时的地图位置更新等功能。

方法

watchPosition() 方法接受三个参数：

成功回调函数 successCallback(position)，该函数会在获取位置信息成功后执行，将返回一个 Position 对象作为参数。
失败回调函数 errorCallback(error)，该函数会在获取位置信息失败后执行，将返回一个 ERROR_CODE 常量作为参数。
选项参数 options，这个参数是一个可选参数对象，它只包含两个属性：
- enableHighAccuracy：这个参数表示是否开启高精度模式，在设置为 true 的时候会让设备开启 GPS 定位功能。
- timeout：这个参数表示请求超时时间，单位为毫秒。

下面是一个使用 watchPosition() 方法的简单示例代码：

navigator.geolocation.watchPosition(successCallback, errorCallback, options);

当 watchPosition() 成功获取位置时，successCallback 将会被触发并接收到 Position 对象作为参数，可以根据需要使用 Position 对象的属性获取定位结果。

function successCallback(position) {
  console.log(`您的经度是： ${position.coords.longitude}`); console.log(`您的纬度是：$ {position.coords.latitude}`);
}

当 watchPosition() 获取位置失败时，errorCallback 将会被触发并接收到错误码作为参数。下面是一个简单的 error 方法处理：

function errorCallback(error) {
  console.log(`定位失败, 错误码为：${error.code}`);
}

error 参数是一个包含两个属性的对象：

code：这个属性表示错误码，它可以是以下五种值之一（这些常量都定义在 PositionError 对象中）：
- PermissionDeniedError：表示获取定位权限被拒绝；
- PositionUnavailableError：表示无法获取定位信息；
- TimeoutError：表示获取定位信息超时；
- UnknownError：表示发生未知错误；
- UnsupportedAPIError：表示该设备不支持 Geolocation API。
message：这个属性是一个字符串，表示错误信息。

示例

下面是一个简单的在线地址追踪的示例代码：

let latlng = document.getElementById('latlng');
navigator.geolocation.watchPosition(successCallback, errorCallback, options);

function successCallback(position) {
  latlng.innerHTML = `当前位置为： ${position.coords.latitude},$ {position.coords.longitude}`;
}

function errorCallback(error) {
  latlng.innerHTML = `定位失败，错误码为：${error.code}`;
}

let options = {
  enableHighAccuracy: true,
  timeout: 5000
};