300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 小程序之引入腾讯路线规划插件实现地图路线导航功能

小程序之引入腾讯路线规划插件实现地图路线导航功能

时间:2020-01-27 05:43:16

相关推荐

小程序之引入腾讯路线规划插件实现地图路线导航功能

在小程序内部插入腾讯地图 实现起点到终点的路程规划 效果图如下:

一:申请路线规划插件

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我直接填的项目名,测试了一下只要不是空白就行了

效果如下,从我的位置到其他地点

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。