vue2 高德地图 拖动编辑框后地图也会随之被拖动怎么解决这个问题

在 Vue2 中使用高德地图并允许用户通过拖动编辑框改变地图位置，通常会遇到地图跟随编辑框移动的问题。这是因为地图容器默认的行为是跟随鼠标。为了阻止这种行为并保持地图固定不动，你可以按照以下步骤操作：

1. **阻止事件冒泡**：在地图容器上添加 `draggable` 属性，并将其设置为 `false` 或者手动禁用事件监听。

<div :draggable="false" ref="mapContainer">
  <!-- 地图组件 -->
</div>

2. **处理鼠标移动**：创建一个自定义事件处理器，在用户尝试拖拽地图时阻止地图的自动滚动。你可以使用 JavaScript 监听地图容器的 `mousedown` 和 `mousemove` 事件，然后在回调函数中检查是否应该让地图响应鼠标动作。

export default {
  methods: {
    handleMapDragStart(e) {
      this.mapDragging = true;
      e.preventDefault();
    },
    handleMapDragMove(e) {
      if (this.mapDragging) {
        // 更新地图的位置，这里假设 map 是高德地图实例
        this.map.setCenter(e.clientY, e.clientX);
      }
    },
    handleMapDragEnd() {
      this.mapDragging = false;
    },
  },
  mounted() {
    this.$refs.mapContainer.addEventListener('mousedown', this.handleMapDragStart);
    document.addEventListener('mousemove', this.handleMapDragMove);
    document.addEventListener('mouseup', this.handleMapDragEnd);
  },
  beforeDestroy() {
    this.$refs.mapContainer.removeEventListener('mousedown', this.handleMapDragStart);
    document.removeEventListener('mousemove', this.handleMapDragMove);
    document.removeEventListener('mouseup', this.handleMapDragEnd);
  },
}

通过这种方式，当用户拖动编辑框时，地图不会随其移动，而是在地图容器内保持静止。