vue baidu map bmmarker拖拽地图点位置发生变化

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

img

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

img

该回答引用ChatGPT
如果您正在使用vue-baidu-map插件,并且遇到了在拖动标记时标记位置发生变化的问题,这可能是因为地图视图的缩放级别影响了标记的位置。

一种解决方案是在组件上添加@zoomend事件,该事件在地图缩放级别更改后触发,然后使用组件上的getPosition()方法获取标记的位置,并将其设置为组件数据的新位置,以便反映新的缩放级别。

<template>
  <div>
    <baidu-map @zoomend="handleZoomEnd">
      <bm-marker :position="markerPosition" draggable></bm-marker>
    </baidu-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      markerPosition: { lng: 116.404, lat: 39.915 },
    };
  },
  methods: {
    handleZoomEnd(e) {
      this.markerPosition = this.$refs.marker.getPosition();
    },
  },
};
</script>


在上面的示例中,组件触发@zoomend事件后,handleZoomEnd方法将调用组件的getPosition()方法来获取标记的位置,并将其设置为组件数据的新位置。这将确保标记在地图缩放级别更改后仍将其位置保存在正确的位置。