js获取经纬度总结--前端

2,306 阅读3分钟

背景

最近在项目中遇到地理定位的问题,没遇过不知道,遇过就发现这是个比较坑的问题。这个问题其实挺尴尬的,还不如一次性了解清楚。所以就进行了一些小总结,先简单总结我看过的关于定位技术的资料,然后介绍开发中的可选定位方案,以及存在的一些问题。

常见定位分析

技术方案

一般我们都不会自己去开发定位,都借助于第三方SDK对接,从而满足我们当前的业务需求,开发大致为以下几种:

1:对接微信SDKdevelopers.weixin.qq.com/miniprogram…

微信定位比较好用,只要你授权了定位,成功率比较高。缺点是,只能有微信客户端才能调用微信JSSDK。但我发现在微信web开发者工具中,定位不准确(具体原因未追溯)

2: 高德JS API lbs.amap.com/api/javascr…

AMap.Geolocation定位服务插件。融合了浏览器定位、高精度IP定位、安卓定位sdk辅助定位等多种手段,提供了获取当前准确位置、获取当前城市信息、持续定位(浏览器定位)等功能。由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求,为保证定位成功率和精度,需升级站点到HTTPS

所以你有可能出现普通浏览器能获取到定位信息 在特殊的浏览器获取不到

3: H5 原生定位

www.cnblogs.com/tugenhua070… html5获取地理位置信息API

定位是优先采用GPS,失败就用网络信号,比如IP地址,WiFi,蓝牙等等。而且它明确说明,不能保证返回结果的正确性。由于普通浏览器与微信内置浏览器存在差异 微信内置浏览器对http非安全定位请求会失败,为确保定位准确,需要升级站点到https下获取定位

我做了一点小测试,结果如下

结果如下

PC端定位都是IP,所以是精确IP定位;在手机端,由于自带浏览器和微信浏览器都支持HTML5定位(即浏览器定位,访问前也有授权操作),所以都返回了同样的结果;对于Chrome,浏览器定位不管用了,WiFi的IP定位定准确了城市

本次项目中的问题&&解决方案:

问题:

最初,采用高德地图的定位来做。但是误差特别大,瞎折腾,又添加浏览器定位。在获取不到的情况下判断是否在微信浏览器打开,如是在微信浏览器打开则调用微信获取地理位置获取.....(然而并没解决问题)问题回到原点

解决方案:

navigator.geolocation.getCurrentPosition(success,error,{

enableHighAccuracy: true,// 精确查找,默认false

})默认获取的是百度地图坐标系(经纬度属于WGS84坐标,需要做转换)**,但是插件接入的是高德(GCj02),此时会存在坐标系转换的差距,导致不准确。于是把getCurrentPosition() 获取的经纬度转换后传入高德 最后解决问题 转换如下(参考L:www.cnblogs.com/zhuyf0506/p…

总结:

在开发获取用户当前经纬度的过程中尽量使用单一的获取方式,当单一的获取方式满足不了的情况下在采取组合式的获取,这过程中就需要开发去定位使用的SDK的坐标是什么,GCj02 || WGS84 等待 原则上小程序开发都是用内置的API 也就是腾讯API H5 开发则考虑的会更多些(比如调研第三方的插件等等)\

常见定位参考:

coffee.pmcaff.com/article/492…

\