HTML5 Geolocation API 总结

喜欢ヅ旅行 2022-01-28 05:51 250阅读 0赞

Geolocation（地理定位）是一个让人兴奋，并且浏览器广泛支持的 API。通过调用该 API，JavaScript 可以访问当前用户的位置信息，不过需要在浏览器中授权，会弹出一个确认框让你确认，如下：  
![在这里插入图片描述][20190523092532455.png]  
通过使用 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][]

[20190523092532455.png]: /images/20220128/25a3a4cf9a4046199ae01c9242eac2a8.png
[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/Using_geolocation