前端实时定位如何实现⭐⭐⭐⭐⭐

采用 腾讯定位webjs

注意点：定位结果需要在https协议下才可以看到，这是浏览器硬要求 可以使用内网穿透办法达到这个要求，作者使用的是ngrolk
这里说明下，为什么使用腾讯定位吗，而没有使用其他定位
1.高德定位与实际位置偏差过大， 2.百度地图捣鼓半天没成功，放弃了

使用方法

1.在index.html 添加外链

  <script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

2.在对应组件添加相关方法

initMap() {
      // 腾讯地图应用开发平台创建，左边密钥，右面时应用名称
      var geolocation = new window.qq.maps.Geolocation(
        "AT2BZ-YJKCS-LSYOQ-6HMGS-BQ5QJ-IRBQH",
        "zhao"
      );
      // 回调的第一次参数为成功后具体的位置信息
      geolocation.getLocation(
        (postion) => {
          // console.log("成功getLocation", postion);
          geolocation.watchPosition(() => {
            // console.log("watchPosition", postion);
            this.latitude = postion.lat;
            this.longitude = postion.lng;
            geolocation.clearWatch();
          });
        },
        () => {
          // console.log("定位失败", err);
          Notify({
            type: "danger",
            message: "获取用户经纬度失败",
            duration: 1000,
          });
        }
      );
    },

源码分享

github