前言
最近在搗騰小程序亩进，想開發(fā)一個自己的小程序症虑，過一把獨立開發(fā)的癮。
自己設(shè)計归薛，自己搞數(shù)據(jù)谍憔，自己找圖標，自己決定要或者不要什么功能苟翻，完全跟著心走韵卤，目前體驗下來，感覺還是蠻爽的崇猫。比在公司產(chǎn)品要你做什么你就得做什么舒服多了沈条，巴適的很（假裝自己是四川人），哈哈
雖然我是一個App開發(fā)诅炉，但我還是蠻注重用戶體驗的蜡歹，我會去考慮應(yīng)用的使用場景，使用習慣涕烧，不斷的去調(diào)整月而，去優(yōu)化。這次開發(fā)的小程序议纯，從配色父款、圖標選擇、UI設(shè)計瞻凤，到頁面結(jié)構(gòu)憨攒、功能等都花了很多心思。歡迎體驗阀参，吐槽肝集。
呀！一不小心扯遠了蛛壳，回歸主題杏瞻！
小程序地圖SDK原理 （注意：這一段要仔細看哦，很多人問我為什么你寫的是高德地圖SDK衙荐，卻用的是騰訊地圖捞挥，答案就在這里）
微信小程序開發(fā)，可以使用地圖組件map赫模，來進行地圖顯示树肃、定位、顯示大頭針等基本功能瀑罗，具體可以看官方文檔：微信小程序map組件胸嘴。
map組件只提供一些基本的“硬件”，還需要“大腦”來驅(qū)動這些“硬件”斩祭。這個“大腦”就是騰訊地圖劣像、百度地圖和高德地圖提供的小程序SDK。其實這些SDK只是提供了一些網(wǎng)絡(luò)請求接口摧玫，請求這些接口耳奕，能獲得對應(yīng)結(jié)構(gòu)的網(wǎng)絡(luò)數(shù)據(jù)，再驅(qū)動map組件來渲染诬像。
比如線路規(guī)劃：從A到B屋群，只要確定起點經(jīng)緯度和終點經(jīng)緯度，傳給SDK坏挠，SDK里就會發(fā)起網(wǎng)絡(luò)請求芍躏，獲得最佳路線，返回給你從A到B所途經(jīng)的轉(zhuǎn)折點經(jīng)緯度數(shù)組降狠，你把得到的經(jīng)緯度數(shù)組傳給map組件对竣，map就能繪制路線。
高德SDK接口列表
高德地圖提供的接口有：
| 方法 | 用途 |
|---|---|
| getPoiAround(Object) | 獲取周邊的POI榜配。 querykeywords否纬、location、querytypes 字段于 1.1.0 版本新增蛋褥。 |
| getRegeo(Object) | 獲取地址描述信息临燃。 location 字段于 1.1.0 版本新增。 |
| getWeather(Object) | 獲取天氣情況（實時和預(yù)報）烙心。type膜廊、city字段于 1.1.0 版本新增。 |
| getStaticmap(Object) | 獲取靜態(tài)的地圖圖片弃理。 getStaticmap(Object) 方法于 1.1.0 版本新增溃论。 |
| getInputtips(Object) | 獲取提示詞。 getInputtips(Object) 方法于 1.2.0 版本新增痘昌。 |
| getDrivingRoute(Object) | 獲取駕車路線钥勋。 getDrivingRoute(Object) 方法于 1.2.0 版本新增。 |
| getWalkingRoute(Object) | 獲取步行路線辆苔。 getWalkingRoute(Object) 方法于 1.2.0 版本新增算灸。 |
| getTransitRoute(Object) | 獲取公交路線。 getTransitRoute(Object) 方法于 1.2.0 版本新增驻啤。 |
| getRidingRoute(Object) | 獲取騎行路線菲驴。 getRidingRoute(Object) 方法于 1.2.0 版本新增。 |
具體接口用法骑冗，參考高德官方文檔: AMapWX基本方法
接入SDK：
首先：下載SDK下載地址
下載完后赊瞬，直接將amap-wx.js文件拖到工程libs目錄下先煎，這個目錄隨便建的，一定要放到miniprogram文件夾內(nèi)巧涧，任何位置都可以薯蝎，不然找不到。如圖：
引用：
1.在js文件開頭引入并聲明SDK對象
2.我把不相關(guān)代碼刪掉后谤绳，獲得高德當前位置天氣情況占锯，大概就是這樣子的：
// miniprogram/pages/home/home.js
var amapFile = require('../../libs/amap-wx.js');
Page({
/**
* 頁面的初始數(shù)據(jù)
* 本地圖："../../images/hz_metro_map.png"
* 網(wǎng)絡(luò)圖：
*/
data: {
weatherInfo: null,
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
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ù)，超級簡單有木有缩筛。
遇到的坑
雖然很簡單消略，但是使用起來，還是發(fā)現(xiàn)有坑瞎抛。使用getPoiAround接口時艺演，發(fā)現(xiàn)沒有分頁功能。其實高德服務(wù)度接口是有分頁功能的婿失，但是小程序SDK里并沒有把page參數(shù)暴露出來钞艇，坑啊。我使用的SDK版本是:sdkversion: "1.2.0"
解決辦法：在amap-wx.js文件里豪硅，找到getPoiAround接口哩照，往參數(shù)里添加一個page字段即可，如下圖：
這樣就能正常分頁了懒浮。
最后
高德地圖的每日可調(diào)用次數(shù)上限飘弧，比騰訊地圖的多一些。
到此就說完了砚著，也就那么回事次伶。
歡迎掃上面小程序碼，體驗我的小程序稽穆，多多吐槽冠王，我將繼續(xù)優(yōu)化。謝謝舌镶！
