在我正在构建的应用程序中,Google Maps API 占据了大部分(如果不是全部)屏幕。但是,在测试过程中,我发现用户可以将地图向下拖得足够远,这样地图就不再显示了,剩下的就是灰色背景。
我怎样才能阻止这个?我已经设置了一个 minZoom 但这只能解决页面加载时用户想要缩小的问题。
在我正在构建的应用程序中,Google Maps API 占据了大部分(如果不是全部)屏幕。但是,在测试过程中,我发现用户可以将地图向下拖得足够远,这样地图就不再显示了,剩下的就是灰色背景。
我怎样才能阻止这个?我已经设置了一个 minZoom 但这只能解决页面加载时用户想要缩小的问题。
新的解决方案
new google.maps.Map(document.getElementById('map'), {
restriction: {
latLngBounds: {
north: 85,
south: -85,
west: -180,
east: 180
}
},
});
您可以检查地图的边界并查看用户是否平移超出了预期范围,然后禁用平移并返回地图区域。
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..
(在旧论坛的这篇文章中解释)。
此解决方案基于 Marcelo 的非常好的答案,但是一旦地图超出世界的最大或最小纬度,他的解决方案将完全禁用任何进一步的拖动(包括对地图可见区域的有效拖动)。这是一个明确的版本,如果用户通过拖动超过了最大或最小纬度,它将把地图拉回到视图中。它仍然允许用户拖动所有可见区域。
此外,此解决方案为地图设置了最小缩放级别,可用于确保尝试的缩放不会导致地图显示灰色区域。
(另请参阅如何限制 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 事件会连续触发,这可能会阻止用户平移到灰色区域,而不是“回弹”。这可能会导致 stackoverflow 错误但是在 Chrome 中,由于事件将被触发的次数)
我和你有同样的问题。我解决它的一种方法是把它放在你初始化地图的地方:
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
google.maps.event.addListener(map, "idle", function(){
google.maps.event.trigger(map, 'resize');
});
这基本上意味着当您拖动地图并且它“稳定”时,会触发事件来调整它的大小,因此意味着地图出于某种原因被显示。
如果您想出一种非 hacky 方式,请分享。:)