利用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;}}
}

尾语：

如果细节上或某个地方不太懂也可以问我哦~基本上核心东西都讲了。
如果自己需求可能与这稍微有点不一样，不要紧，可以根据自己的需求进行稍加修改即可，如果实在不知道怎么改，可以在评论区讲出来，大家一起帮你解决~
最后，最重要的一点就是，如果觉得这篇文章对自己有帮助，欢迎点击收藏，点赞呦！

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

基层教学组织评估系统5_系统管理员数据维护模块功能完善，优化教学组织名称的输入提示补全，项目打包部署篇
目录一.完善二.项目打包三.部署四.报错解决五.数据初始一.完善系统管理员数据维护模块功能完善优化教学组织名称的输入提示补全数据对应格式bug修复 1.系统管理员数据维护模块功能完善 ...
高德地图显示多个气泡_CarPlay分屏功能“硬核”上线高德地图用户可第一时间尝鲜...
苹果今天正式推送iOS 13.4系统更新,其中分屏功能是这次CarPlay最 "硬核" 的一项改进.此前分屏功能只有苹果自带地图可以实现,本次升级后,高德地图用户也可以第一时间享受 ...
高德地图完整功能的html,揭秘高德地图八大不为人知的强大功能
高德地图作为国内车主使用最多的手机地图,在日常扮演着为用户搜索地点.规划线路.躲避拥堵等等"出行服务小帮手"的重要角色.其实,作为国内领先的数字地图内容.导航和位置服务提供商高德的 ...
java 读取项目内图片,java web项目中读取本地图片
在项目中,因为业务需要,用户上传的图片存放在服务器的D盘中,为了读取并显示到页面上,尝试了两种方法: 一通过流读取 java代码: @RequestMapping(value = "/s ...
功能全面丰富优化高德地图上线景区导览图及身边事功能
近日,最新版高德地图迎来了功能更新,不仅在智慧景区服务中加入了景区导览图功能,还在"小区详情页"的基础上增加了新的新闻资讯入口,推出身边事功能,让你在更方便使用地图游览景区的同时, ...
Android开发中实现带有删除图标的EditText输入框
效果图如下: 备注:附带一个隐藏和显示密码的功能实现. activity_main.xml布局文件的代码如下: <?xml version="1.0" encoding=&q ...
和风天气预报AndroidAPP-安卓（包含功能：天气预报-备忘录-高德地图定位-日历）
源码以及文档下载 https://me.csdn.net/download/qq_27500493 计算机学院2014级学年论文 LZL 于 2017 年 8 月 29 日完美天气 ...
广联达登录显示服务器异常去回答,广联达提示异常1056：服务的实例已在运行中。...
用友畅捷通T+Cell插件用友T+Cell插件 [问题现象]打印,设置模板或是打开报表时提示"安装插件"或"打印插件没有正常安装或运行"等. [问题分析] 排除 ...
利用 Windows Vista 和 WCF 中强大的 P2P 通信功能 [转]
从传统意义来说,P2P 应用程序开发所面临的难题包括:需要开发用于消息交换的专用协议:必须查找并连接隐藏在"网络地址转换"(NAT) 或防火墙背后的某应用程序的实例:需要支持在广域 ...
利用 Windows Vista 和 WCF 中强大的 P2P 通信功能
从传统意义来说,P2P 应用程序开发所面临的难题包括:需要开发用于消息交换的专用协议:必须查找并连接隐藏在"网络地址转换"(NAT) 或防火墙背后的某应用程序的实例:需要支持在广域 ...

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

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

最新文章

热门文章