google-maps - 缩放更改后获取谷歌地图 v3 的边界

Question

我试图在缩放更改后获取地图的边界，但是在重新计算边界之前会触发 zoom_changed 事件。因此，在 zoom_changed 处理程序中，您将获得先前的界限，而不是新的界限。

有没有办法获得缩放变化的正确界限？

Answer 1

这是一个错误，如果您有兴趣，请在此问题上加注星标。

有一个丑陋的解决方法：

google.maps.event.addListener(map, 'zoom_changed', function () {
    google.maps.event.addListenerOnce(map, 'bounds_changed', function (e) {
            my_zoom_handler(); // do your job here
    });
});

Answer 2

从API 文档：

如果您尝试检测视口中的更改，请务必使用特定的 bounds_changed 事件而不是组成 zoom_changed 和 center_changed 事件。由于 Maps API 会独立触发后面的这些事件，因此 get_bounds() 可能不会在视口权威更改之前报告有用的结果。如果您希望在此类事件之后获取 get_bounds()，请务必改为收听 bounds_changed 事件。

Answer 3

要绑定 bounds_changed 并在缩放后使用标记/地图内容，请使用以下命令：

google.maps.event.addListener(map, 'zoom_changed', function() {
    this.zoomChanged = true;
});

google.maps.event.addListener(map,"bounds_changed",function() {
    if (this.zoomChanged) {
        this.zoomChanged = false;
        // DO YOUR STUFF
    }
});

Answer 4

我有同样的问题。这是我最终解决的几个问题，我在其他解决方案中遇到的问题。

*无论您使用鼠标还是箭头键，都正确地执行边界

*如果按住箭头键，不会在边缘附近停止，因为平移加速度会导致它在一步中“超过”边缘，所以它会停止（尝试在一个方向上按住箭头键，直到你击中边缘，然后松开并再次按下它，通过一些解决方案，它会滚动一点）

*当它碰到边缘时不会“反弹”

*正确执行缩放更改的界限

编辑：好的，所以当您使用滚轮更改缩放时它可以工作，但不能使用缩放控件。让我玩一下，我会看看我是否也可以让它工作......

编辑 2：原来，问题是因为我删除了平移控件。只要存在平移控件，就可以正常使用滚轮和缩放控件。

编辑3：不......不是这样。我已经更新了处理缩放控制的代码。

// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
                    new google.maps.LatLng(-64, -64), 
                    new google.maps.LatLng(64, 64)
                    );

var zoomChanged = false;

google.maps.event.addListener(map, 'center_changed', function() {
  var mapBounds = map.getBounds();

  if(mapBounds.getNorthEast().lat() > allowedBounds.getNorthEast().lat()) {
    var newCenter = new google.maps.LatLng(map.getCenter().lat() -
                                           (mapBounds.getNorthEast().lat() -
                                           allowedBounds.getNorthEast().lat()),
                                           map.getCenter().lng(), true);
    map.panTo(newCenter);
    return;
  }

  if(mapBounds.getNorthEast().lng() > allowedBounds.getNorthEast().lng()) {
    var newCenter = new google.maps.LatLng(map.getCenter().lat(),
                                           map.getCenter().lng() -
                                           (mapBounds.getNorthEast().lng() -
                                           allowedBounds.getNorthEast().lng()), true);
    map.panTo(newCenter);
    return;
  }

  if(mapBounds.getSouthWest().lat() < allowedBounds.getSouthWest().lat()) {
    var newCenter = new google.maps.LatLng(map.getCenter().lat() +
                                           (allowedBounds.getSouthWest().lat() -
                                           mapBounds.getSouthWest().lat()),
                                           map.getCenter().lng(), true);
    map.panTo(newCenter);
    return;
  }

  if(mapBounds.getSouthWest().lng() < allowedBounds.getSouthWest().lng()) {
    var newCenter = new google.maps.LatLng(map.getCenter().lat(),
                                           map.getCenter().lng() +
                                           (allowedBounds.getSouthWest().lng() -
                                           mapBounds.getSouthWest().lng()), true);
    map.panTo(newCenter);
    return;
  }
}, this);

google.maps.event.addListener(map, 'zoom_changed', function() {
  zoomChanged = true;
}, this);

google.maps.event.addListener(map, 'bounds_changed', function() {
  if(zoomChanged) {   
    var mapBounds = map.getBounds();

    if(mapBounds.getNorthEast().lat() > allowedBounds.getNorthEast().lat()) {
      var newCenter = new google.maps.LatLng(map.getCenter().lat() -
                                             (mapBounds.getNorthEast().lat() -
                                             allowedBounds.getNorthEast().lat()),
                                             map.getCenter().lng(), true);
      map.panTo(newCenter);
      return;
    }

    if(mapBounds.getNorthEast().lng() > allowedBounds.getNorthEast().lng()) {
      var newCenter = new google.maps.LatLng(map.getCenter().lat(),
                                             map.getCenter().lng() -
                                             (mapBounds.getNorthEast().lng() -
                                             allowedBounds.getNorthEast().lng()), true);
      map.panTo(newCenter);
      return;
    }

    if(mapBounds.getSouthWest().lat() < allowedBounds.getSouthWest().lat()) {
      var newCenter = new google.maps.LatLng(map.getCenter().lat() +
                                             (allowedBounds.getSouthWest().lat() -
                                             mapBounds.getSouthWest().lat()),
                                             map.getCenter().lng(), true);
      map.panTo(newCenter);
      return;
    }

    if(mapBounds.getSouthWest().lng() < allowedBounds.getSouthWest().lng()) {
      var newCenter = new google.maps.LatLng(map.getCenter().lat(),
                                             map.getCenter().lng() +
                                             (allowedBounds.getSouthWest().lng() -
                                             mapBounds.getSouthWest().lng()), true);
      map.panTo(newCenter);
      return;
    }

    zoomChanged = false;
  }
}, this);