记Web项目使用定位的坑

最近在做一个案例,类似于钉钉的打卡功能,在定位的时候,发现了坐标偏移的问题,折腾了快一天终于解决了

首先我看的是MDN的教程尝试使用如下代码

if ('geolocation' in navigator) {
  /* 地理位置服务可用 */
  navigator.geolocation.getCurrentPosition(function (position) {
    console.log(position.coords.latitude, position.coords.longitude)
  })
} else {
  /* 地理位置服务不可用 */
}

发现可以正常获取经纬度,然后尝试进行经纬度转定位,使用的是高德地图家的服务

地理/逆地理编码-API文档-开发指南-Web服务 API | 高德地图API

发现可以获取地址数据,但是偏移了一个省,就傻眼了,虽然我是用笔记本电脑定位,但也不该偏移这么多

后来百度一下,发现需要转换为火星坐标系,尝试了好几个npm包,最后发现下面的好用

gcoord

后来发现地理位置还是不正常还是甘肃省,尝试了多次,最后换了浏览器,竟然发现神奇的好了,后来发现是电脑一直开着中转代理,导致了位置不正常

if ('geolocation' in navigator) {
        const that = this
        /* 地理位置服务可用 */
        navigator.geolocation.getCurrentPosition(async function (position) {
          const WGS84ToGCJ02 = gcoord.transform([position.coords.longitude, position.coords.latitude], gcoord.WGS84, gcoord.GCJ02)
          const { data: res } = await that.axios.get(`https://restapi.amap.com/v3/geocode/regeo?key=你的key&location=${WGS84ToGCJ02[0]},${WGS84ToGCJ02[1]}`)
          console.log(res)
        })
      } else {
        /* 地理位置服务不可用 */
      }

后来把代理关了就解决了