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

2024-06-13 17:50:25

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

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

如下图所示

勾选即可添加，查看详情有插件的基本详情、开发文档和相关问题等。

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

根据接入指引步步操作：

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

在点击事件中添加：

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

如下图操作即可

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

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

使用文档传送门

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

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

此时，我们会发现页面有两个头部，这是开发者工具上的样子

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

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

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

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

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

打开方法如下：

代码复制出来比较方便

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

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

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

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

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

我们打开开发者工具：

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

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

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

小程序获取当前城市位置-高德地图
微信小程序 wx.getLocation 只能获取到经纬度,想要获取具体城市信息,需要使用地图插件.公司要求使用高德地图,在使用上,几个地图的代码步骤都差不多. 目录 1. 查看官方文档 1.1 申 ...
微信小程序-获取当前城市位置
微信小程序-获取当前城市位置 1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting: 2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数) ...
微信小程序获取当前的位置地名
最近在和同学做一个校园项目,一个需求是需要在页面中显示定位的学校,于是研究了一下如何在微信小程序中显示当前的位置地名,使用手机4G网络的话定位比较准确我们需要使用腾讯地图的SDK,可以参照文档入门( ...
微信小程序 - 获取用户当前位置信息（用于定位地址及获取地址等需求）
前言有两种获取位置的方式,一种是直接返回经纬度等信息(必须代码处理后才能显示到界面上),另一种是 "界面选择式" 由用户打开地图选择位置. 最近有添加用户收货地址需求(外卖项目 ...
小程序获取用户当前位置计算距离最近的地铁站并获取对应地区的商品（可手动切换地铁线路及地铁站）
功能介绍主要就是获取到用户当前位置的经纬度,调用后端api接口计算出距离最近的地铁站,并展示对应商家.用户可手动切换或者搜索地铁站点进行切换,切换后展示对应地铁站附近的商家这里手动切换地铁站是直接 ...
小程序获取不到用户头像和昵称返回微信用户问题解决，即小程序授权获取用户头像规则调整的最新解决方案
最近好多同学在学习石头哥小程序课程的时候,遇到了下面这样的问题,在小程序授权获取用户头像和昵称时,获取到的是下面这样的. 到底是什么原因导致的呢,去小程序官方文档一看,又是官方改规则了. 点进去一看, ...
腾讯地图小程序服务器配置,腾讯地图实现微信小程序地图定位教程
前言目前腾讯位置服务提供路线规划.地图选点.地铁图.城市选择器插件四款插件产品,本篇博客主要针对地图选点功能进行实现. 开通腾讯位置服务 2.登录进入小程序后台,选择 "开发 - 开发工具 ...
为什么把devc++上的程序发到qq_微信上能登陆QQ了！腾讯QQ小程序使用体验
虽然都是腾讯出品的聊天工具,但一直以来,「微信」和「QQ」都是比较独立的存在.QQ 功能丰富而微信追求减法,两者各有优缺点但并无优劣之分.不过自从微信出了「小程序」后,可扩展性就非常强了.比如你有想过 ...
OC 获取view相对位置_三晶变频器启动跳OC维修故障处理
三晶变频器启动跳OC维修故障处理在对变频器进行故障排除时,首先要进行彻底的目视检查.清洁变频器上的所有灰尘,灰尘和腐蚀:检查所有接线连接是否牢固:检查进入变频器的线路电压和电流:并检查变频器输出的电压 ...

最新文章

热门文章