EA&UML日拱一卒-微信小程式實戰：位置鬧鈴 (5)-顯示所在位置的資訊
假設我們指定了多個監控點，接下來的需求就是給每個監控點取名字。如果是手動輸入的話，會比較麻煩。所以位置鬧鈴再向前走一步，從地圖上取得監控點所在位置的資訊作為監控點的名稱。
畫面說明
當我們選定監控點以後，該處的資訊會在下面的列表中表示出來。通過上下滾動列表中的內容，使用者就可以選擇合適的資訊作為監控點的名稱。
setpoint.wxml
為了看起來方便一些，這裡只選取新增加的部分。
<picker-viewindicator-style="height:1.5em;"class="info_area"value="{{info_index}}"bindchange="pikerChange">
<picker-view-column>
<viewwx:for="{{pois.pois}}"wx:for-item="pois"wx:key="index">{{pois.title}}</view>
</picker-view-column>
</picker-view>
piker-view顯示的是pois.pois中的資料，當用戶滾動它的時候，setpoint.js中的pikerChange方法會被呼叫，而當前專案的索引就是引數。
util.js
在util.js中增加了一個函式用於取得指定地點的資訊。程式碼如下：
function
// 具體json 返回格式可自行參考騰訊地圖API介面文件
varkey ="M6VBZ-BPRHX-YPK45-7Q4GC-Z3F7T-7YFO7"; //需要到http://lbs.qq.com/申請
varurl ="https://apis.map.qq.com/ws/geocoder/v1/?location="+ latitude +","+ longitude +"&key="+ key+"&get_poi=1";
vardefaultUrl ="http://www.apayado.com/pois.json?"
wx.request( {
url: url,
success:function( res ) {
callback(res.data.result);
},
fail:function(res) {
getDefaultPoiData(defaultUrl,function(res) {
callback(res);
});
}
});
}
這段程式碼來自【小程式，巧應用：微信小程式開發實戰(第2版)】，這裡稍加修改。
這個函式通過wx.request訪問騰訊的位置服務，當該服務呼叫成功以後，以位置服務的返回值作為引數呼叫callback函式。而這個callback函式又是利用者在呼叫getPoisByLocation函式時傳進來的。
另外一點，從微信小程式訪問騰訊位置服務時需要做另外兩件事情：一是到http://lbs.qq.com申請訪問時的使用金鑰（KEY）；另外一個是在小程式設定畫面指定允許小程式訪問的域名。設定畫面如下，具體看伺服器域名設定的部分。
setpoint.js
取得和表示地理資訊
在地圖視野發生變化的時候，下面的函式就會被架構呼叫。
regionChanged:function(e) {
console.log("setpoints.js regionChanged")
varthat =this
this.mapCtx.getCenterLocation ({
success:function(res) {
type:'gcj02',// 返回 可以 用於 wx. openLocation 的 經緯度
util.getPoisByLocation(res.latitude, res.longitude,function(data){
console.log(data)
that.setData({
pois:data,
});
})
app.globalData.currentAlarm = {
longitude: res.longitude,
latitude: res.latitude
};
}
})
},
關注黃色背景的部分。getPoisByLocation成功以後，通過setData函式，資料被傳遞給pois成員。從pois到畫面的工作是架構完成的，程式設計師不需要操心。
處理使用者選擇操作
pikerChange:function(e) {
constval = e.detail.value
app.globalData.currentAlarm.title =this.data.pois.pois[val]
},
這個函式的引數是使用者所選專案的索引，通過這個索引選擇合適的資訊傳遞給監控點。
參考資料
WebService API
http://lbs.qq.com/webservice_v1/guide-gcoder.html
KEY申請
http://lbs.qq.com
寫在文章的最後
