20260812:打开第二个项目地图选点,地图不能移动bug

This commit is contained in:
zhugongping 2026-08-12 16:27:30 +08:00
parent 1f197f80a1
commit e7ea0f6f75

View File

@ -161,7 +161,7 @@
</el-dialog>
<!-- 地图坐标选择对话框 -->
<el-dialog title="地图选点" :visible.sync="mapPickerOpen" width="900px" append-to-body @closed="disposeMap">
<el-dialog title="地图选点" :visible.sync="mapPickerOpen" width="900px" append-to-body @closed="disposeMap" @opened="initTiandituMap">
<div style="margin-bottom: 8px; display: flex">
<span style="white-space: nowrap; color: #606266; width: 100px; flex-shrink: 0;">按关键字搜索:</span>
<el-input v-model="pickerSearchAddress" placeholder="输入中文地址,如:北京市海淀区莲花池西路28号" clearable :disabled="geocoding" @keyup.enter.native="searchAddress" style="flex: 1" />
@ -173,7 +173,7 @@
<el-button type="primary" style="margin-left: 8px; flex-shrink: 0" @click="locateByCoordinate">定位</el-button>
</div>
<div style="height: 500px; border: 1px solid #ddd; position: relative">
<div ref="mapContainer" style="width: 100%; height: 100%"></div>
<div ref="mapContainer" :key="mapContainerKey" style="width: 100%; height: 100%"></div>
<div v-if="geocoding" style="position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,0.9); padding: 4px 10px; border-radius: 3px; font-size: 12px; z-index: 999">
<i class="el-icon-loading"></i> 地址解析中...
</div>
@ -217,6 +217,7 @@ export default {
open: false,
isView: false,
mapPickerOpen: false,
mapContainerKey: 0,
pickerLongitude: null,
pickerLatitude: null,
pickerAddress: '',
@ -422,6 +423,9 @@ export default {
// ==================== 地图选点 ====================
/** 打开地图选点 */
openMapPicker() {
// 先清理可能残留的旧地图实例
// 对话框快速关闭再打开时 @closed 可能未触发,导致 tiandituMap 仍指向旧实例
this.resetMap();
this.pickerLongitude = this.form.longitude != null ? this.form.longitude : null;
this.pickerLatitude = this.form.latitude != null ? this.form.latitude : null;
this.pickerAddress = this.form.address || '';
@ -430,9 +434,6 @@ export default {
? `${this.form.longitude},${this.form.latitude}`
: '';
this.mapPickerOpen = true;
this.$nextTick(() => {
this.initTiandituMap();
});
},
/** 根据经纬度定位 */
locateByCoordinate() {
@ -517,7 +518,8 @@ export default {
initTiandituMap() {
loadTiandituMap().then(T => {
const container = this.$refs.mapContainer;
if (!container) return;
// 弹窗可能已在脚本加载完成前被关闭,此时不再创建地图
if (!container || !this.mapPickerOpen) return;
const hasCoord = this.pickerLongitude != null && this.pickerLatitude != null;
const centerLng = hasCoord ? this.pickerLongitude : 104.0;
@ -532,9 +534,6 @@ export default {
return;
}
// 天地图 v4 没有 destroy(),先清理旧实例再重建
this.resetMap();
const map = new T.Map(container);
map.centerAndZoom(new T.LngLat(centerLng, centerLat), zoom);
// 天地图 v4 默认关闭部分交互,需显式启用:拖拽、滚轮缩放、双击缩放、连续缩放
@ -691,6 +690,11 @@ export default {
}
this.tiandituMap = null;
this.tiandituClickHandler = null;
// 天地图 v4 会把拖拽/滚轮等监听直接绑定在容器 DOM 元素上(存于 element._tdt_events),
// 仅清空 innerHTML 无法移除这些监听。旧地图的 mousedown 会先执行并设置全局拖拽标记
// T.nY._dragging,导致新地图的拖拽处理器直接放弃,表现为第二次打开后无法拖动地图。
// 这里更换 key 让 Vue 重建一个全新的容器元素,旧元素连同其监听一起被移除。
this.mapContainerKey += 1;
}
const container = this.$refs.mapContainer;
if (container) {