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

接下來先看需求：

我們要做的是，根據(jù)用戶輸入的關(guān)鍵詞，給出相應(yīng)的提示信息，列表中顯示地方的名稱，地方的詳細(xì)地址以及對應(yīng)的經(jīng)緯度坐標(biāo)。
當(dāng)然在UI上我們盡量做到理想的視覺與較好的用戶體驗(yàn)。
最終的效果我們希望是像這樣的，如下圖：

有了目標(biāo)，我們直接代碼擼起來～
我們先從高德開放平臺獲取微信小程序SDK以及開發(fā)需要的key。
完成一些基礎(chǔ)工作后我們先規(guī)劃下頁面布局。
我們需要一個輸入框可以讓用戶輸入，和一個存放列表的容器來顯示提示信息。

<input type="text" value='{{inputVal}}' bindinput='input' placeholder='請輸入搜索關(guān)鍵字'></input>

好了，我們?yōu)樗砑?個監(jiān)聽事件，bindinput='input'，來監(jiān)聽用戶的鍵盤輸入。
接著我們來做存放列表的容器。

<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)用高德接口的過程中，我們將會從接口中獲得一個數(shù)組，我們將這個數(shù)組賦值給searchList，因此我們需要給容器內(nèi)的列表項添加for循環(huán)。
這樣就能達(dá)到我們預(yù)期的效果。
接著我們?yōu)檩斎肟蚪壎ǖ谋O(jiān)聽事件添加對應(yīng)的方法

  input: function (e) {
      this.setData({
        inputVal: e.detail.value
      })
  }

同時將輸入的關(guān)鍵字賦值給inputVal，這樣我們就能在頁面上看到我們輸入的文字了。
獲取到輸入的關(guān)鍵字，我們就可以將關(guān)鍵字作為參數(shù)傳到高德提供的接口中，使其返回數(shù)據(jù)。
我們寫一個公共方法，將調(diào)用接口方法封裝起來。

//引入高德微信小程序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àn)在我們將整個流程打通；
為了提升用戶的使用體驗(yàn)，在用戶輸入關(guān)鍵字的同時觸發(fā)搜索，實(shí)時返回結(jié)果。

input: function (e) {
      this.setData({
        inputVal: e.detail.value
      });
      //在監(jiān)聽的方法中添加搜索關(guān)鍵字的方法
     this.keyword(e.detail.value);
  }

這樣，每當(dāng)用戶輸入關(guān)鍵字時就能實(shí)時得到返回結(jié)果。
我們從接口中提取想要的數(shù)據(jù)，在頁面上展示。

   <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)鍵字長度為0的時候，列表容器應(yīng)該處于不顯示狀態(tài)。
當(dāng)然我們還可以在輸入框上添加清除輸入內(nèi)容的按鈕來提升使用體驗(yàn)?；蛘咴谳斎肟虻淖髠?cè)添加城市選擇，獲取經(jīng)緯度后傳入封裝的keyword()方法，就能根據(jù)不同的城市來做搜索。