微信小程序之：小程序接入高德地圖SDK

前言

最近在搗騰小程序，想開發一個本身的小程序，過一把獨立開發的癮。

本身設計，本身搞數據，本身找圖標，本身決定要或者不要什麼功能，徹底跟着心走，目前體驗下來，感受仍是蠻爽的。比在公司產品要你作什麼你就得作什麼舒服多了，巴適的很（僞裝本身是四川人），哈哈

雖然我是一個App開發，但我仍是蠻注重用戶體驗的，我會去考慮應用的使用場景，使用習慣，不斷的去調整，去優化。此次開發的小程序，從配色、圖標選擇、UI設計，到頁面結構、功能等都花了不少心思。歡迎體驗，吐槽。

呀！一不當心扯遠了，迴歸主題！

小程序地圖SDK原理

微信小程序開發，可使用地圖組件map，來進行地圖顯示、定位、顯示大頭針等基本功能，具體能夠看官方文檔：微信小程序map組件。

map組件只提供一些基本的「硬件」，還須要「大腦」來驅動這些「硬件」。這個「大腦」就是騰訊地圖、百度地圖和高德地圖提供的小程序SDK。其實這些SDK只是提供了一些網絡請求接口，請求這些接口，能得到對應結構的網絡數據，再驅動map組件來渲染。

好比線路規劃：從A到B，只要肯定起點經緯度和終點經緯度，傳給SDK，SDK裏就會發起網絡請求，得到最佳路線，返回給你從A到B所途經的轉折點經緯度數組，你把獲得的經緯度數組傳給map組件，map就能繪製路線。

高德SDK接口列表

高德地圖提供的接口有：

方法	用途
getPoiAround(Object)	獲取周邊的POI。 querykeywords、location、querytypes 字段於 1.1.0 版本新增。
getRegeo(Object)	獲取地址描述信息。 location 字段於 1.1.0 版本新增。
getWeather(Object)	獲取天氣狀況（實時和預報）。type、city字段於 1.1.0 版本新增。
getStaticmap(Object)	獲取靜態的地圖圖片。 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文件夾內，任何位置均可以，否則找不到。如圖：

引用： 1.在js文件開頭引入並聲明SDK對象

2.把不相關代碼刪掉後，得到高德當前位置天氣狀況，大概就是這樣子的：

// miniprogram/pages/home/home.js
var amapFile = require('../../libs/amap-wx.js');
Page({
    /**
     * 頁面的初始數據
     * 本地圖："../../images/hz_metro_map.png"
     * 網絡圖：
     */
    data: {
        weatherInfo: null,
    },
    /**
     * 生命週期函數--監聽頁面顯示
     */
    onShow: function() {
        this._getWeather();
    },
    /**
     * 獲取天氣信息
     */
    _getWeather: function() {
        var that = this;
        var myAmapFun = new amapFile.AMapWX({ key: '高德地圖key' });
        myAmapFun.getWeather({
            success: function (data) {
                //成功回調
                console.log(data)
            },
            fail: function (info) {
                //失敗回調
                console.log(info)
            }
        })
    }
})
複製代碼

這樣就拿到了高德的數據，超級簡單有木有。

遇到的坑

雖然很簡單，可是使用起來，仍是發現有坑。使用getPoiAround接口時，發現沒有分頁功能。其實高德服務度接口是有分頁功能的，可是小程序SDK裏並無把page參數暴露出來，坑啊。我使用的SDK版本是:sdkversion: "1.2.0"

解決辦法：在amap-wx.js文件裏，找到getPoiAround接口，往參數裏添加一個page字段便可，以下圖：

這樣就能正常分頁了。

到此就說完了，也就那麼回事。

歡迎掃上面小程序碼，體驗個人小程序，多多吐槽，我將繼續優化。謝謝！