使用高德地圖微信小程式SDK開發案例-輸入提示（附原始碼）

Jnst發表於2018-11-10
地圖微信小程式原始碼

閒來無事寫一篇使用高德地圖的微信小程式SDK開發應用的例項。

接下來先看需求：

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

image.png
有了目標，我們直接程式碼擼起來～ 我們先從高德開放平臺獲取微信小程式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()方法，就能根據不同的城市來做搜尋。

詳細案例請搜尋微信小程式：52魔都； 原始碼地址：github.com/749264345/w…

相關文章