谷歌地图 panTo 与 addListener 冲突

Question

I have a function that recenters the map around the marker when clicked.

google.maps.event.addListener(marker, 'click', function() {
  map.panTo(marker.getPosition());
});

However, this obviously affects the addListener I have when getting the markers:

google.maps.event.addListener(map, 'idle', function() {
  $.get("/map.json", function(galleries) {
    var bounds = map.getBounds();
    for (var i = 0; i < galleries.length; i++) {
      var latitude = galleries[i].latitude;
      var longitude = galleries[i].longitude;
      var position = new google.maps.LatLng(latitude, longitude)
      if (bounds.contains(position)){
        bindInfobox(map, galleries[i]);
      }
    }
});

Is there a way to make an exception to the addListener, or another easy way around this? Thanks!

Answer 1

A quick workaround can be remove the event listener before you pan your map and then add the event listener again once the map has finished panning.

// add map idle event at load time 
google.maps.event.addListener(map, 'idle', mapIdle);


//remove map idle event and then re-attach the event 
google.maps.event.addListener(marker, 'click', function () {
    google.maps.event.clearListeners(map, 'idle');
    google.maps.event.addListenerOnce(map, 'idle', function () {
        //add the idle event once the map has finised panning
        google.maps.event.addListener(map, 'idle', mapIdle);
    });

    map.panTo(marker.getPosition());       
});

function mapIdle() {
    $.get("/map.json", function (galleries) {
        var bounds = map.getBounds();
        for (var i = 0; i < galleries.length; i++) {
            var latitude = galleries[i].latitude;
            var longitude = galleries[i].longitude;
            var position = new google.maps.LatLng(latitude, longitude)
            if (bounds.contains(position)) {
                bindInfobox(map, galleries[i]);
            }
        }
    });
}