出门在外，免不了查询地图的需求！为了帮助开发者们进一步“减负”，腾讯地图的插件添加了路线规划的能力，主要解决“向用户展示从A到B路线”的问题。使用插件的正确姿势究竟是什么呢？今天我们给大家介绍——腾讯地图插件的能力。
小程序最近推出了一个腾讯地图的插件，地址：腾讯地图插件说明。
但是官方文档是在写的简单，下面的评论基本都在吐槽，为了帮大家跳坑，我来测试下这个功能。
正式写代码前，先要取得腾讯地图的授权：
在“小程序管理后台-设置-第三方服务-插件管理”中查找插件名称“腾讯地图”，并申请使用。
如下：
需要注意的是这个id（详情里面可以看到）：请复制到第二步相应的"provider"和第三步的appid: 配置中
第一步：写插件代码
1.1
在你原有的项目里面新建一个组件，例如maps:
maps.js中填写如下代码：
// const util = require('../../utils/util.js')
Page({
data: {
routeInfo: {
// startLat: 19.17652, //起点经度 选填，不填默认为当前位置
// startLng: 21.212121, //起点纬度 选填
// startName: "我的位置", // 起点名称 选填
startName: "我的位置", // 起点名称 选填
endLat: 22.548901, // 终点经度必传
endLng: 114.089656, //终点纬度 必传
endName: "福田区中航路1号九方购物中心", //终点名称 必传
mode: "car" //算路方式 选填
}
},
onLoad: function () {
},
onShow: function () {
let plugin = requirePlugin("myPlugin");
}
})
1.2
maps.json中填写如下代码：
{
"navigationBarTitleText": "柠檬美食 ",
"usingComponents": {
"map-route": "plugin://myPlugin/mapRoute"
}
}
1.3
maps.wxml中填写如下代码：
1.4.wcss中的样式可以不写，他会使用全局样式
不写。。。。。
第二步： 配置app.json
插件文件现在写好了，我们来配置app.json
2.1
先把路径配置好
2.2
最下面再增加如下配置：
"plugins": {
"myPlugin": {
"version": "1.0.6",
"provider": "wx5bc2ac602a747594"
}
}
！！！provider填写腾讯地图插件详情里面的id
第三步：
project.config.json配置
！！！填写腾讯地图插件详情里面的id
最后我们在其前一个页面写个链接跳转到maps组件就行了。
完整代码请查看包含腾讯地图插件的美食分享小程序 ，进去后如果只需要了解腾讯地图插件，无需下载，直接打开maps文件夹查看，同时查看app.json文件即可。
效果：
遇到的坑：
1. AppIDwx5bc2ac602a7475（填写你自己的）没有配置。
2. 未取得授权
3. 跳转路径写错
4. 把maps组件的代码直接写在了其他组件里面，没有分离
5.maps文件夹不要多写东西
6.模拟器定位很不准，用真机查看，真机效果可以
7.经度纬度别搞混了，否则会出现不能获取位置，不能发起导航，第一个是纬度，第二个是经度，跟百度地图查到的刚好相反。
