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

Question

我正在使用vue2-google-map库来显示带有标记的地图.

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

这样可以将标记放在mapStartLocation的坐标上

用户在地图上拖动标记后如何获取新坐标？

我尝试使用@closeClick和v-on:更改,但都没有注册.即使他们愿意,仍然存在如何获得新坐标值的问题.

有关如何使用此库的任何指示.文档中没有任何内容.

Answer 1

我发现@drag这是最好的解决方案.但是,事件是在用户拖动时发出的,不仅仅是在@dragend应该根据源代码工作之后,但由于某种原因不在我的情况下.

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

<script>
export default {
    data() {
        return {
            coordinates: null,
        }
    },
    methods: {
        updateCoordinates(location) {
            this.coordinates = {
                lat: location.latLng.lat(),
                lng: location.latLng.lng(),
            };
        },
    },
}
</script>

Answer 2

因此，您可以在停止拖动时添加事件

<GmapMarker
   :position="jdata.geo"
   :clickable="true"
   :draggable="true"
   @dragend="gMapFunc($event.latLng)"
 </GmapMarker>

////////////////////////

 methods: {
      //set after merker end drag
      gMapFunc(evnt) {
        this.jdata = {"geo": {"lat":evnt.lat(), "lng":evnt.lng()}};
      },