fix:修复百度地图参数和自动补全组件数据传参过时了或者不匹配的问题

This commit is contained in:
lihaoyuan 2025-12-13 17:04:57 +08:00
parent 149ece04df
commit cbad034315
2 changed files with 43 additions and 57 deletions

View File

@ -10,16 +10,17 @@ prop:
<el-autocomplete <el-autocomplete
v-model="key" v-model="key"
:fetch-suggestions="querySearchAsync" :fetch-suggestions="querySearchAsync"
placeholder="请输入内容" placeholder="请输入地址关键字"
:style="{ width: '100%' }" style="width:100%"
@change="change"
@select="getAddress" @select="getAddress"
/> />
<baidu-map> <!-- 地图只是为了让 LocalSearch 活着可以不显示 -->
<baidu-map style="height:0px">
<bm-local-search <bm-local-search
:auto-viewport="true" ref="localSearch"
:keyword="key" :keyword="key"
:location="location" :location="location || '北京'"
:auto-viewport="false"
:panel="false" :panel="false"
@searchcomplete="searchcomplete" @searchcomplete="searchcomplete"
/> />
@ -30,67 +31,50 @@ prop:
<script> <script>
export default { export default {
props: { props: {
keyword: { keyword: { type: String, default: '' },
type: String, location: { type: String, default: '' }
default: '',
},
location: {
type: String,
default: '',
},
}, },
data() { data() {
return { return {
key: '', key: '',
addressList: [], addressList: [],
loading: false, timer: null
selectAddress: {},
} }
}, },
watch: { watch: {
keyword(newVal, oldVal) { keyword(val) { this.key = val }
this.key = newVal
},
// key(newVal, oldVal) {
// this.getAddress({
// value: newVal,
// })
// },
}, },
methods: { methods: {
searchcomplete(results) { /* 百度检索完成回调:兼容各种字段名变化 */
if (results && results.as) { searchcomplete(res) {
this.addressList = results.as /* 空值保护,防止百度没返回结果时报错 */
} else { if (!res) {
this.addressList = {} this.addressList = []
} return
}, }
querySearchAsync(queryString, cb) { /* 新版 JS-API 把 POI 结果放在 suggestions 字段 */
clearTimeout(this.timeout) const arr = res && (res.Rr || res.Hr || res.Ir || res.Kr || res.As || res.suggestions || [])
this.timeout = setTimeout(() => { this.addressList = Array.isArray(arr) ? arr : []
cb(this.createStateFilter()) },
}, 500) querySearchAsync(query, cb) {
}, clearTimeout(this.timer)
createStateFilter() { if (!query) return cb([])
let addressList = this.addressList this.timer = setTimeout(() => {
if (this.addressList.length > 0) { /* 1. 把百度返回的字段统一转成 el-autocomplete 要的格式 */
return addressList.map((address) => { const list = (this.addressList || []).map(item => ({
return { value: (item.title || '') + (item.address || ''), // value
value: address.address, lat: item.point.lat,
lat: address.point.lat, lng: item.point.lng
lng: address.point.lng, }))
} /* 2. 再过滤一次空 value防止百度返回空地址导致下拉消失 */
}) const filter = list.filter(i => i.value.trim())
} else { cb(filter)
return [] }, 300)
} },
},
getAddress(item) { getAddress(item) {
this.$emit('getAddress', item) this.$emit('getAddress', item)
}, }
change(val) { }
this.$emit('change', val)
},
},
} }
</script> </script>

View File

@ -134,6 +134,7 @@
<el-input <el-input
v-model="form.chain_lng" v-model="form.chain_lng"
:placeholder="__('经度')" :placeholder="__('经度')"
readonly
style="width: 315px" style="width: 315px"
/> />
</el-form-item> </el-form-item>
@ -141,6 +142,7 @@
<el-input <el-input
v-model="form.chain_lat" v-model="form.chain_lat"
:placeholder="__('纬度')" :placeholder="__('纬度')"
readonly
style="width: 300px" style="width: 300px"
/> />
</el-form-item> </el-form-item>