E企盈小程序营销工具技术服务商 热线:4006-838-530

使用高德地图微信小程序SDK开发案例输入提示九寨沟县E企盈小程序(附源码)

E企盈小程序直播系统

闲来无事写一篇使用高德地图的微信小程序SDK开发应用的实例。

接下来先看需求:我们要做的是,根据用户输入的关键词,给出相应的提示信息,列表中显示地方的名称,地方的详细地址以及对应的经纬度坐标。当然在UI上我们尽量做到理想的视觉与较好的用户体验。最终的效果我们希望是像这样的,如下图:

有了目标,我们直接代码撸起来~我们先从高德开放平台获取微信小程序SDK以及开发需要的key。完成一些基础工作后我们先规划下页面布局。我们需要一个输入框可以让用户输入,和一个存放列表的容器来显示提示信息。input type="text" value='{{inputVal}}' bindinput='input' placeholder='请输入搜索关键字'/input复制代码

好了,我们为它添加1个监听事件,bindinput=’input’,来监听用户的键盘输入。接着我们来做存放列表的容器。view class="list"    view class="list-it开通75d雪纺汉服面料小程序电话:4006-838-530em" wx:for="{{searchList}}"          view class='title'{{item.name}}/view        view class='address'{{item.district}}{{item.address}}/view    /view/view复制代码

在接下去调用高德接口的过程中,我们将会从接口中获得一个数组,我们将这个数组赋值给se开通手提包小程序电话:4006-838-530archList,因此我们需要给容器内的列表项添加for循环。这样就能达到我们预期的效果。接着我们为输入框绑定的监听事件添加对应的方法  input: function (e) {      this.setData({        inputVal: e.detail.value      })  }复制代码

同时将输入的关键字赋值给inputVal,这样我们就能在页面上看到我们输入的文字了。获取到输入的关键字,我们就可以将关键字作为参数传到高德提供的接口中,使其返回数据。我们写一个公共方法,将调用接口方法封装起来。//引入高德微信小程序SDKvar amapFile = require('amap-wx.js');//搜索关键字keyword: function (){    var myAmapFun = new amapFile.AMapWX({key: '高德Key'}),that = this;    myAmapFun.getInputtips({        keywords:'关键字',        location: '',     开通雕花布洛克小程序电话:4006-838-530   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…

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 使用高德地图微信小程序SDK开发案例输入提示九寨沟县E企盈小程序(附源码)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