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：更改，但都没有注册。即使他们愿意，仍然存在如何获得新坐标值的问题。

有关如何使用此库的任何指示。 documentation中没有任何内容。

Answer 1

我发现@drag是最佳解决方案。但是，事件是在用户拖动时发出的，而不仅仅是在@dragend应该工作according to source-code之后，但出于某种原因不在我的情况下。

<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()}};
      },

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

2 个答案: