閑來(lái)無(wú)事寫(xiě)一篇使用高德地圖的微信小程序SDK開(kāi)發(fā)應(yīng)用的實(shí)例。
我們要做的是,根據(jù)用戶輸入的關(guān)鍵詞,給出相應(yīng)的提示信息,列表中顯示地方的名稱,地方的詳細(xì)地址以及對(duì)應(yīng)的經(jīng)緯度坐標(biāo)。
當(dāng)然在UI上我們盡量做到理想的視覺(jué)與較好的用戶體驗(yàn)。
最終的效果我們希望是像這樣的,如下圖:
有了目標(biāo),我們直接代碼擼起來(lái)~
我們先從高德開(kāi)放平臺(tái)獲取微信小程序SDK以及開(kāi)發(fā)需要的key。
完成一些基礎(chǔ)工作后我們先規(guī)劃下頁(yè)面布局。
我們需要一個(gè)輸入框可以讓用戶輸入,和一個(gè)存放列表的容器來(lái)顯示提示信息。
<input type="text" value='{{inputVal}}' bindinput='input' placeholder='請(qǐng)輸入搜索關(guān)鍵字'></input>
好了,我們?yōu)樗砑?個(gè)監(jiān)聽(tīng)事件,bindinput='input',來(lái)監(jiān)聽(tīng)用戶的鍵盤(pán)輸入。
接著我們來(lái)做存放列表的容器。
<view class="list"> <view class="list-item" wx:for="{{searchList}}" > <view class='title'>{{item.name}}</view> <view class='address'>{{item.district}}{{item.address}}</view> </view> </view>
在接下去調(diào)用高德接口的過(guò)程中,我們將會(huì)從接口中獲得一個(gè)數(shù)組,我們將這個(gè)數(shù)組賦值給searchList,因此我們需要給容器內(nèi)的列表項(xiàng)添加for循環(huán)。
這樣就能達(dá)到我們預(yù)期的效果。
接著我們?yōu)檩斎肟蚪壎ǖ谋O(jiān)聽(tīng)事件添加對(duì)應(yīng)的方法
input: function (e) { this.setData({ inputVal: e.detail.value }) } |
同時(shí)將輸入的關(guān)鍵字賦值給inputVal,這樣我們就能在頁(yè)面上看到我們輸入的文字了。
獲取到輸入的關(guān)鍵字,我們就可以將關(guān)鍵字作為參數(shù)傳到高德提供的接口中,使其返回?cái)?shù)據(jù)。
我們寫(xiě)一個(gè)公共方法,將調(diào)用接口方法封裝起來(lái)。
//引入高德微信小程序SDK var amapFile = require('amap-wx.js'); //搜索關(guān)鍵字 keyword: function (){ var myAmapFun = new amapFile.AMapWX({key: '高德Key'}),that = this; myAmapFun.getInputtips({ keywords:'關(guān)鍵字', location: '', success: function (data) { if (data && data.tips) { //將數(shù)據(jù)賦值到searchList that.setData({searchList: data.tips}); } } }); } |
到此我們寫(xiě)好了接口邏輯,現(xiàn)在我們將整個(gè)流程打通;
為了提升用戶的使用體驗(yàn),在用戶輸入關(guān)鍵字的同時(shí)觸發(fā)搜索,實(shí)時(shí)返回結(jié)果。
input: function (e) { this.setData({ inputVal: e.detail.value }); //在監(jiān)聽(tīng)的方法中添加搜索關(guān)鍵字的方法 this.keyword(e.detail.value); } |
這樣,每當(dāng)用戶輸入關(guān)鍵字時(shí)就能實(shí)時(shí)得到返回結(jié)果。
我們從接口中提取想要的數(shù)據(jù),在頁(yè)面上展示。
<view class="list-item" wx:for="{{searchList}}" > <image class="icon" mode="widthFix" src="../../images/icon.png"></image> <view class='title'>{{item.name}}</view> <view class='address'>{{item.district}}{{item.address}}</view> </view> |
為增強(qiáng)UI效果我們添加一些合理的樣式和小圖標(biāo)作為美化。
到這里我們基本已經(jīng)完成了大致的需求。
但是細(xì)節(jié)方面我們也需要注意;比如:當(dāng)用戶尚未輸入關(guān)鍵,或者關(guān)鍵字長(zhǎng)度為0的時(shí)候,列表容器應(yīng)該處于不顯示狀態(tài)。
當(dāng)然我們還可以在輸入框上添加清除輸入內(nèi)容的按鈕來(lái)提升使用體驗(yàn)?;蛘咴谳斎肟虻淖髠?cè)添加城市選擇,獲取經(jīng)緯度后傳入封裝的keyword()方法,就能根據(jù)不同的城市來(lái)做搜索。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)