如何优雅的获取位置最近开发的时候有个小需求,h5做个获取当前坐标以及详细位置。我这一看简单啊，单开高德api官网，注册个

最近开发的时候有个小需求,h5做个获取当前坐标以及详细位置。我这一看简单啊，单开高德api官网，注册个key，安装vue-amap，使用组件调用地图。一气呵成，可是问题来了，测试的时候,十次至少有两三次报错，于是打开百度找到原生js提供了Geolocation API，不过测试的时候发现本地要在localhost（http://127.0.0.1/）下，线上要HTTPS（Only secure origins are allowed）

完整代码

 navigator.geolocation.getCurrentPosition(
        (result) => {
          // 得到地理定位结果的前提：1，设备支持并开启定位功能 2，用户在网页弹窗授权允许
          //   console.log(1, result); //成功的结果
          console.log(result);
          console.log(result.coords);
          var lhtml = `当前位置的信息如下:<br>
                                经度是:${result.coords.longitude}<br>
                                纬度是：${result.coords.latitude}<br>
                                精度是：${result.coords.accuracy}米<br>
                                海拔是：${result.coords.altitude}<br>
                                方向是：${result.coords.heading}(相对于正北方向移动的角度)<br>
                                速度是：${result.coords.speed}<br>`;
          document.getElementById("location").innerHTML=lhtml;
        },
        function (err) {
          // 如果用户阻止获取位置，会执行第二个回调函数，也就是失败的回调
          console.log(err.code, err); //失败的信息
          var lhtml= err.message;
          document.getElementById("location").innerHTML=lhtml;
        },
        {enableHighAccuracy:true,
            timeout:1,maximumAge:Infinity,}
      );

报错信息

函数转为第二个参数，这个函数会得到一个对象，包含code和message。message是对错误的简短描述，可以翻译了解相关问题，code是一个整数，主要表示以下三种错误。

1(PERMISSION_DENIED):浏览器未被允许访问设备位置。页面第一次尝试调用定位时，浏览器会弹出确认对话框取得用户授权（每个域分别获取）。如果返回了这个错误码，则要么是用户不同意授权，要么是在不安全的环境下访问了Geolocation API。message 属性还会提供额外信息。

2(POSITION_UNAVAILABLE):系统无法返回任何位置信息。不常见。

3(TIMEOUT):系统不能在超时时间内返回位置信息。第三个参数对象timeout属性可以限制。

如何优雅的获取位置

完整代码

报错信息

相关配置