整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
前言
最近在搗騰小程序，想開發(fā)一個自己的小程序，過一把獨立開發(fā)的癮。
自己設(shè)計，自己搞數(shù)據(jù)，自己找圖標(biāo)，自己決定要或者不要什么功能，完全跟著心走，目前體驗下來，感覺還是蠻爽的。比在公司產(chǎn)品要你做什么你就得做什么舒服多了，巴適的很（假裝自己是四川人），哈哈
雖然我是一個App開發(fā)，但我還是蠻注重用戶體驗的，我會去考慮應(yīng)用的使用場景，使用習(xí)慣，不斷的去調(diào)整，去優(yōu)化。這次開發(fā)的小程序，從配色、圖標(biāo)選擇、UI設(shè)計，到頁面結(jié)構(gòu)、功能等都花了很多心思。歡迎體驗，吐槽。
呀！一不小心扯遠(yuǎn)了，回歸主題！
小程序地圖SDK原理
微信小程序開發(fā)，可以使用地圖組件map，來進(jìn)行地圖顯示、定位、顯示大頭針等基本功能，具體可以看官方文檔：微信小程序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接口列表
高德地圖提供的接口有：
方法用途
(Object)
獲取周邊的POI。
、、 字段于 1.1.0 版本新增。
(Object)
獲取地址描述信息。
字段于 1.1.0 版本新增。
(Object)
獲取天氣情況（實時和預(yù)報）。type、city字段于 1.1.0 版本新增。
(Object)
獲取靜態(tài)的地圖圖片。
(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目錄下，這個目錄隨便建的，一定要放到文件夾內(nèi)，任何位置都可以，不然找不到。如圖：
引用： 1.在js文件開頭引入并聲明SDK對象
2.把不相關(guān)代碼刪掉后，獲得高德當(dāng)前位置天氣情況，大概就是這樣子的：
// 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)
}
})
}
})
復(fù)制代碼這樣就拿到了高德的數(shù)據(jù)，超級簡單有木有。
遇到的坑
雖然很簡單，但是使用起來，還是發(fā)現(xiàn)有坑。使用接口時，發(fā)現(xiàn)沒有分頁功能。其實高德服務(wù)度接口是有分頁功能的，但是小程序SDK里并沒有把page參數(shù)暴露出來，坑啊。我使用的SDK版本是:: "1.2.0"
解決辦法：在amap-wx.js文件里，找到接口，往參數(shù)里添加一個page字段即可，如下圖：
這樣就能正常分頁了。
到此就說完了，也就那么回事。
歡迎掃上面小程序碼，體驗我的小程序，多多吐槽，我將繼續(xù)優(yōu)化。謝謝！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
