fix:修复百度地图参数和自动补全组件数据传参过时了或者不匹配的问题
This commit is contained in:
parent
149ece04df
commit
cbad034315
@ -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>
|
||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user