网页拉取微信内置地图(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://blog.lanluo.cn/9711

(20)
蓝洛水深的头像蓝洛水深管理员
上一篇 2020年10月14日 下午9:41
下一篇 2020年10月22日 下午10:12

发表回复

登录后才能评论

评论列表(4条)

  • 0930的头像
    0930 2021年10月23日 下午12:14

    大佬, 有个问题想咨询你一下 openLocation 报错, openlocation the permission value is offline verifying 有遇到过吗? 在ios端会有

    • 蓝洛水深的头像
      蓝洛水深 2021年10月25日 上午9:08

      您好。这个问题需要先排除两个问题,1、是否是本地调试接口,其他接口是否有问题;2、如果是服务器调试,服务器和腾讯的通信情况如何;3、引用的JS是否都是https。可以加我QQ7633100一起探讨。

  • 8290的头像
    8290 2021年9月8日 上午11:53

    下载不了

联系QQ
联系QQ
分享本页
返回顶部