先看效果图
实现
首先要去百度地图官方申请ak,这个步骤略过。
- 主要代码
<div class="label">详细地址</div>
<el-form-item prop="addressDetail">
<el-autocomplete style="width: 100%" v-model="form.addressDetail" popper-class="autoAddressClass"
placeholder="请输入该详细地址" :fetch-suggestions="toSearch" :trigger-on-focus="false" clearable @select="handleSelect" @clear="clear"
>
<template v-slot="{ item }">
<i class="el-icon-search fl mgr10"></i>
<div style="overflow: hidden">
<span class="address ellipsis">{{ item.address }}{{ item.name }}</span>
</div>
</template>
</el-autocomplete>
</el-form-item>
- toSearch这个方法很重要,所有返回的地址信息都通过这里面的cb(一个地址数组)展示出来,如果需要经纬度和其他的数据信息,可以通过handleSelect这个方法来获取,baiduApiPoint这个方法主要是调用百度api,根据传入的path(城市)和form.cityName(输入框的内容)生成一个地址数组。
// 返回的搜索内容事件处理
const toSearch = (str, cb) => {
console.log(str)
baiduApiPoint(str)
cb(mapAddress.value)
}
// 选择地址触发事件
const handleSelect = (item) => {
form.addressDetail = item.city + item.area + item.address + item.name // 详细地址
form.longitude = item.location.lng // 经度
form.latitude = item.location.lat // 纬度
}
// 清除
const clear = () => {
form.addressDetail = '' // 详细地址
form.longitude = '' // 经度
form.latitude = '' // 纬度
}
const baiduApiPoint = (path) => {
// 跨域调用百度api
// 注意这里挂载在了window上
window.callbackData = (data) => {
if (data.results.length === 0) {
console.log('请选择城市再输入详细地址!')
}
mapAddress.value = data.results
}
const url = `https://api.map.baidu.com/place/v2/search?query=${path}®ion=${form.cityName}&page_size=20&output=json&ak=GwgzHwgqUGzFNZpRClR63mzn93RH0clK&callback=callbackData`
const fetchJsonp = function (url) {
const body = document.getElementsByTagName('body')[0]
// 插入一个script
const script = document.createElement('script')
script.setAttribute('src', url)
script.setAttribute('id', 'mapApi')
body.appendChild(script)
}
fetchJsonp(url)
}