阻止 Google Maps API 滚动到灰色区域答案

【问题标题】：Stop Google Maps API from scrolling to a grey area阻止 Google Maps API 滚动到灰色区域
【发布时间】：2012-08-07 21:03:00
【问题描述】：

在我正在构建的应用程序中，Google Maps API 占据了大部分（如果不是全部）屏幕。但是，在测试过程中，我发现用户可以将地图向下拖得足够远，这样地图就不再显示了，剩下的就是灰色背景。

我怎样才能阻止这种情况？我设置了一个 minZoom 但这只能解决页面加载时用户想要缩小的问题。

【问题讨论】：

标签： google-maps

【解决方案1】：

我和你有同样的问题。我解决它的一种方法是把它放在你初始化地图的地方：

            google.maps.event.trigger(map, 'resize');
            map.setZoom( map.getZoom() );

            google.maps.event.addListener(map, "idle", function(){
                google.maps.event.trigger(map, 'resize');
            });

这基本上意味着当您拖动地图并且它“稳定”时，会触发该事件来调整它的大小，因此意味着地图出于某种原因显示。

如果您想出一种非 hacky 的方式，请分享。 :)

【讨论】：

【解决方案2】：

您可以检查地图的边界并查看用户是否平移超出了预期范围，然后禁用平移并返回地图区域。

map.getBounds().getSouthWest().lat() must be > -85

map.getBounds().getNorthEast().lat() must be < 85

所以，例如：

  G.event.addListener(map, 'drag', checkLatitude);

然后

function checkLatitude(){
    var proj = map.getProjection();
    var bounds = map.getBounds();
    var sLat = map.getBounds().getSouthWest().lat();
    var nLat = map.getBounds().getNorthEast().lat();
    if (sLat < -85 || nLat > 85) {
//gray areas are visible
         alert('Gray area visible');
         map.setOptions({draggable:false});
  //return to a valid position
    }

}

-85 和 85 的极限值只是近似值。确切的值是atan(sinh(PI)) *180 / PI = 85.05112878..（在旧论坛的this post中有解释）。

【讨论】：

【解决方案3】：

此解决方案基于 Marcelo 的非常好的答案，但是一旦地图超出世界的最大或最小纬度，他的解决方案将完全禁用任何进一步的拖动（包括对地图可见区域的有效拖动）。这是一个澄清的版本，如果用户通过拖动超过了最大或最小纬度，它将把地图拉回到视图中。它仍然允许用户拖动所有可见区域。

此外，此解决方案为地图设置了最小缩放级别，可用于确保尝试缩放不会导致地图显示灰色区域。

（另见How do I limit panning in Google maps API V3?）

var lastValidCenter;
var minZoomLevel = 2;

setOutOfBoundsListener();

function setOutOfBoundsListener() {
        google.maps.event.addListener(map, 'dragend', function () {
            checkLatitude(map);
        });
        google.maps.event.addListener(map, 'idle', function () {
            checkLatitude(map);
        });
        google.maps.event.addListener(map, 'zoom_changed', function () {
            checkLatitude(map);
        });
};

function checkLatitude(map) {
    if (this.minZoomLevel) {
        if (map.getZoom() < minZoomLevel) {
            map.setZoom(parseInt(minZoomLevel));
        }
    }

    var bounds = map.getBounds();
    var sLat = map.getBounds().getSouthWest().lat();
    var nLat = map.getBounds().getNorthEast().lat();
    if (sLat < -85 || nLat > 85) {
        //the map has gone beyone the world's max or min latitude - gray areas are visible
        //return to a valid position
        if (this.lastValidCenter) {
            map.setCenter(this.lastValidCenter);
        }
    }
    else {
        this.lastValidCenter = map.getCenter();
    }
}

（我没有使用“center_changed”监听器。在平移地图时 center_changed 事件会持续触发，这可能会阻止用户平移到灰色区域，而不是“回弹”。这可以但是由于触发事件的次数，会导致 Chrome 中的 stackoverflow 错误）

【讨论】：

【解决方案4】：

新的解决方案

new google.maps.Map(document.getElementById('map'), {
restriction: {
    latLngBounds: {
        north: 85,
        south: -85,
        west: -180,
        east: 180
    }
},
});

【讨论】：

这对我有用，通过向现有地图选项添加限制选项，灰色区域消失了。
有效。谢谢。