前言：

当时h5页面使用腾讯地图、百度地图、高德地图等获取用户当前地理位置坐标，均有偏移，偏移好几公里，无法获取精准经纬度。最后调用了微信jssdk的方法，才获取了精准的经纬度。

二、具体步骤

1.调用微信jssdk，配置好config，获取精确经纬度

根据概述 | 微信开放文档的步骤，配置好config 信息，

注意：（1）、获取config传给后端的url不能包含“#”，并且要进行转码传给后端：url:encodeURIComponent(location.href.split('#')[0])

（2）登录微信公众平台，右上角入口找到“功能设置”，配置好“js接口安全域名”后再调用接口获取config，否则获取失败。

代码如下（示例）：

wx.config({debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。appId: '', // 必填，公众号的唯一标识timestamp:'' , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名jsApiList: ['getLocation'] // 必填，需要使用的 JS 接口列表
});
wx.ready(function(){ wx.getLocation({//获取位置信息方法一定要放在wx.ready中调用type: 'gcj02', // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'；调试过程中发现wgs84获取的位置会偏移几百米左右isHighAccuracy: true,  success: function (res) { var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。var speed = res.speed; // 速度，以米/每秒计var accuracy = res.accuracy; // 位置精度console.log(res)    },fail:function(res){console.log('error:',res)},});
});

2.解决腾讯地图选点组件定位不准确，Android定位偏移问题解决。

调用方式可参考官方文档：地图组件 | 腾讯位置服务

使用iframe调用的时候遇到的问题：官方iframe标签中没有allow="geolocation"属性，导致ios定位正常，但是Android定位偏移太大，添加allow="geolocation"之后，Android仍有定位偏移，没有精准解决。

最终解决办法：给下面src链接中添加coord属性，添加后，就能完美解决Android的精准定位问题。coord的值在上面步骤1中写好了获取精准经纬度的方法，可自行获取。

具体代码如下图（src中的lat、lng分别指的经纬度）:

<iframe id="mapPage" width="100%" height="100%" frameborder=0 allow="geolocation"src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=your key&coord=lat,lng&referer=myapp">
</iframe><script>window.addEventListener('message', function(event) {// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息var loc = event.data;if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'console.log('location', loc);}}, false);
</script>

3、调用示例

此文章是自己做项目过程中遇到的问题及解决方案。如有问题，可留言反馈。如有版权问题，请留言联系删除。

vue/js如何精准获取用户当前地理位置，精准获取经纬度、精准地图选点，Android定位偏移问题解决相关推荐

js获取用户实时地理位置
js获取用户实时地理位置 if(navigator.geolocation) {var id = navigator.geolocation.watchPosition(function(positi ...
如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介
如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介一.总结一句话总结:Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法 ...
使用淘宝IP库获取用户ip地理位置
为什么80%的码农都做不了架构师?>>> 以前用过GOOGLE地图和百度地图获取过用户地理位置,现在又多了一个方法,那就是使用淘宝IP库获取用户ip地理位置,一起来看代码吧. ...
赚四五百万，一款打卡作弊软件的 CEO 被判5年6个月！因破坏了钉钉系统获取用户真实地理位置...
‍ ‍上面这个公号,是我的一个备用号,平时我也会发一些很短.很生活的图片.文字,也会推荐看到的好书.节目.电影等. 1 发现商机昨天看到这个案例,蛮唏嘘的,特别对于我们技术人创业来讲,也算是提了一个 ...
php获取用户ip地理位置利用淘宝IP库
利用淘宝IP库获取用户ip地理位置我们查ip的时候都是利用ip138查询的,不过那个有时候是不准确的,还不如自己引用淘宝的ip库来查询,这样准确度还高一些.不多说了,介绍一下: 淘宝IP地址库淘宝 ...
uni-app 对接微信小程序获取用户个人信息和获取用户手机号码
第一次对接小程序授权的时候以为能一进入这个项目就要调用获取授权信息,后面写好逻辑之后提交审核,一直审核不通过,后面查了原因之后才发现不能一进入页面就调用授权,而且项目需要个人信息和手机号码两个都要获取 ...
H5使用百度地图SDK获取用户当前位置并且标记显示在地图
代码实现功能: H5使用百度地图SDK获取用户当前位置并且标记显示在地图,点击该标记弹出一层自定义的HTML. 效果图: 代码: <!DOCTYPE html> <html>& ...
pc端js获取当前经纬度_js获取用户当前地理位置（省、市、经纬度）
在很多情况下,我们需要用到定位功能,来获取用户当前位置.当前比较流行的定位API有腾讯地图.百度地图.高德地图.搜狗地图等等,在这里我使用的是腾讯地图定位API,根据用户IP获取用户当前位置,API返 ...
如何通过华为定位API精准获取用户所在地理位置？
我们在外出旅行时,通常需要在酒店App中预订酒店.那么,在酒店App中是如何获取用户地理位置信息从而实现 "附近的酒店"的功能查找?为此,我开发了一款名为Hotel Booking ...

vue/js如何精准获取用户当前地理位置，精准获取经纬度、精准地图选点，Android定位偏移问题解决

前言：

1.调用微信jssdk，配置好config，获取精确经纬度

2.解决腾讯地图选点组件定位不准确，Android定位偏移问题解决。

3、调用示例

vue/js如何精准获取用户当前地理位置，精准获取经纬度、精准地图选点，Android定位偏移问题解决相关推荐

最新文章

热门文章