HTML5 Geolocation API 总结

Geolocation（地理定位）是一个让人兴奋，并且浏览器广泛支持的 API。通过调用该 API，JavaScript 可以访问当前用户的位置信息，不过需要在浏览器中授权，会弹出一个确认框让你确认，如下：

通过使用 navigator.geolocation.getCurrentPosition() 方法来获取位置，该方法接收三个参数：成功回调函数，失败回调函数，可选参数。其中，成功回调函数会接收一个 Position 对象参数，该对象有两个属性：coords 和 timestamp。coords有以下参数：

latitude：用户的经度（十进制）
longitude：用户的纬度（十进制）
accuracy：用户的经度（米为单位）

在实际开发中，经纬度用的比较多。
失败回调函数也会接收一个对象参数，该对象有两个属性：message 和 code。message 是给人看的消息，code 中保存数值信息，表示错误的类型。用户拒绝共享（1），位置无效（2），超时（3）。
getCurrentPosition 的第三个参数是可以选对象，有以下参数：

enableHightAccuracy：false/true 是否高精度定位，为 true 时获取位置时间会变长，耗电量增加
timeout：等待获取位置信息的最长时间，单位是毫米，如 3000,
maximumAge：上一次获得位置信息的有效时间，单位是毫米，如 3000。当位置不变时，设置为 Infinity

Geolocation实例：
HTML 中代码：

<div class="content">
    <button onclick="Geolocation()">点我获取位置信息</button>
    <div id="show"></div>
</div>

js 中代码:

// ES6
function Geolocation() {
    let show = document.querySelector('#show');
    
    if (!navigator.geolocation) {
        alert("您的浏览器不支持该服务");
        return;
    } 

    // 位置获取成功
    function geo_success(position) {
        // 获取经纬度
        let latitude = position.coords.latitude;
        let longitude = position.coords.longitude;

        show.innerHTML = `<p>经度是： ${latitude} <br>纬度是： ${longitude}</p>`;
    }

    // 位置获取失败，一般显示在日志里
    function geo_error(error) {
        console.log("error message:", error.message);
        console.log("error code:", error.code);
    }

    // 可选参数
    let geo_options = {
      enableHighAccuracy: false,
      maximumAge: 50000,
      timeout: 30000
    };

    // 获取静态地址
    navigator.geolocation.getCurrentPosition(geo_success, geo_error, geo_options);
}

如果我们需要获取动态地址应该怎么办？一种办法是将 maximumAge 的值调的小一些，不断去获取当前位置，还有一个方法是采用 navigator.geolocation.watchPosition() 方法，该方法接收参数和 getCurrentPosition 一样，第一次触发后，会等待系统发出位置已改变的信号（它自己不会轮询）。想关闭该方法使用 clearWatch()（用法和 clearTimeout（）一样）。用法如下：

// 获取动态地址    
let watchID = navigator.geolocation.watchPosition(geo_success, geo_error);
clearWatch(watchID);

以上知识点总结自 JavaScript高级程序设计 MDN