Javascript 在Vuejs中使用Google Map侦听映射事件

当我尝试在vue js上应用Google地图时遇到问题。
我的问题是在绘制pin并拖动它时侦听事件。单击接点时，坐标值将显示在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>

地方
{{drawingManagerListener}}
纬度
经度
辛潘
取消
从“../../../utils/event bus”导入{EventBus}；
从“../../../components/maps/GoogleMapLoader”导入GoogleMapLoader；
从“../../../utils/mapSettings”导入{mapSettings}；
从“../../../components/maps/GoogleMapDrawingManager”导入GoogleMapDrawingManager；
导出默认值{
组成部分：{
GoogleMapDrawingManager，GoogleMapLoader
},
数据（）{
返回{
纬度：''，
经度：''，
}
},
计算：{
mapConfig（）{
返回{
…地图设置
};
},
标记选项（）{
返回{
德拉格布尔：是的
}
},
drawingManagerListener（）{
EventBus.$on（'drawingManager'，drawingManager=>{
google.maps.event.addListener（drawingManager，'markercomplete'，函数（marker）{
marker.addListener（'click'，函数（coords）{
事件总线$emit（'coords'，coords）；
});
marker.addListener（'rightclick'，函数（事件）{
marker.setMap（空）；
});
});
});
EventBus.$on（'coords'，coords=>{
this.latitude=coords.latLng.lat（）；
this.longide=coords.latLng.lng（）；
});
},
}
}

上面的代码能够运行，只是当拖动pin时，文本框中的值不会自动更改。我希望你理解我的意思，并能解决我的问题。

---

谢谢

我忘了在标记中添加“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();
            });
        },

---

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

添加正确的侦听器怎么样？？您为单击和右键单击添加了侦听器。我看不到拖放或拖放结束或其他任何侦听器。@MrUpsidown问题解决后，我忘记向标记事件侦听器添加“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();
            });
        },