利用elementUI中的带有建议列表功能的输入框和高德地图中的输入提示与POI搜索服务实现在已选择行政区域内限制搜索地址（项目中实用性高！！！）

本文链接：https://blog.csdn.net/DLGDark/article/details/111881767

先看效果图：

图一：
first

图二：
second

图三：
three

图四：
在这里插入图片描述

解释：

这里实现的功能是先选择一个行政区域，然后在该区域下去搜索地址（一开始地址搜索框默认禁止的，强制必须选择区域后才能搜索，删除已选的行政区域后，地址输入框又变回禁用状态，即只能搜索该区域下的地址。当然了，这里可以根据自己需求进行修改）。
我这里行政区域只需要选到市级即可（即两级联动），如果需要选到区级，可以改成三级联动选择即可，看个人需求。
行政区域的实现使用了一个npm功能包【element-china-area-data】，简单方便，可自定义选择显示效果（依赖包npm详情地址：element-china-area-data）。
地址输入框使用了elementUI中输入框功能中的【带输入建议】，【自定义模板】，【远程搜索】这三个，搜索数据是使用高德地图中的输入提示插件【AMap.AutoComplete】，综合结合这些东西选择需要用到的实现的上图效果。
最后就是在项目中使用前需要准备的，安装依赖包：npm install element-china-area-data -S，npm i @amap/amap-jsapi-loader --save 注册高德开发者账号，在头像下拉框里选择【应用管理】，创建新的应用，生成新的key，在项目中要能正常使用高德插件，必须有key，到这里，该准备的基本准备完了。

核心代码：

导入：

//使用官网提供的 JSAPI Loader 进行加载
//需要安装依赖：npm i @amap/amap-jsapi-loader --save
import AMapLoader from "@amap/amap-jsapi-loader";	
import { provinceAndCityData, CodeToText } from "element-china-area-data";

部分核心数据data：

areaOptions: provinceAndCityData,
map: null,
storeForm：{
	...
	area:[],	//北京市-市辖区 => area:["110000","110100"]
	address:"",
	...
}

html代码：

<el-form-item label="行政区域" prop="area" style="width:260px;">
  <el-cascader
    :options="areaOptions"
    v-model="storeForm.area"
    @change="handleChange"
    clearable
  ></el-cascader>
</el-form-item>
<el-form-item label="地址" prop="address" style="width: 552px;">
  <el-autocomplete
    :disabled="isChose"
    popper-class="my-autocomplete"
    placeholder="请输入详细地址"
    v-model="storeForm.address"
    :fetch-suggestions="querySearchAsync"
    :trigger-on-focus="false"
    @select="handleSelect"
  >
    <template slot-scope="{ item }">
      <div class="name">{{ item.value }}</div>
      <span
        class="addr"
      >{{ item.district }}{{ item.address.length>0?item.address:'' }}</span>
    </template>
  </el-autocomplete>
</el-form-item>

js代码：

mounted() {
  this.map = AMapLoader.load({
    key: "放你高德上刚才创建新的应用生成的key", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.AutoComplete"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  });
},

querySearchAsync(val, cb) {
  this.map
    .then((AMap) => {
      // 实例化AutoComplete
      let options = {
        citylimit: true, // 强制在限定城市内搜索
        city: this.storeForm.area[1], // 限制城市
      };
      let autoComplete = new AMap.AutoComplete(options);
      // 根据关键字进行搜索
      autoComplete.search(val, function (status, result) {
        // 搜索成功时，result即是对应的匹配数据
        let resAddress = [];
        if (status == "complete") {
          resAddress = result.tips;
        }
        // 将要选择后显示的值字段名设置为value，其他字段名会选择后不回显名称
        for (const item of resAddress) {
          item.value = item.name;
        }
        cb(resAddress);
      });
    })
    .catch((e) => {
      console.log(e);
    });
},

部分主要核心css代码：

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}