出門在外，免不了查詢地圖的需求！為了幫助開發者們進一步“減負”，騰訊地圖的外掛添加了路線規劃的能力，主要解決“向用戶展示從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中填寫如下程式碼：

<map-route route-info="{{routeInfo}}"></map-route>

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.   AppID wx5bc2ac602a7475（填寫你自己的）沒有配置。

2.  未取得授權

3.  跳轉路徑寫錯

4. 把maps元件的程式碼直接寫在了其他元件裡面，沒有分離

5.maps資料夾不要多寫東西

6.模擬器定位很不準，用真機檢視，真機效果可以

7.經度緯度別搞混了，否則會出現不能獲取位置，不能發起導航，第一個是緯度，第二個是經度，跟百度地圖查到的剛好相反。