拖动基于 Laravel-VUE 的组件后获取标记的位置

Question

>我正在使用 Vue-Google-maps

到目前为止，它们工作良好，我想实现当有人搜索并选择他们的区域时会出现一个标记，然后他们可以将其拖动到所需的位置。

到目前为止，我已经设法通过编辑GoogleMap.vue文件使标记可拖动

<gmap-marker 
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:draggable="true"
@click="center=m.position"
@drag="setCurrent(this)"
></gmap-marker>

现在我可以拖动标记，但是坐标(纬度：长(不会改变。

我正在使用拉拉维尔 1.4.1 Vue 3.0.0-beta.6

请帮忙

GoogleMap.vue的其余部分看起来像这样

<script>
export default {
name: "GoogleMap",
data() {
return {
center: { lat: 24.9004057, lng: 67.1926178 },
markers: [],
places: [],
currentPlace: null,
};
},
mounted() {
this.geolocate();
},
methods: {
// receives a place object via the autocomplete component
setPlace(place) {
this.currentPlace = place;
this.addMarker();
},
addMarker() {
if (this.currentPlace) {
const marker = {
lat: this.currentPlace.geometry.location.lat(),
lng: this.currentPlace.geometry.location.lng()
};
this.markers.push({ position: marker, draggable: true });
this.places.push(this.currentPlace);
this.center = marker;
this.currentPlace = null;
}
},
geolocate: function() {
navigator.geolocation.getCurrentPosition(position => {
this.center = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
});
},
checkthis(position){
console.log(navigator.position.getCurrentPosition());
}
} 
};
</script>

Answer 1

要在拖动标记位置后获得标记位置Marker.dragend更适合，然后Marker.drag：

当用户停止拖动标记时，将触发此事件。

在 vue-google-maps 库标记位置的情况下，可以这样确定：

<gmap-marker
:draggable="true"
:key="index"
v-for="(m, index) in markers"
:position="m.position"
@click="center=m.position"
@dragend="showLocation"
></gmap-marker>

showLocation: function(evt){
console.log( evt.latLng.toString());
}

其中evt是MouseEvent对象，MouseEvent.latLng属性包含拖动标记的位置

这同样适用于@drag事件。