Question

我希望能够在视口大小更改时根据我的LatLngBounds使地图居中并缩放，但在用户拖动或缩放时则不能。我正在使用"bounds_changed"事件和fitBounds()使其保持居中并正确缩放视口更改，但是当拖动或缩放地图时，边界也会发生变化，因此fitBounds()是基本上也阻止了这些行为。

function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(49.8994, -97.1392),
    zoom:1,
        draggable: true,
        zoomControl: true,
        scrollwheel: false,
        disableDoubleClickZoom: false,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(49.803060, -97.229094),
    new google.maps.LatLng(49.963223, -97.054686)
  );
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

  google.maps.event.addListener(map, 'bounds_changed', function() {
    map.fitBounds(bounds);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

根据docs，我应该能够访问事件属性，所以我想我会检查一些能够指示具体触发＆＃34; bounds_changed＆＃34;事件，但事件在控制台中显示为未定义。

google.maps.event.addListener(map, 'bounds_changed', function(event) {
  console.log(event)
});

我可以访问简单的属性＆＃34;点击＆＃34;事件但不是＆＃34; bounds_changed＆＃34;，所以我不确定是否甚至应该是＆＃34; bounds_changed＆＃34;的属性，或者是否有完全不同的方法来完成我和＃39;我试图这样做。

Answer 1

var drag = false;
var zoom = false;
google.maps.event.addListener(map, 'bounds_changed', function() {
    if (!drag && !zoom) {
        map.fitBounds(bounds);
    }
    zoom = false;
});
google.maps.event.addListener(map, 'dragstart', function() {
    drag = true;
});
google.maps.event.addListener(map, 'dragend', function() {
    drag = false;
});
google.maps.event.addListener(map, 'zoom_changed', function() {
    zoom = true;
});

确定触发＆＃34; bounds_changed＆＃34;的特定用户操作。事件

1 个答案: