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

编程入门行业动态更新时间:2024-10-16 08:32:01

利用elementUI中的带有建议列表功能的输入框和高德地图中的输入提示与POI搜索服务实现在已选择行政<a href=https://www.elefans.com/category/jswz/34/1685647.html style= 区域内限制搜索地址（项目中实用性高！！！）"/>

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

先看效果图：

图一：

图二：

图三：

图四：

解释：

这里实现的功能是先选择一个行政区域，然后在该区域下去搜索地址（一开始地址搜索框默认禁止的，强制必须选择区域后才能搜索，删除已选的行政区域后，地址输入框又变回禁用状态，即只能搜索该区域下的地址。当然了，这里可以根据自己需求进行修改）。
我这里行政区域只需要选到市级即可（即两级联动），如果需要选到区级，可以改成三级联动选择即可，看个人需求。
行政区域的实现使用了一个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><spanclass="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.15plugins: ["AMap.AutoComplete"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等});
},querySearchAsync(val, cb) {this.map.then((AMap) => {// 实例化AutoCompletelet 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;}}
}

尾语：