在小程序内部插入腾讯地图 实现起点到终点的路程规划 效果图如下:
一:申请路线规划插件
1.在微信公众平台申请插件,登陆小程序账号,“登录”->“设置”->“第三方插件”->“插件管理”
->“添加插件”,直接搜"腾讯位置服务路线规划"
2.添加成功后,点"详情"查看插件AppID
3.可以看到插件AppID 为wx50b5593e81dd937a(在app.json中会用到,放在provider:wx50b5593e81dd937a,“version”: “1.0.6”,)
二.申请key
1.进入详情页之后,点击开发文档==》接入指引==》相关参数说明==》申请 key,点击申请key,会跳转到腾讯位置服务平台,进行唯一key的申请
2.开发者密钥申请(里面内容自己填)
3.key创建成功,然后进入:key设置
4.授权APP ID 填写你开发者的appid,域名白名单填,我测试了一下自己的小程序,域名白名单不能不填,不然地图不显示。
5.同时在"开发"下面"服务器域名"添加请求白名单 https://apis.;
至此基本配置完成,接下来的都是在小程序项目里的了,注意弄清楚插件AppID(wx50b5593e81dd937a)和开发者(你自己)AppID,别搞混了
三:终于可以写代码了
在app.json中引入插件
"plugins": {"routePlan": {"version": "1.0.6","provider": "wx50b5593e81dd937a"}},"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序定位"}}
在要引入的页面的js中添加
let plugin = requirePlugin('routePlan');let key = ''; //使用在腾讯位置服务申请的keylet referer = ''; //调用插件的app的名称let endPoint = JSON.stringify({//终点'name': '北京西站','latitude': 39.894806,'longitude': 116.321592});wx.navigateTo({url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint});
referer我直接填的项目名,测试了一下只要不是空白就行了
效果如下,从我的位置到其他地点