使用高德地图微信小程序SDK开发案例-输入提示（附源码）

闲来无事写一篇使用高德地图的微信小程序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魔都
源码地址：https://github.com/749264345/wechat-weapp-map

最后编辑于：2018.11.10 13:11:29