出门在外，免不了查询地图的需求！为了帮助开发者们进一步“减负”，腾讯地图的插件添加了路线规划的能力，主要解决“向用户展示从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.经度纬度别搞混了，否则会出现不能获取位置，不能发起导航，第一个是纬度，第二个是经度，跟百度地图查到的刚好相反。