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

最新推荐文章于 2024-06-12 11:03:07 发布

什么都稳了

最新推荐文章于 2024-06-12 11:03:07 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：高德地图微信小程序

本文链接：https://blog.youkuaiyun.com/qq_16170007/article/details/83929511

本文介绍如何使用高德地图微信小程序SDK开发应用，通过用户输入关键词实时返回地点名称、详细地址及经纬度坐标，实现良好的用户体验。涵盖布局设计、事件监听、接口调用等关键技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

闲来无事写一篇使用高德地图的微信小程序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>