最近在做一個微信小程式地圖外掛，通過傳入起始位置名稱和經緯度資訊，就可以跳轉到路線規劃外掛頁面中，在該頁面中，可以根據起始位置查詢自駕，公共交通，步行等方式的路線資訊，並且在地圖上顯示路線資訊，在這個過程中，用到了微信小程式的元件map和騰訊地圖sdk，接下來主要對微信小程式的地圖開發進行總結
一、微信小程式地圖元件
為了方便微信小程式使用地圖的相關功能，微信小程式為我們提供了map元件，通過這個元件，我們可以很簡單的引入地圖，並且還可以進行個性化地圖的開發
1、map元件
微信小程式提供的地圖元件，使用該元件只需要在wxml檔案中加入下面的程式碼
<map id="map" longitude="113.324520" latitude="23.099994" scale="14" style="width: 100%; height: 300px;"></map>
上面這個例子中，我們只是簡單的為該元件傳入經緯度資訊，並且設定縮放級別，當然，map元件還包括以下一些常用的屬性
| 屬性 | 型別 | 說明 | 是否必填 |
| longitude | number | 中心經度 | 是 |
| latitude | number | 中心緯度 | 是 |
| scale | number | 縮放級別，取值範圍為3-20 | 否 |
| markers | Array.<marker> | 標記點 | 否 |
| polyline | Array.<polyline> | 路線 | 否 |
| include-points | Array.<point> | 縮放視野以包含所有給定的座標點 | 否 |
| enable-traffic | boolean | 是否開啟實時路況 | 否 |
| bindregionchange | eventhandle | 視野發生變化時觸發 | 否 |
| bindpoitap | eventhandle | 點選地圖poi點時觸發 | 否 |
其中，longitude和latitude這兩個屬性是必須填寫的，如果沒有填寫，地圖將無法正常顯示，除了上面的屬性之外，還有很多其它屬性，其它屬性請前往微信小程式官方文件進行檢視
2、map元件常用的屬性介紹
（1）longitude和latitude屬性
一般來說，我們需要設定地圖的中心經緯度地圖才能夠正常顯示，如果我們傳入的是起點經緯度srcLat和srcLng，終點經緯度dstLat和dstLng，如果想要得到其中心座標，可以通過如下的計算得到：
centerLat = (srcLat + dstLat) / 2
centerLng = (srcLng + dstLng) / 2
通過以下簡單的計算，就可以設定出地圖的中心經緯度
（2）markers屬性
在很多情況下，我們經常需要在地圖上新增一些標記點，比如我們希望外掛中指定的起點和終點都能夠用自定義的圖示進行表示，這個時候就可以用到markers屬性啦
Page({ data: { markers: [{ iconPath: "/resources/start.png", id: 0, latitude: srcLat, longitude: srcLng, width: 50, height: 50 }, { iconPath: "/resources/end.png", id: 0, latitude: dstLat, longitude: dstLng, width: 50, height: 50 }] })
（3）polyline屬性
polyline屬性主要指定一系列座標點，當我們設定了這些座標點之後，將會從這些座標點的第一個座標點連線連到最後一個座標點，當我們需要在地圖上顯示起點和終點之間的路線時，就可以用polyline屬性進行設定
Page({ data: { polyline: [{ points: [{ longitude: 113.3245211, latitude: 23.10229 }, { longitude: 113.324520, latitude: 23.21229 }], color:"#FF0000DD", width: 2, dottedLine: true }] })
關於polyline屬性的具體屬性介紹，可以檢視微信小程式官方文件
3、地圖相關的API
為了更好的使用地圖的功能，微信小程式也是為我們提供了關於操作地圖的相關API
（1）wx.createMapContext(string mapId, Object this)
建立map上下文MapContext 物件
（2）MapContext.getCenterLocation(Object object)
獲取當前地圖中心的經緯度
（3）MapContext.getRegion(Object object)
獲取當前地圖的視野範圍
（4）MapContext.getScale(Object object)
獲取當前地圖的縮放級別
（5）MapContext.includePoints(Object object)
縮放視野展示所有經緯度
（6）MapContext.moveToLocation()
將地圖中心移動到當前定位點
（7）MapContext.translateMarker(Object object)
平移marker，帶動畫
使用上面的這些API，可以方便我們對map元件進行一些操作，下面來看個簡單的例子
<map id="myMap" show-location /> <button type="primary" bindtap="getCenterLocation">獲取位置</button>
當點選獲取位置時，我們可以通過相關的API進行獲取當前的中心位置
Page({ onReady: function (e) { // 使用 wx.createMapContext 獲取 map 上下文 this.mapCtx = wx.createMapContext('myMap') }, getCenterLocation: function () { this.mapCtx.getCenterLocation({ success: function(res){ console.log(res.longitude) console.log(res.latitude) } }) } })
4、使用位置服務相關的API
在進行地圖開發的時候，我們經常需要使用內建軟體，高德地圖，騰訊地圖這些進行導航，這個時候可以使用相關的位置服務API
（1）wx.openLocation(Object object)
使用微信內建地圖檢視位置
（2）wx.getLocation(Object object)
獲取當前的地理位置、速度
（3）wx.chooseLocation(Object object)
開啟地圖選擇位置
當我們指定一個終點位置，然後希望能夠使用內建地圖軟體進行導航時，可以這樣實現
wx.openLocation({ latitude: dstLat, longitude: dstLng, name: '終點名稱' })
5、使用map元件的一些問題
map元件提供了很多地圖的相關功能，但是使用map元件可能會遇到下面這些問題
（1）map元件及微信小程式的API無法提供路線規劃，地址轉換等功能
可以使用騰訊地圖sdk，高德地圖sdk，百度地圖sdk等進行開發，比如騰訊位置服務為微信小程式提供了基礎的標點能力、線和圓的繪製介面等地圖元件和位置展示、地圖選點等地圖API位置服務能力支援，使得開發者可以自由地實現自己的微信小程式產品，通過使用這些服務，再配合map元件，可以開發出具有各種各樣功能的地圖
（2）map元件的層級問題
map元件的層級被設定為最高，不能通過z-index進行設定，因此使用map元件可能會遮住一些文字圖片等內容，可以通過cover-view進行解決，將文字和圖片內容巢狀在cover-view中，但是cover-view只能巢狀cover-view和cover-image
二、在微信小程式中使用騰訊地圖服務
雖然map元件使我們可以很方便的使用地圖，但是map元件只提供了最基本的地圖顯示功能，同時，微信小程式提供的關於地圖的API也只是提供了一些簡單的功能，在實際中無法滿足我們的各種需求，如果需要使用到路線規劃，距離計算等功能，我們可以在微信小程式中接入騰訊地圖，高德地圖，百度地圖等服務，再結合map元件，去實現我們需要的功能
下面以騰訊地圖為例來介紹如何在微信小程式中使用騰訊地圖服務
1、金鑰的申請以及域名的設定
在微信小程式中使用騰訊地圖服務大致需要進行如下幾個過程：
（1）申請開發者金鑰
這裡需要填寫Key的名稱，名稱可以根據實際專案應用來命名，申請成功後，會生成一串開發者金鑰
（2）開通webserviceAPI服務
a、點選右上角的控制檯
b、選擇key管理
c、進入設定，勾選webserviceAPI，點選儲存
（3）域名的配置
上面的兩個步驟都是在騰訊位置服務平臺上進行的操作，要進行域名的配置，還需要登入微信公眾平臺進行域名的配置
在開發小程式時，我們都會使用自己的APPID進行開發，只有配置了相關的域名，在請求時才能向指定的域名傳送請求
在“設定” -> “開發設定”中設定request合法域名，新增https://apis.map.qq.com
（4）下載微信小程式JavaScriptSDK
如果完成了上面幾個步驟，我們就可以在微信小程式中使用騰訊地圖服務啦，在微信小程式中新建一個專案，寫入APPID，記得這個APPID需要在微信公眾平臺中進行了域名的配置，不然會報錯
2、實現路線規劃
下面舉一個簡單的小例子，給定起點和終點經緯度，計算出起點和終點之間的路線
首先，需要引入我們剛才下載的JavaScriptSDK
// 引入SDK核心類 var QQMapWX = require('xxx/qqmap-wx.js');
進行API核心類的例項化
// 例項化API核心類 var qqmapsdk = new QQMapWX({ key: '開發金鑰（key）' // 必填 });
接著，我們需要通過呼叫路線規劃的介面direction獲取路線，direction介面可以提供駕車、騎行、步行、公交等路線規劃功能
direction介面傳入的引數如下
（1）mode
String，路線規劃選擇，可選值：'driving'（駕車）、'walking'（步行）、'bicycling'（騎行）、'transit'（公交），預設：'driving'
（2）from
String格式：lat<緯度>,lng<經度>（例：from: '39.984060,116.307520'）
Object格式：{latitude: 緯度,longitude: 經度}（例：from: { latitude: 39.984060,longitude: 116.307520}）
（3）to
String格式：lat<緯度>,lng<經度>（例：location: '39.984060,116.307520'）
Object格式：{latitude: 緯度,longitude: 經度}（例：to: { latitude: 39.984060,longitude: 116.307520}）
下面給一個根據起點和終點實現路線規劃的例子
<!--wxml--> <map id="myMap" style="width: 100%; height: 300px;" longitude="{{longitude}}" latitude="{{latitude}}" scale='16' polyline="{{polyline}}" show-location></map> <!--js--> // 引入SDK核心類 var QQMapWX = require('xxx/qqmap-wx.js'); // 例項化API核心類 var qqmapsdk = new QQMapWX({ key: '開發金鑰（key）' // 必填 }); Page({ data: { srcLat: '起點經度', srcLng: '起點緯度', dstLat: '終點經度', dstLng: '起點緯度', latitude: '', longitude: '' }, onLoad() { var _this = this; //呼叫距離計算介面 qqmapsdk.direction({ mode: 'driving',//可選值：'driving'（駕車）、'walking'（步行）、'bicycling'（騎行），不填預設：'driving',可不填 //from引數不填預設當前地址 from: { latitude: _this.data.srcLat, longitude: _this.data.srcLng }, to: { latitude: _this.data.dstLat, longitude: _this.data.dstLng }, success: function (res) { console.log(res); var ret = res; var coors = ret.result.routes[0].polyline, pl = []; //座標解壓（返回的點串座標，通過前向差分進行壓縮） var kr = 1000000; for (var i = 2; i < coors.length; i++) { coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr; } //將解壓後的座標放入點串陣列pl中 for (var i = 0; i < coors.length; i += 2) { pl.push({ latitude: coors[i], longitude: coors[i + 1] }) } console.log(pl) //設定polyline屬性，將路線顯示出來,將解壓座標第一個資料作為起點 _this.setData({ latitude:pl[0].latitude, longitude:pl[0].longitude, polyline: [{ points: pl, color: '#FF0000DD', width: 4 }] }) }, fail: function (error) { console.error(error); }, complete: function (res) { console.log(res); } }); } })
騰訊地圖服務還提供了距離計算等其它功能，具體功能可以檢視騰訊地圖服務官方文件
剛開始接觸微信小程式，還有很多東西需要學習，大家一起交流學習呀