使用高德地图微信小程序SDK开发案例-输入提示(附源码)
闲来无事写一篇使用高德地图的微信小程序SDK开发应用的实例。 接下来先看需求:我们要做的是,根据用户输入的关键词,给出相应的提示信息,列表中显示地方的名称,地方的详细地址以及对应的经纬度坐标。
好了,我们为它添加1个监听事件,bindinput='input',来监听用户的键盘输入。 <view class="list">
"list-item" wx:for="{{searchList}}" >
'title'>{{item.name}}</view>
'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);
}
这样,每当用户输入关键字时就能实时得到返回结果。 " >
<image "icon" mode="widthFix" src="../../images/icon.png"></image>
</view>
</view>
到这里我们基本已经完成了大致的需求。 |