fix bug
This commit is contained in:
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
title="地图选择地址"
|
||||
width="920px"
|
||||
append-to-body
|
||||
@opened="initMap"
|
||||
>
|
||||
<div class="address-map-picker__toolbar">
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
clearable
|
||||
placeholder="输入地址关键词"
|
||||
@keyup.enter="searchKeyword"
|
||||
/>
|
||||
<el-button type="primary" :loading="searching" @click="searchKeyword">搜索</el-button>
|
||||
</div>
|
||||
<div ref="map" class="address-map-picker__map"></div>
|
||||
<div class="address-map-picker__info">{{ status }}</div>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" :disabled="!selected.longitude || resolving" @click="confirm">
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const AMAP_KEY = '653b7cf105ad7fb8ec9b2f5198ade315';
|
||||
const AMAP_SECURITY_CODE = '5aab65c632e48ebae0d0e28f5b28e21a';
|
||||
let amapLoader;
|
||||
|
||||
export default {
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
address: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
emits: ['update:modelValue', 'confirm'],
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
keyword: '',
|
||||
status: '可搜索地址或点击地图选点',
|
||||
searching: false,
|
||||
resolving: false,
|
||||
selected: {},
|
||||
amap: null,
|
||||
marker: null,
|
||||
geocoder: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
modelValue: {
|
||||
immediate: true,
|
||||
handler(value) {
|
||||
this.visible = value;
|
||||
if (value) {
|
||||
this.keyword = this.address || '';
|
||||
this.selected = {};
|
||||
this.status = '可搜索地址或点击地图选点';
|
||||
}
|
||||
},
|
||||
},
|
||||
visible(value) {
|
||||
this.$emit('update:modelValue', value);
|
||||
},
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.amap) {
|
||||
this.amap.destroy();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadAmap() {
|
||||
if (window.AMap && window.AMap.Map) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
if (!amapLoader) {
|
||||
amapLoader = new Promise((resolve, reject) => {
|
||||
window._AMapSecurityConfig = { securityJsCode: AMAP_SECURITY_CODE };
|
||||
const script = document.createElement('script');
|
||||
script.src = `https://webapi.amap.com/maps?v=2.0&key=${AMAP_KEY}`;
|
||||
script.async = true;
|
||||
script.onload = resolve;
|
||||
script.onerror = () => reject(new Error('高德地图组件加载失败'));
|
||||
document.body.appendChild(script);
|
||||
});
|
||||
}
|
||||
return amapLoader;
|
||||
},
|
||||
initMap() {
|
||||
this.loadAmap()
|
||||
.then(() => {
|
||||
this.$nextTick(() => {
|
||||
if (!this.amap) {
|
||||
this.amap = new window.AMap.Map(this.$refs.map, {
|
||||
center: [116.40769, 39.89945],
|
||||
zoom: 11,
|
||||
});
|
||||
this.amap.on('click', event => this.pickPoint(event.lnglat));
|
||||
} else {
|
||||
this.amap.resize();
|
||||
this.clearMarker();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error('高德地图组件加载失败，请稍后重试');
|
||||
this.visible = false;
|
||||
});
|
||||
},
|
||||
ensureGeocoder() {
|
||||
if (this.geocoder) return Promise.resolve(this.geocoder);
|
||||
return new Promise((resolve, reject) => {
|
||||
window.AMap.plugin(['AMap.Geocoder'], () => {
|
||||
try {
|
||||
this.geocoder = new window.AMap.Geocoder();
|
||||
resolve(this.geocoder);
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
runGeocode(action, input) {
|
||||
return this.ensureGeocoder().then(
|
||||
geocoder =>
|
||||
new Promise((resolve, reject) => {
|
||||
const done = (status, result) => {
|
||||
if (status === 'complete' && result) {
|
||||
resolve(result);
|
||||
} else {
|
||||
reject(new Error('高德地图请求失败'));
|
||||
}
|
||||
};
|
||||
if (action === 'location') {
|
||||
geocoder.getLocation(input, done);
|
||||
} else {
|
||||
geocoder.getAddress(input, done);
|
||||
}
|
||||
})
|
||||
);
|
||||
},
|
||||
searchKeyword() {
|
||||
const keyword = String(this.keyword || '').trim();
|
||||
if (!keyword) {
|
||||
this.$message.warning('请输入地址关键词');
|
||||
return;
|
||||
}
|
||||
this.searching = true;
|
||||
this.loadAmap()
|
||||
.then(() => this.runGeocode('location', keyword))
|
||||
.then(result => {
|
||||
const point = result.geocodes?.[0]?.location || result.location;
|
||||
if (!point) {
|
||||
throw new Error('未找到匹配地址');
|
||||
}
|
||||
this.pickPoint(point, keyword);
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = '未找到匹配地址';
|
||||
this.$message.warning('地图搜索无匹配地址');
|
||||
})
|
||||
.finally(() => {
|
||||
this.searching = false;
|
||||
});
|
||||
},
|
||||
pickPoint(point, fallbackAddress = '') {
|
||||
const longitude = typeof point.getLng === 'function' ? point.getLng() : point.lng;
|
||||
const latitude = typeof point.getLat === 'function' ? point.getLat() : point.lat;
|
||||
if (!Number.isFinite(Number(longitude)) || !Number.isFinite(Number(latitude))) {
|
||||
this.$message.warning('选点坐标无效');
|
||||
return;
|
||||
}
|
||||
const lnglat = new window.AMap.LngLat(Number(longitude), Number(latitude));
|
||||
this.renderMarker(lnglat);
|
||||
this.selected = { longitude: Number(longitude), latitude: Number(latitude), address: fallbackAddress };
|
||||
this.status = '正在解析地址...';
|
||||
this.resolving = true;
|
||||
this.runGeocode('address', lnglat)
|
||||
.then(result => {
|
||||
const detailAddress = result.regeocode?.formattedAddress || fallbackAddress;
|
||||
this.selected = { ...this.selected, address: detailAddress };
|
||||
this.keyword = detailAddress || this.keyword;
|
||||
this.status = detailAddress || '已选点，可确认回填';
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = '地址解析失败，请重新选点';
|
||||
this.$message.error('地址解析失败，请重新选点');
|
||||
this.selected = {};
|
||||
this.clearMarker();
|
||||
})
|
||||
.finally(() => {
|
||||
this.resolving = false;
|
||||
});
|
||||
},
|
||||
renderMarker(point) {
|
||||
this.clearMarker();
|
||||
this.marker = new window.AMap.Marker({ position: point });
|
||||
this.marker.setMap(this.amap);
|
||||
this.amap.setCenter(point);
|
||||
},
|
||||
clearMarker() {
|
||||
if (this.marker) {
|
||||
this.marker.setMap(null);
|
||||
this.marker = null;
|
||||
}
|
||||
},
|
||||
confirm() {
|
||||
if (!this.selected.address) {
|
||||
this.$message.warning('请等待地址解析完成后再确认');
|
||||
return;
|
||||
}
|
||||
this.$emit('confirm', this.selected.address);
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.address-map-picker {
|
||||
&__toolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.el-input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__map {
|
||||
width: 100%;
|
||||
height: 420px;
|
||||
border: 1px solid #eff1f7;
|
||||
}
|
||||
|
||||
&__info {
|
||||
margin-top: 10px;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user