网页拉取微信内置地图(openLocation)详细教程 轻松实现一键导航

众所周知,我们在网页开发中,如果使用的是第三方地图,分享到微信中会非常不友好,用户只能网页导航或者通过第三方地图导航,如果我们使用的百度地图分享,则用户只能发起百度地图的导航,非常的不方便。

所以,为什么我们不能向给朋友发定位一样,发送一个位置,让用户自行选择使用什么导航软件进行导航呢?

答案是肯定可以的。

因为之前开发过类似项目,我就非常狭隘的认为需要通过腾讯LBS来实现,但是看了一圈LBS文档之后,发现这和我的需求并不一致,所以,看了一下微信公众号的开发文档,找到了答案。

一、微信JS-SDK

在微信公众号开发文档的JS-SDK说明文档中的第8条,就是地理位置,链接为:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#36

如果要设置导航,则使用微信内置地图查看位置接口

如果是想获取用户位置,则使用获取地理位置接口

二、使用方法

和微信分享类似,我们需要经过认证的微信公众号,并提交安全域名,如果不会微信分享,没有操作过的,参考这篇文章:

小白视角:自定义微信分享时的图标、标题以及简介教程

和微信分享不同,我们不能直接通过微信分享的形式来实现地图的调用,比如:

我们将代码放入后,会发现代码并没有工作,这其实并不奇怪。

因为调取微信内置地图,是需要一个交互过程的,我需要在页面中设置一个按键或者其他形式的交互,绑定按键事件,通过点击来触发。

三、分享代码

代码非常简单,我是参考官方演示Demo精简更改实现的,大家可以根据自己实际开发情况进行适当的更改,比如怎么引用开发框架等问题,需要自行考虑。

页面代码

引用了两个JS文件和一个样式文件:点击下载

成品演示地址:点击跳转调用测试页面

其他

大家测试的时候应该也发现了,通过获取地理位置接口并不能获取到准确的位置数据,会产生一定的偏差,那么怎么纠正这个偏差呢?

手动拾取坐标即可,可以通过腾讯LBS官方工具找到准确的经纬度坐标:点击跳转坐标拾取工具

如果在调用过程中有什么不明白的,欢迎和我一起共同探讨交流。

原创文章,作者:蓝洛水深,如若转载,请注明出处:https://www.ilanluo.com/9711

发表评论

登录后才能评论