小程序获取规当前位置规划路线及直接跳转腾讯地图+小程序进行导航

以你之姓@ 2023-07-18 09:42 23阅读 0赞

--------------------

## 一.小程序使用内置开发者工具进行线路规划 ##

--------------------

1.在微信公众平台登录小程序，选择设置->第三方服务->添加插件

如下图所示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]

勾选即可添加，查看详情有插件的基本详情、开发文档和相关问题等。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]

在这里我们选择腾讯位置服务路线规划，里面选择较多，可以按需添加。

根据接入指引步步操作：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 3]

首先在app.json里面添加这些配置，permission是为了询问获取当前位置的，一定要添加！！因为没添加刚开始好多人获取不到，显示GPS信号弱，添加上询问按钮就可以了！后面的plugins是添加的插件，第一个是路线规划，第二个是选择当前位置（此项不再演示）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 4]

在点击事件中添加：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 5]

其中key和referer需要去[腾讯服务官网][Link 1]申请

如下图操作即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 6]

申请成功之后就是我隐藏掉的第一行是referer，第二行是key。把这些信息写到你的代码里就可以了。

跳转函数的使用，使用文档就详细说明，我不在赘述

[使用文档传送门][Link 2]

我使用的导航方式是当前位置到结束地点，所以当前位置不需要传入，只传入结束位置就可以了。

至此，我们使用开发者工具调试一下

此时，我们会发现页面有两个头部，这是开发者工具上的样子  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 7]

我们在真机调试一下，发现其实并没有两个头部！样式正确！

![20200327102233682.jpg][] ![20200327102438528.jpg][]

到这里其实我们所需要的路线规划功能就完成了。

--------------------

## 二、直接跳转到腾讯地图+小程序 ##

--------------------

从上面的手机截图中可以看出，其实我们只能查看路线，并不能实时导航。然而项目经理就要求导航功能，那我们再另寻他法。

需要在app.json中增加跳转其他小程序的配置

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 8]

打开方法如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 9]

代码复制出来比较方便

let endPoint = JSON.stringify({  //终点
          'name': data.address,
          'location': { 
            'lat': data.latitude,
            'lng': data.longitude
          }
        })
        wx.navigateToMiniProgram({ 
          appId: 'wx7643d5f831302ab0', //要打开的小程序 appId
          path: 'pages/multiScheme/multiScheme?endLoc=' + endPoint, //打开的页面路径，如果为空则打开首页
          fail: function () { 
            wx.showToast({ 
              icon: 'none',
              title: '打开失败，请重试'
            })
          }
        })

其中name为地点名称，其他的参数是当前坐标经纬度，一定要严格按照这样的参数规则不然腾讯地图+是获取不到你的目的地坐标的。

下面的方法是微信的原生方法。

至于我是怎么获取到腾讯地图+小程序的appId和导航path的方法

参考：[复制任意微信小程序页面路径][Link 3]

我们打开开发者工具：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 10]

在开发者工具上是不会帮你跳转到其他小程序的，所以我们真机调试：

![20200327105325756.jpg][] ![20200327105333835.jpg][]

请看腾讯地图小程序会直接跳转到导航页面并且获取到我的目的地的名称和坐标，并且右下角出现了导航字样。功能完成！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]: /images/20230528/65bb6fced97649948cf228d26a571e8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]: /images/20230528/ab579e384ca24cb9afb71b0d7f4921b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]: /images/20230528/b637b85c2f634bcbbae9ebd527f60df9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 3]: /images/20230528/4fbff00de74745f6b4ccb44ddf77f380.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 4]: /images/20230528/c4c6bc7146c14c33ad28227f72db8314.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 5]: /images/20230528/2195e4be6497446eae2a830a3e28d887.png
[Link 1]: https://lbs.qq.com/dev/console/key/add
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 6]: /images/20230528/fbb8377578a1467288a2b4f1f8c502ed.png
[Link 2]: https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx50b5593e81dd937a&token=803489078&lang=zh_CN#-
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 7]: /images/20230528/4de53ed8d564429eb03e7a3881922961.png
[20200327102233682.jpg]: https://img-blog.csdnimg.cn/20200327102233682.jpg
[20200327102438528.jpg]: /images/20230528/eb957ab05ce84653aa39e504a72297cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 8]: /images/20230528/a3e752172e4341af8322bf267d5fbb89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 9]: /images/20230528/2073beb98e9144f18f6bbb445565556e.png
[Link 3]: https://developers.weixin.qq.com/community/develop/article/doc/0008066531c28043d2185a4d356813
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 10]: /images/20230528/7439832f1ee54fd0994394cd6ec60887.png
[20200327105325756.jpg]: https://img-blog.csdnimg.cn/20200327105325756.jpg
[20200327105333835.jpg]: /images/20230528/d0519feba7554250a38e8eac821ed0c1.png