停止Google Maps API滚动到灰色区域

Question

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

我怎么能阻止这个？我设置了一个minZoom,但这只解决了加载页面和用户想要缩小的问题.

Answer 1

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

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..(在旧论坛的这篇文章中解释).

Answer 2

新解决方案

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

Answer 3

我和你有同样的问题。我解决这个问题的一种方法是将其放在初始化地图的位置：

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

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

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

如果您找到了一种非黑客方式，请分享。:)