高德地图SDK嵌入微信小程序之封装搜索框组件

引言

1、该文章用于记录微信小程序的学习历程
2、该文章学习视频为B站博主 [无敌风火轮12] 发布的《微信小程序引入高德地图SDK进行导航》系列视频
3、该文章前置文章为《高德地图SDK嵌入微信小程序之封装导航选项组件》

一、配置文件

    在utils文件夹中创建 config.js 文件，在其中写入之前得到的高德地图key，以便后续引用

const configData = {
  gaodekey:'你的高德地图的key'
}
module.exports.ConfigData = configData

二、封装搜索框组件

1、创建组件

    在之前创建的 “components” 组件文件夹中，创建目前所需的 “GaodeInputTips” 搜索框组件

2、GaodeInputTips组件页面

    本次封装的是如图所示的搜索框

    页面中只有一个input标签，因为这里是子组件相关内容，可在父组件中通过标签引入多次；可理解为类与对象的关系

<!--
  value-输入框的初始内容  data-city、data-longitude、data-latitude-绑定一些城市名称、经度、纬度
  placeholder-输入框为空时占位符  bindinput-键盘输入时触发  bindfocus-输入框聚焦时触发  bindblur-输入框失去焦点时触发
-->
<view class="section">
  <input value="{{city}}" data-city="{{city}}" data-longitude="{{longitude}}" data-latitude="{{latitude}}" 
    placeholder="{{defaultValue}}" bindinput="bindInput" bindfocus="handleFocus" bindblur="handleBlur"
  />
  <!-- 输入时会调用高德地图的一个模糊搜索 -->
  <view class="tips_container" wx:if="{{tipsShow}}">
    <!-- 遍历模糊搜索出的列表，点击哪个就去搜哪个 -->
    <view bindtouchstart="bindSearch" data-info="{{i}}" data-keywords="{{i.name}}" class="text_box" 
    wx:for="{{tips}}" wx:for-item="i" wx:key="i">
      {{i.name}}
    </view>
  </view>
</view>

3、GaodeInputTips组件样式

/* components/GaodeInputTips/GaodeInputTips.wxss */
.section {
  height: 30px;
  width: 100%;
}
.section input {
  height: 30px;
  width: 90%;
  margin: 5px auto;
  border: 1px solid #c3c3c3;
  border-radius: 3px;
  padding: 0 5px;
}

.text_box{
  margin: 10px 25px;
  border-bottom: 1px solid #c3c3c3;
  padding-bottom: 10px;
}
.tips_container {
  position: absolute;
  z-index: 999;
  background: #FFF;
  width: 100%;
  max-height: 50vh;
  overflow: auto;
}

4、GaodeInputTips组件事件

①引入高德SDK、引入刚才创建的config.js配置文件

var amapFile = require('../../utils/amap-wx.130');
var config = require('../../utils/config');  //这里面存放高德的key

②由于这是组件页面，所以得用Component作为组件js文件的开头

