vue开发的微信服务号H5内嵌的腾讯地图和导航

最新推荐文章于 2024-07-11 14:21:02 发布

晒太阳的朋朋

最新推荐文章于 2024-07-11 14:21:02 发布

阅读量3k

点赞数 4

分类专栏：微信服务号H5 vue

本文链接：https://blog.csdn.net/weixin_42453150/article/details/107730423

版权

##需要后台配合拿到微信网页开发的sdk签名https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1
成功拿到签名后才能引用微信的相关地理位置的开发接口。
我们这里需要使用openLocation的接口，getLocation接口是为拿到经纬度，我这里不做详细介绍，具体看官方Api
实现效果：
点击图中地图可以打开导航
在这里插入图片描述
图一用的是腾讯位置服务提供的地图组件使用之前需要申请一个密钥，官方链接：https://lbs.qq.com/dev/console/key/manage ，申请一个密钥就行。
图二调用的是微信公众号提供的地图导航功能。
代码如下


## ***css:***

  <div style="background-color:#F7F7F7;height: 10px;margin-top: 10px;"></div>
    <div id="container" @click="showLocation()" style="background-color:#F7F7F7;width:100%;height:140px">