vue baidu map bmmarker 拖拽地图或者是双击地图改变地图大小,点的位置改变

我是使用的vue baidu map bmmarker 在地图上根据后端给的经纬度来标点

img

但是我一拖拽地图或者是双击地图改变地图大小,点就跑了

img

该回答引用ChatGPT

这个问题可能是由于您使用的是 bmmarker 组件而引起的,因为该组件不会自动随着地图的缩放和平移而更新标记位置。为了解决这个问题,您需要添加一些额外的代码来监听地图的缩放和平移事件,并在事件发生时手动更新标记位置。

您可以尝试使用 BMap 对象的 zoomend 和 dragend 事件来监听地图的缩放和平移事件,并在事件发生时重新设置标记的位置。例如,您可以在 mounted 钩子函数中添加以下代码来监听这些事件:

<template>
  <div class="map-container">
    <baidu-map @ready="onMapReady">
      <bm-marker :position="markerPosition"></bm-marker>
    </baidu-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      markerPosition: [116.404, 39.915], // 标记位置
      map: null // 地图对象
    }
  },
  mounted() {
    // 监听地图的缩放和平移事件
    this.map.addEventListener('zoomend', this.onMapZoomEnd)
    this.map.addEventListener('dragend', this.onMapDragEnd)
  },
  methods: {
    onMapReady(map) {
      // 初始化地图对象
      this.map = map
    },
    onMapZoomEnd() {
      // 更新标记位置
      this.markerPosition = this.map.getCenter()
    },
    onMapDragEnd() {
      // 更新标记位置
      this.markerPosition = this.map.getCenter()
    }
  }
}
</script>


在上面的代码中,我们使用 this.map.addEventListener 方法添加了 zoomend 和 dragend 事件的监听器,并在事件发生时调用了 onMapZoomEnd 和 onMapDragEnd 方法来更新标记位置。这样,无论您如何缩放或平移地图,标记位置都会随之更新,从而始终正确显示在地图上。

请注意,上面的示例代码中使用的是 BMap 对象的方法,如果您使用的是 vue-baidu-map 插件,则您需要使用插件提供的相应方法来监听事件和更新标记位置。具体方法请参考插件的文档或示例代码。