我是使用的vue baidu map bmmarker 在地图上根据后端给的经纬度来标点
但是我一拖拽地图或者是双击地图改变地图大小,点就跑了
该回答引用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 插件,则您需要使用插件提供的相应方法来监听事件和更新标记位置。具体方法请参考插件的文档或示例代码。