閑來無事寫一篇使用高德地圖的微信小程序SDK開發應用的實例。

接下來先看需求：

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

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

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

好了，我們為它添加1個監聽事件，bindinput='input'，來監聽用戶的鍵盤輸入。
接著我們來做存放列表的容器。

<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>

在接下去調用高德接口的過程中，我們將會從接口中獲得一個數組，我們將這個數組賦值給searchList，因此我們需要給容器內的列表項添加for循環。
這樣就能達到我們預期的效果。
接著我們為輸入框綁定的監聽事件添加對應的方法

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

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

//引入高德微信小程序SDK
var amapFile = require('amap-wx.js');

//搜索關鍵字

keyword: function (){
    var myAmapFun = new amapFile.AMapWX({key: '高德Key'}),that = this;
    myAmapFun.getInputtips({
        keywords:'關鍵字',
        location: '',
        success: function (data) {
          if (data && data.tips) {
            //將數據賦值到searchList
            that.setData({searchList: data.tips});
          }  
        }
    });
 }

到此我們寫好了接口邏輯，現在我們將整個流程打通；
為了提升用戶的使用體驗，在用戶輸入關鍵字的同時觸發搜索，實時返回結果。

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

這樣，每當用戶輸入關鍵字時就能實時得到返回結果。
我們從接口中提取想要的數據，在頁面上展示。

   <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>

為增強UI效果我們添加一些合理的樣式和小圖標作為美化。
到這里我們基本已經完成了大致的需求。
但是細節方面我們也需要注意；比如：當用戶尚未輸入關鍵，或者關鍵字長度為0的時候，列表容器應該處于不顯示狀態。
當然我們還可以在輸入框上添加清除輸入內容的按鈕來提升使用體驗。或者在輸入框的左側添加城市選擇，獲取經緯度后傳入封裝的keyword()方法，就能根據不同的城市來做搜索。