最近在做一個微信小程序地圖插件，通過傳入起始位置名稱和經緯度信息，就可以跳轉到路線規划插件頁面中，在該頁面中，可以根據起始位置查詢自駕，公共交通，步行等方式的路線信息，並且在地圖上顯示路線信息，在這個過程中，用到了微信小程序的組件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); } }); } })
騰訊地圖服務還提供了距離計算等其它功能，具體功能可以查看騰訊地圖服務官方文檔
剛開始接觸微信小程序，還有很多東西需要學習，大家一起交流學習呀