前言

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

自己設計，自己搞數據，自己找圖標，自己決定要或者不要什么功能，完全跟著心走，目前體驗下來，感覺還是蠻爽的。比在公司產品要你做什么你就得做什么舒服多了，巴適的很（假裝自己是四川人），哈哈

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

呀！一不小心扯遠了，回歸主題！

小程序地圖SDK原理

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

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

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

高德SDK接口列表

高德地圖提供的接口有：

方法用途

(Object)

獲取周邊的POI。

、、 字段于 1.1.0 版本新增。

(Object)

獲取地址描述信息。

字段于 1.1.0 版本新增。

(Object)

獲取天氣情況（實時和預報）。type、city字段于 1.1.0 版本新增。

(Object)

獲取靜態的地圖圖片。

(Object) 方法于 1.1.0 版本新增。

(Object)

獲取提示詞。

(Object) 方法于 1.2.0 版本新增。

(Object)

獲取駕車路線。

(Object) 方法于 1.2.0 版本新增。

(Object)

獲取步行路線。

(Object) 方法于 1.2.0 版本新增。

(Object)

獲取公交路線。

(Object) 方法于 1.2.0 版本新增。

(Object)

獲取騎行路線。

(Object) 方法于 1.2.0 版本新增。

具體接口用法，參考高德官方文檔: AMapWX基本方法

接入SDK：

**首先：**下載SDK下載地址 下載完后，直接將amap-wx.js文件拖到工程libs目錄下，這個目錄隨便建的，一定要放到文件夾內，任何位置都可以，不然找不到。如圖：

引用： 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)
            }
        })
    }
})
復制代碼

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

遇到的坑

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

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

這樣就能正常分頁了。

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

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