Question

如何使用侦听器捕获Google地图事件

我希望能够将bounds_changes事件与listner一起使用。但是，在Vue.js中，我无法让它工作;即使事件发生，它也无法捕获事件。所以，我想使用addListener添加自定义事件列表器，但我不知道从哪里开始。

任何建议或建议都将不胜感激。提前谢谢。

以下是我的代码：

const mapElement = document.getElementById('map');
const mapOptions  = {
    center: {
        lat: 37.5005794,
        lng: 126.9837758
    },
    zoomControl : false,
    zoom: 10,
    disableDefaultUI: true
};

const map = google.maps.Map(mapElement, mapOptions);

google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    var bounds = map.getBounds(),
        northEast = {
            'lat' : bounds.getNorthEast().lat(),
            'lng' : bounds.getNorthEast().lng()
        },
        southWest = {
            'lat' : bounds.getSouthWest().lat(),
            'lng' : bounds.getSouthWest().lng()
        };

    console.log(northEast)
});

Answer 1

你可以在这样的场景中使用global event bus

const EventBus = new Vue();

google.maps.event.addListenerOnce(map, "bounds_changed", function() {
  //   ...
  EventBus.$emit("bounds_changed", {
    bounds,
    northEast,
    southWest
  });
});

new Vue({
  el: "#app",
  created() {
    EventBus.$on("bounds_changed", ({ bounds, northEast, southWest }) => {
      // put your operation in vue here
    });
  }
});

如何在vue.js中使用监听器捕获Google Map事件

1 个答案: