小程序地图-搜索引擎搜索地址

「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」。

当我们需要通过关键字自动匹配查找地址时，就会用到getInputtips，接下来让我们实现一下

首先我们把搜索框以及map地图显示在页面中

搜索框的输入框绑定 to ，bindinput方法可以监听到当前输入框的值， 当输入框内容变化，触发 bindPointInput 获取输入框的匹配地址。

匹配的地址绑定 tips ， 点击匹配出的一个地址, 触发 ToSearch 并传递下标,

  <view class="search-bar">
    <view class="search-bar_form">
      <view class="search-bar_box">
        <icon class="icon-search_in-box" type="search" size="20"></icon>
        <input type="text" class="search-bar_input" value="{{to}}" bindinput="bindPointInput"
          placeholder="请输入搜索内容" />
      </view>
      <view class="EngineTipsBox" wx:for="{{tips}}" wx:key="this">
        <view class="address-item" bindtap="ToSearch" data-index="{{index}}">
          <text>{{item.name}}</text>
        </view>
      </view>
    </view>
  </view>

这里的map没有写经度纬度（longitude、latitude）， 通过markers对地址进行标记，include-points缩放视野以包含所有给定的坐标点。scale 缩放级别，取值范围为3-20

  <map class="map" id="map" scale="14"
  include-points="{{points}}" markers="{{markers}}" ></map>

改变搜索框的样式，位置、内容的字体大小等，将map的宽高改变为我们需要的界面大小， 我们可以在less文件中先把样式写好（嵌套编写），在终端输入命令 wxss pages\nearby\index.less （复制你需要运行的less文件路径） 即可生成对应的 wxss文件， 下面是生成wxss后的css代码

.search-bar {
  position: relative;
  padding: 8px 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  background-color: #EFEFF4;
  border-top: 1rpx solid #D7D6DC;
  border-bottom: 1rpx solid #D7D6DC;
  z-index: 10;
}
.icon-search_in-box {
  position: absolute;
  left: 10px;
  top: 7px;
}
.search-bar_form {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
  flex: auto;
  border-radius: 5px;
  background: #FFFFFF;
  border: 1rpx solid #E6E6EA;
}
.search-bar .search-bar_form .EngineTipsBox .address-item{
  position: relative;
  z-index: 999;
  background-color: white;
}
.search-bar .search-bar_form .EngineTipsBox .address-item text{
  font-size: 16px;
  margin-left: 10px;
  margin-right: 10px;
}
.search-bar_box {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}
.search-bar_input {
  height: 34px;
  line-height: 28px;
  font-size: 14px;
}

.map{
  width: 100%;
  height: 550px;
}

接下来就是js文件了

首先绑定高德地图的key， config.js是封装的key

var amapFile = require('../../lib/amap-wx.130.js'); //高德js
var config = require('../../lib/config.js'); //引用我们的配置文件        
var key = config.config.key;
var myAmap = new amapFile.AMapWX({
  key: key
});

data中的元素已经在上面解释过了

data: {
    to: '',
    tips: [],
    markers: [],
    points: []
  },

输入框内容变化时执行的函数，当输入框内容不为空时，通过getInputtips（高德地图的地点关键词的输入提示）获取匹配的地址列表，并赋值给 tips 让它显示在页面

 bindPointInput(e) {
    var that = this;
    var keywords = e.detail.value;
    if( keywords == "" ){
      that.setData({
        tips: []
      })
    }
    myAmap.getInputtips({
      keywords: keywords,
      location: '',
      success: function (res) {
        if (res && res.tips && res.tips[0] && res.tips[0].district) {
          that.setData({
            tips: res.tips
          })
        }
      }
    })
  },

输出一下 res 看看是什么， 所以我们把name属性渲染到页面

当我们点击图片中的 “湖南省博物馆游客中心”， 触发ToSearch函数，并传递下标 5

将获取到的字符串通过split分割为经度和纬度，分别赋值给points和markers， iconPath是图标的地址，然后我们将tips恢复为空

ToSearch(e) {
    var index = e.currentTarget.dataset.index;
    var locations = this.data.tips[index].location.split(",");
    this.setData({
      to: this.data.tips[index].name,
      points: [{
        latitude: locations[1],
        longitude: locations[0]
      }],
      markers: [{
        latitude: locations[1],
        longitude: locations[0],
        width: 30,
        height: 30,
        iconPath: "../../icon/site/enddingPoint.svg"
      }],
      tips: []
    })
 }