先看效果图:
图一:
图二:
图三:
图四:
解释:
- 这里实现的功能是先选择一个行政区域,然后在该区域下去搜索地址(一开始地址搜索框默认禁止的,强制必须选择区域后才能搜索,删除已选的行政区域后,地址输入框又变回禁用状态,即只能搜索该区域下的地址。当然了,这里可以根据自己需求进行修改)。
- 我这里行政区域只需要选到市级即可(即两级联动),如果需要选到区级,可以改成三级联动选择即可,看个人需求。
- 行政区域的实现使用了一个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;
}
}
}
尾语:
- 如果细节上或某个地方不太懂也可以问我哦~基本上核心东西都讲了。
- 如果自己需求可能与这稍微有点不一样,不要紧,可以根据自己的需求进行稍加修改即可,如果实在不知道怎么改,可以在评论区讲出来,大家一起帮你解决~
- 最后,最重要的一点就是,如果觉得这篇文章对自己有帮助,欢迎点击收藏,点赞呦!