Component({

③使用properties接受父组件传过来的参数
    坐标名称、坐标经度、坐标纬度、输入框占位符、输入框类型

  properties: {  //父组件传过来的新参数
    city: {  //传过来的坐标名称
      type: String,
      value: ''
    },
    longitude: {  //传过来的坐标经度
      type: String,
      value: ''
    },
    latitude: {  //传过来的坐标纬度
      type: String,
      value: ''
    },
    defaultValue: {  //传过来的输入框占位符，比如“我的位置”、“目的地”等
      type: String,
      value: '请输入'
    },
    inputType: {  //传过来的输入框类型，比如“start”、“end”等
      type: String,
      value: ''
    },
  },

④数据集
    放一个空列表，用于存储展示根据当前输入内容模糊搜索出来的列表
    tipsShow用于标记是否展示模糊列表

  data: {
    tips:{},  //高德SDK根据当前输入内容，模糊搜索出来的列表，存储到tips中
    tipsShow: false  //是否展示模糊搜索出来的列表。默认不展示
  },

⑤lifetimes组件生命周期
    可在此处做预处理

  lifetimes: {
    attached: function(){  //在组件实例进入节点树时执行

    },
    ready: function(e){  //在组件布局完成后执行
      console.log('搜索框', e)
    },
    detached: function(){  //在组件实例被从页面节点树移除时执行

    }
  },

⑥方法列表
    与 data: {} 同级；将后续的⑦⑧⑨⑩function方法放在方法列表中，方便统一维护管理

  methods: {  //组件的方法列表

⑦bindInput 方法
    调用高德SDK给数据中的tips模糊搜索列表赋值
    使用config.ConfigData.gaodekey调用config中的高德key；其中config是最上面引入config.js时命名的变量名，ConfigData是config.js中最后一行的对外呈现名，gaodekey是config.js中的key值常量名

    /**
     * bindInput 调用高德SDK给数据中的tips模糊搜索列表赋值
     */
    bindInput: function(e){  
      console.log('输入内容', e)
      var that = this;
      var keywords = e.detail.value;  //拿到我输入的值
      if(keywords === ''){
        that.setData({
          tips: []
        });
        return false  //如果无值，就不执行后续代码
      }
      var key = config.ConfigData.gaodekey
      var myAmapFun = new amapFile.AMapWX({key:key});
      myAmapFun.getInputtips({  //官方接口中有三个参数，主要需要传keywords使用  citylimit是分页参数
        keywords: keywords,
        location: lonlat,
        city: city,
        success: function(data){
          if(data && data.tips){
            that.setData({
              tips: data.tips
            })
          }
        }
      })
    },

⑧bindSearch 方法
    点击搜索后传参给父组件

    /**
     * bindSearch 点击搜索后传参给父组件
     */
    bindSearch: function(e){
      console.log('点击搜索后', e.target.dataset.info)
      console.log('点击搜索后', e.target.dataset)
      this.triggerEvent('customEvent', {
        info: e.target.dataset.info,  //当前搜索的数据
        inputType: this.properties.inputType  //区分是目的地还是当前位置
      })
    },

⑨handleFocus 方法
    输入框聚焦时触发，展示模糊搜索列表

    /**
     * handleFocus 输入框聚焦时触发，展示模糊搜索列表
     */
    handleFocus: function(e){
      this.setData({
        tipsShow: true
      })
    },

⑩handleBlur 方法
    输入框失去焦点时触发，不展示模糊搜索列表

    /**
     * handleBlur 输入框失去焦点时触发，不展示模糊搜索列表
     */
    handleBlur: function(e){
      this.setData({
        tipsShow: false
      })
    }

---

---

至此，子组件的代码编辑结束

三、地图页面引入搜索框组件

1、map.json引入组件路径

{
  "usingComponents": {  
    "GaodeInputTips": "../../components/GaodeInputTips/GaodeInputTips" 
  }
}

2、map.wxml标签引入组件

<!--通过标签方式引入GaodeInputTips搜索框组件页面-->
<!--
    子页面传递参数给父组件，触发方法handleCustomEvent（在map.js文件中）
    父组件传递数据给子组件：
        父组件的数据为city、longitude、latitude、city_e、longitude_e、latitude_e在map.js的data中存储
        子组件接收的参数为city、longitude、latitude由子组件的GaodeInputTips.js中的properties接收
        还有父组件传值“当前位置”、“start”、“目的地”、“end”，由子组件“defaultValue”、“inputType”接收
-->
<!--当前位置-->
<GaodeInputTips bindcustomEvent="handleCustomEvent" city="{{city}}" longitude="{{longitude}}" latitude="{{latitude}}"
  defaultValue="我的位置" inputType="start"></GaodeInputTips>
<!--目的地-->
<GaodeInputTips bindcustomEvent="handleCustomEvent" city="{{city_e}}" longitude="{{longitude_e}}" latitude="{{latitude_e}}"
  defaultValue="目的地" inputType="end"></GaodeInputTips>

3、map.js补充子组件触发父组件的方法handleCustomEvent

  /**
   * 搜索框组件标签，父组件方法
   */
  handleCustomEvent: function(event){
    console.log('接受到搜索框组件传递的参数  ', event.detail);
    const data = event.detail
    if(data.inputType === 'end'){  //搜索目的地
      this.setData({
        mapEndObj: data.info  //赋值目的地信息
      })
    }
    
  }

---

---

至此搜索框组件的封装及引入完成
呈现效果（此时无法导航，后续实现导航功能时再做操作）