高德地图模糊搜索地址（elementUI）

在项目中引入高德地图后，可直接调用AMap的API。

下面介绍高德地图模糊搜索地址的使用：

<template>
  <el-form ref="orderForm" :model="orderForm" :rules="addRules" label-width="100px">
    <el-form-item label="上车地点：" prop="sname">
      <el-input id="sname" v-model="orderForm.sname" type="text" @focus="initAuto('sname')" @input="searchPlace('sname')" @keyup.delete.native="deletePlace('sname')" placeholder="请输入上车地点">
        <i
          class="el-icon-location-outline el-input__icon"
          slot="suffix" title="上车地点">
        </i>
      </el-input>
    </el-form-item>
    <el-form-item label="下车地点：" prop="dname">
      <el-input id="dname" v-model="orderForm.dname" type="text" @focus="initAuto('dname')" @input="searchPlace('dname')" @keyup.delete.native="deletePlace('dname')" placeholder="请输入下车地点">
        <i
          class="el-icon-location-outline el-input__icon"
          slot="suffix" title="下车地点">
        </i>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="toSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  import AMap from 'AMap'

  export default {
    data() {
      let _self = this;
      let validatePlace = function(rules, value, callback) {
        if(rules.field==='sname'){
          if (value === '') {
            callback(new Error('请输入上车地点'));
          } else {
            if(!_self.orderForm.slat || _self.orderForm.slat===0) {
              callback(new Error('请搜索并选择详细上车地点'));
            } else {
              callback();
            }
          }
        } else if(rules.field==='dname'){
          if (value === '') {
            callback(new Error('请输入下车地点'));
          } else {
            if(!_self.orderForm.dlat || _self.orderForm.dlat===0) {
              callback(new Error('请搜索并选择详细下车地点'));
            } else {
              callback();
            }
          }
        }
      };
      return {
        orderForm: {
          sname: '', // 上车地点
          slat: 0, // 上车地点纬度
          slon: 0, // 上车地点经度
          dname: '', // 下车地点
          dlat: 0, // 下车地点纬度
          dlon: 0 // 下车地点经度
        },
        addRules: {
          sname: [{required: true, validator: validatePlace, trigger: 'change'}],
          dname: [{required: true, validator: validatePlace, trigger: 'change'}]
        },
        snameAuto: null,
        dnameAuto: null,
        snameAutoListener: null,
        dnameAutoListener: null,
      }
    },
    methods: {
      // 实例化Autocomplete
      toInitAuto(inputId) {
        var auto = null;
        AMap.plugin('AMap.Autocomplete',function(){//回调函数
          //实例化Autocomplete
          let autoOptions = {
            city: "", //城市，默认全国
            input:inputId //使用联想输入的input的id
          };
          auto= new AMap.Autocomplete(autoOptions);
          //TODO: 使用autocomplete对象调用相关功能
        });
        return auto;
      },
      // 初始化搜索地址弹层
      initAuto(inputId) {
        if(inputId==="sname" && this.snameAuto==null) {
          this.snameAuto = this.toInitAuto(inputId);
        } else if(inputId==="dname" && this.dnameAuto==null){
          this.dnameAuto = this.toInitAuto(inputId);
        }
      },
      // 搜索地址
      searchPlace(inputId){
        let that = this;
        if(inputId==="sname") {
          if(AMap.event && that.snameAuto){
            that.snameAutoListener = AMap.event.addListener(that.snameAuto, "select", function(e){  //注册监听，当选中某条记录时会触发
              that.orderForm.slat = e.poi.location.lat;
              that.orderForm.slon = e.poi.location.lng;
              that.orderForm.sname = e.poi.name;
              that.$refs.orderForm.validateField("sname"); // 触发选择时验证字段
            });
          }
        } else if(inputId==="dname"){
          if(AMap.event && that.dnameAuto){
            that.dnameAutoListener = AMap.event.addListener(that.dnameAuto, "select", function(e){  //注册监听，当选中某条记录时会触发
              that.orderForm.dlat = e.poi.location.lat;
              that.orderForm.dlon = e.poi.location.lng;
              that.orderForm.dname = e.poi.name;
              that.$refs.orderForm.validateField("dname");// 触发选择时验证字段
            });
          }
        }
      },
      // 做删除操作时还原经纬度并验证字段
      deletePlace(inputId){
        if(inputId === "sname"){
          this.orderForm.slat = 0;
          this.orderForm.slon = 0;
          this.$refs.orderForm.validateField("sname");
        } else if(inputId === "dname"){
          this.orderForm.dlat = 0;
          this.orderForm.dlon = 0;
          this.$refs.orderForm.validateField("dname");
        }
      },
      toSubmit(){
        this.$refs.orderForm.validate((valid) => {
          if(valid){
            // submit code...
            console.info(this.orderForm);
          }
        });
      },
    },
    beforeDestroy: function () {
      // 释放内存
      if(this.snameAutoListener){
        AMap.event.removeListener(this.snameAutoListener);
      }
      if(this.dnameAutoListener){
        AMap.event.removeListener(this.dnameAutoListener);
      }
    }
  }
</script>