记Web项目使用定位的坑

2021-04-30 14:34:18 阅读：324 来源： 互联网

标签：Web geolocation 地理位置 gcoord 项目 coords position navigator 定位

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

首先我看的是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 {
        /* 地理位置服务不可用 */
      }

后来把代理关了就解决了

标签：Web,geolocation,地理位置,gcoord,项目,coords,position,navigator,定位
来源： https://www.cnblogs.com/qisexin/p/14721814.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

记Web项目使用定位的坑