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

風雨vs同舟發表於2018-11-21
微信小程式地圖

前言

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

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

膨脹.jpg

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

image.png

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

小程式地圖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資料夾內，任何位置都可以，不然找不到。如圖：

image.png

引用： 1.在js檔案開頭引入並宣告SDK物件

image.png

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欄位即可，如下圖：

image.png

這樣就能正常分頁了。

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

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

相關文章