閑來(lái)無(wú)事寫(xiě)一篇使用高德地圖的微信小程序SDK開(kāi)發(fā)應(yīng)用的實(shí)例。

接下來(lái)先看需求：

我們要做的是，根據(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)做搜索。