在Vuejs中使用谷歌地图收听地图事件

Question

当我尝试在vue js上应用谷歌地图时遇到了一个问题
我的问题是在绘制接点并拖动接点时收听事件。单击接点时，坐标值将显示在LatLng文本框中，然后移动接点后，文本框中的值将自动更改，而无需首先单击。

这是我的程序的一个片段

<template>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">Location</div>
<div class="card-body">
<google-map-loader :map-config="mapConfig" :map-center="'Bali'">
<template slot-scope="{google, map}">
<google-map-drawing-manager
:google="google"
:map="map"
:drawing-modes="['marker']"
:marker-options="markerOptions"
:control="true">
{{drawingManagerListener}}
</google-map-drawing-manager>
</template>
</google-map-loader>
<div class="form-group row">
<label class="col-sm-3">Latitude</label>
<div class="col-sm-9">
<input type="text" v-model="latitude" class="form-control">
<div class="invalid-feedback"></div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3">Longitude</label>
<div class="col-sm-9">
<input type="text" v-model="longitude" class="form-control">
<div class="invalid-feedback"></div>
</div>
</div>
</div>
<div class="card-footer">
<a class="btn btn-outline-success"><font-awesome-icon :icon="['fas', 'save']" /> Simpan</a>
<a class="btn btn-outline-danger"><font-awesome-icon :icon="['fas', 'times-circle']" /> Cancel</a>
</div>
</div>
</div>
</div>
</template>
<script>
import {EventBus} from "../../../utils/event-bus";
import GoogleMapLoader from "../../../components/maps/GoogleMapLoader";
import { mapSettings } from "../../../utils/mapSettings";
import GoogleMapDrawingManager from "../../../components/maps/GoogleMapDrawingManager";
export default {
components: {
GoogleMapDrawingManager, GoogleMapLoader
},
data() {
return {
latitude: '',
longitude: '',
}
},
computed: {
mapConfig() {
return {
...mapSettings
};
},
markerOptions(){
return {
draggable: true
}
},
drawingManagerListener() {
EventBus.$on('drawingManager',drawingManager => {
google.maps.event.addListener(drawingManager, 'markercomplete', function (marker) {
marker.addListener('click', function (coords) {
EventBus.$emit('coords', coords);
});
marker.addListener('rightclick', function (event) {
marker.setMap(null);
});
});
});
EventBus.$on('coords', coords => {
this.latitude = coords.latLng.lat();
this.longitude = coords.latLng.lng();
});
},
}
}
</script>
<style scoped>
</style>

上面的代码是可以运行的，只是拖动一个pin时的障碍物，文本框中的值不会自动改变。我希望你能理解我的意思，并能解决我的问题

谢谢

Answer 1

我忘记将"dragend"事件侦听器添加到标记中。

drawingManagerListener() {
EventBus.$on('drawingManager',drawingManager => {
google.maps.event.addListener(drawingManager, 'markercomplete', function (marker) {
marker.addListener('click', function (coords) {
EventBus.$emit('coords', coords);
});
marker.addListener('dragend', function (event) {
EventBus.$emit('coords', coords);
});
marker.addListener('rightclick', function (event) {
marker.setMap(null);
});
});
});
EventBus.$on('coords', coords => {
this.latitude = coords.latLng.lat();
this.longitude = coords.latLng.lng();
});
},

因此，使用该代码，我可以在单击并拖动标记时处理事件。