前言
最近在搗騰小程序，想開(kāi)發(fā)一個(gè)自己的小程序，過(guò)一把獨(dú)立開(kāi)發(fā)的癮。
自己設(shè)計(jì)，自己搞數(shù)據(jù)，自己找圖標(biāo)，自己決定要或者不要什么功能，完全跟著心走，目前體驗(yàn)下來(lái)，感覺(jué)還是蠻爽的。比在公司產(chǎn)品要你做什么你就得做什么舒服多了，巴適的很（假裝自己是四川人），哈哈
雖然我是一個(gè)App開(kāi)發(fā)，但我還是蠻注重用戶(hù)體驗(yàn)的，我會(huì)去考慮應(yīng)用的使用場(chǎng)景，使用習(xí)慣，不斷的去調(diào)整，去優(yōu)化。這次開(kāi)發(fā)的小程序，從配色、圖標(biāo)選擇、UI設(shè)計(jì)，到頁(yè)面結(jié)構(gòu)、功能等都花了很多心思。歡迎體驗(yàn)，吐槽。
呀！一不小心扯遠(yuǎn)了，回歸主題！
小程序地圖SDK原理 （注意：這一段要仔細(xì)看哦，很多人問(wèn)我為什么你寫(xiě)的是高德地圖SDK，卻用的是騰訊地圖，答案就在這里）
微信小程序開(kāi)發(fā)，可以使用地圖組件map，來(lái)進(jìn)行地圖顯示、定位、顯示大頭針等基本功能，具體可以看官方文檔：微信小程序map組件。
map組件只提供一些基本的“硬件”，還需要“大腦”來(lái)驅(qū)動(dòng)這些“硬件”。這個(gè)“大腦”就是騰訊地圖、百度地圖和高德地圖提供的小程序SDK。其實(shí)這些SDK只是提供了一些網(wǎng)絡(luò)請(qǐng)求接口，請(qǐng)求這些接口，能獲得對(duì)應(yīng)結(jié)構(gòu)的網(wǎng)絡(luò)數(shù)據(jù)，再驅(qū)動(dòng)map組件來(lái)渲染。
比如線(xiàn)路規(guī)劃：從A到B，只要確定起點(diǎn)經(jīng)緯度和終點(diǎn)經(jīng)緯度，傳給SDK，SDK里就會(huì)發(fā)起網(wǎng)絡(luò)請(qǐng)求，獲得最佳路線(xiàn)，返回給你從A到B所途經(jīng)的轉(zhuǎn)折點(diǎn)經(jīng)緯度數(shù)組，你把得到的經(jīng)緯度數(shù)組傳給map組件，map就能繪制路線(xiàn)。
高德SDK接口列表
高德地圖提供的接口有：
| 方法 | 用途 |
|---|---|
| getPoiAround(Object) | 獲取周邊的POI。 querykeywords、location、querytypes 字段于 1.1.0 版本新增。 |
| getRegeo(Object) | 獲取地址描述信息。 location 字段于 1.1.0 版本新增。 |
| getWeather(Object) | 獲取天氣情況（實(shí)時(shí)和預(yù)報(bào)）。type、city字段于 1.1.0 版本新增。 |
| getStaticmap(Object) | 獲取靜態(tài)的地圖圖片。 getStaticmap(Object) 方法于 1.1.0 版本新增。 |
| getInputtips(Object) | 獲取提示詞。 getInputtips(Object) 方法于 1.2.0 版本新增。 |
| getDrivingRoute(Object) | 獲取駕車(chē)路線(xiàn)。 getDrivingRoute(Object) 方法于 1.2.0 版本新增。 |
| getWalkingRoute(Object) | 獲取步行路線(xiàn)。 getWalkingRoute(Object) 方法于 1.2.0 版本新增。 |
| getTransitRoute(Object) | 獲取公交路線(xiàn)。 getTransitRoute(Object) 方法于 1.2.0 版本新增。 |
| getRidingRoute(Object) | 獲取騎行路線(xiàn)。 getRidingRoute(Object) 方法于 1.2.0 版本新增。 |
具體接口用法，參考高德官方文檔: AMapWX基本方法
接入SDK：
首先：下載SDK下載地址
下載完后，直接將amap-wx.js文件拖到工程libs目錄下，這個(gè)目錄隨便建的，一定要放到miniprogram文件夾內(nèi)，任何位置都可以，不然找不到。如圖：
引用：
1.在js文件開(kāi)頭引入并聲明SDK對(duì)象
2.我把不相關(guān)代碼刪掉后，獲得高德當(dāng)前位置天氣情況，大概就是這樣子的：
// miniprogram/pages/home/home.js
var amapFile = require('../../libs/amap-wx.js');
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
* 本地圖："../../images/hz_metro_map.png"
* 網(wǎng)絡(luò)圖：
*/
data: {
weatherInfo: null,
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
onShow: function() {
this._getWeather();
},
/**
* 獲取天氣信息
*/
_getWeather: function() {
var that = this;
var myAmapFun = new amapFile.AMapWX({ key: '高德地圖key' });
myAmapFun.getWeather({
success: function (data) {
//成功回調(diào)
console.log(data)
},
fail: function (info) {
//失敗回調(diào)
console.log(info)
}
})
}
})
這樣就拿到了高德的數(shù)據(jù)，超級(jí)簡(jiǎn)單有木有。
遇到的坑
雖然很簡(jiǎn)單，但是使用起來(lái)，還是發(fā)現(xiàn)有坑。使用getPoiAround接口時(shí)，發(fā)現(xiàn)沒(méi)有分頁(yè)功能。其實(shí)高德服務(wù)度接口是有分頁(yè)功能的，但是小程序SDK里并沒(méi)有把page參數(shù)暴露出來(lái)，坑啊。我使用的SDK版本是:sdkversion: "1.2.0"
解決辦法：在amap-wx.js文件里，找到getPoiAround接口，往參數(shù)里添加一個(gè)page字段即可，如下圖：
這樣就能正常分頁(yè)了。
最后
高德地圖的每日可調(diào)用次數(shù)上限，比騰訊地圖的多一些。
到此就說(shuō)完了，也就那么回事。
歡迎掃上面小程序碼，體驗(yàn)我的小程序，多多吐槽，我將繼續(xù)優(yōu)化。謝謝！
