20260812:打开第二个项目地图选点,地图不能移动bug
This commit is contained in:
parent
1f197f80a1
commit
e7ea0f6f75
@ -161,7 +161,7 @@
|
|||||||
</el-dialog>
|
</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">
|
<div style="margin-bottom: 8px; display: flex">
|
||||||
<span style="white-space: nowrap; color: #606266; width: 100px; flex-shrink: 0;">按关键字搜索:</span>
|
<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" />
|
<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>
|
<el-button type="primary" style="margin-left: 8px; flex-shrink: 0" @click="locateByCoordinate">定位</el-button>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 500px; border: 1px solid #ddd; position: relative">
|
<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">
|
<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> 地址解析中...
|
<i class="el-icon-loading"></i> 地址解析中...
|
||||||
</div>
|
</div>
|
||||||
@ -217,6 +217,7 @@ export default {
|
|||||||
open: false,
|
open: false,
|
||||||
isView: false,
|
isView: false,
|
||||||
mapPickerOpen: false,
|
mapPickerOpen: false,
|
||||||
|
mapContainerKey: 0,
|
||||||
pickerLongitude: null,
|
pickerLongitude: null,
|
||||||
pickerLatitude: null,
|
pickerLatitude: null,
|
||||||
pickerAddress: '',
|
pickerAddress: '',
|
||||||
@ -422,6 +423,9 @@ export default {
|
|||||||
// ==================== 地图选点 ====================
|
// ==================== 地图选点 ====================
|
||||||
/** 打开地图选点 */
|
/** 打开地图选点 */
|
||||||
openMapPicker() {
|
openMapPicker() {
|
||||||
|
// 先清理可能残留的旧地图实例
|
||||||
|
// 对话框快速关闭再打开时 @closed 可能未触发,导致 tiandituMap 仍指向旧实例
|
||||||
|
this.resetMap();
|
||||||
this.pickerLongitude = this.form.longitude != null ? this.form.longitude : null;
|
this.pickerLongitude = this.form.longitude != null ? this.form.longitude : null;
|
||||||
this.pickerLatitude = this.form.latitude != null ? this.form.latitude : null;
|
this.pickerLatitude = this.form.latitude != null ? this.form.latitude : null;
|
||||||
this.pickerAddress = this.form.address || '';
|
this.pickerAddress = this.form.address || '';
|
||||||
@ -430,9 +434,6 @@ export default {
|
|||||||
? `${this.form.longitude},${this.form.latitude}`
|
? `${this.form.longitude},${this.form.latitude}`
|
||||||
: '';
|
: '';
|
||||||
this.mapPickerOpen = true;
|
this.mapPickerOpen = true;
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initTiandituMap();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
/** 根据经纬度定位 */
|
/** 根据经纬度定位 */
|
||||||
locateByCoordinate() {
|
locateByCoordinate() {
|
||||||
@ -517,7 +518,8 @@ export default {
|
|||||||
initTiandituMap() {
|
initTiandituMap() {
|
||||||
loadTiandituMap().then(T => {
|
loadTiandituMap().then(T => {
|
||||||
const container = this.$refs.mapContainer;
|
const container = this.$refs.mapContainer;
|
||||||
if (!container) return;
|
// 弹窗可能已在脚本加载完成前被关闭,此时不再创建地图
|
||||||
|
if (!container || !this.mapPickerOpen) return;
|
||||||
|
|
||||||
const hasCoord = this.pickerLongitude != null && this.pickerLatitude != null;
|
const hasCoord = this.pickerLongitude != null && this.pickerLatitude != null;
|
||||||
const centerLng = hasCoord ? this.pickerLongitude : 104.0;
|
const centerLng = hasCoord ? this.pickerLongitude : 104.0;
|
||||||
@ -532,9 +534,6 @@ export default {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 天地图 v4 没有 destroy(),先清理旧实例再重建
|
|
||||||
this.resetMap();
|
|
||||||
|
|
||||||
const map = new T.Map(container);
|
const map = new T.Map(container);
|
||||||
map.centerAndZoom(new T.LngLat(centerLng, centerLat), zoom);
|
map.centerAndZoom(new T.LngLat(centerLng, centerLat), zoom);
|
||||||
// 天地图 v4 默认关闭部分交互,需显式启用:拖拽、滚轮缩放、双击缩放、连续缩放
|
// 天地图 v4 默认关闭部分交互,需显式启用:拖拽、滚轮缩放、双击缩放、连续缩放
|
||||||
@ -691,6 +690,11 @@ export default {
|
|||||||
}
|
}
|
||||||
this.tiandituMap = null;
|
this.tiandituMap = null;
|
||||||
this.tiandituClickHandler = null;
|
this.tiandituClickHandler = null;
|
||||||
|
// 天地图 v4 会把拖拽/滚轮等监听直接绑定在容器 DOM 元素上(存于 element._tdt_events),
|
||||||
|
// 仅清空 innerHTML 无法移除这些监听。旧地图的 mousedown 会先执行并设置全局拖拽标记
|
||||||
|
// T.nY._dragging,导致新地图的拖拽处理器直接放弃,表现为第二次打开后无法拖动地图。
|
||||||
|
// 这里更换 key 让 Vue 重建一个全新的容器元素,旧元素连同其监听一起被移除。
|
||||||
|
this.mapContainerKey += 1;
|
||||||
}
|
}
|
||||||
const container = this.$refs.mapContainer;
|
const container = this.$refs.mapContainer;
|
||||||
if (container) {
|
if (container) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user