vue2-google-map中如何获取标记拖拽后的位置？

我之前也踩过这个坑！你用的@closeclick和v-on:change其实都不是标记拖拽后触发的正确事件，vue2-google-map的gmap-marker组件封装了Google Maps原生的dragend事件，这才是捕获拖拽结束后位置的关键。

下面是修正后的实现步骤：

• 替换事件绑定：把原来的事件换成@dragend，这个事件会在用户停止拖拽标记时触发
• 获取新坐标：在回调函数里通过事件参数的latLng属性拿到新的经纬度，再更新你的数据

修正后的代码示例 #

<gmap-map ref="mymap" :center="mapStartLocation" :zoom="17" style="width: 100%; height: 300px">
  <gmap-marker 
    @dragend="updateCoordinates" 
    :position="mapStartLocation" 
    :draggable="true"
  />
</gmap-map>

对应的方法实现：

methods: {
  updateCoordinates(event) {
    // 从事件对象中提取新坐标
    const newLat = event.latLng.lat();
    const newLng = event.latLng.lng();
    
    // 更新你的坐标数据，这里直接赋值给mapStartLocation就能让地图中心跟着标记走
    this.mapStartLocation = { lat: newLat, lng: newLng };
    
    // 也可以把坐标存到其他变量里做后续处理
    console.log("拖拽后的新坐标：", this.mapStartLocation);
  }
}

补充说明 #

• closeclick事件是用来监听标记的信息窗口关闭动作的，和拖拽完全无关；
• 这个库的文档确实不够完善，很多原生Google Maps的事件需要直接参考Google Maps官方逻辑，大部分原生事件名直接小写就能作为组件的事件名使用，比如dragend。

内容的提问来源于stack exchange，提问作者KasparTr