javascript - Google map V3 - 如何计算给定范围的缩放级别

Question

我正在寻找一种使用 Google Maps V3 API 计算给定边界的缩放级别的方法，类似于 V2 API 中的 getBoundsZoomLevel()。

这是我想做的:

// These are exact bounds previously captured from the map object
var sw = new google.maps.LatLng(42.763479, -84.338918);
var ne = new google.maps.LatLng(42.679488, -84.524313);
var bounds = new google.maps.LatLngBounds(sw, ne);
var zoom = // do some magic to calculate the zoom level

// Set the map to these exact bounds
map.setCenter(bounds.getCenter());
map.setZoom(zoom);

// NOTE: fitBounds() will not work

不幸的是，我无法将 fitBounds() 方法用于我的特定用例。它适用于在 map 上拟合标记，但不适用于设置精确边界。以下是我无法使用 fitBounds() 方法的示例。

map.fitBounds(map.getBounds()); // not what you expect

Answer 1

感谢 Giles Gardam 的回答，但它仅涉及经度而不涉及纬度。一个完整的解决方案应该计算纬度所需的缩放级别和经度所需的缩放级别，然后取两者中较小的(更远的)。

这是一个同时使用纬度和经度的函数:

function getBoundsZoomLevel(bounds, mapDim) {
    var WORLD_DIM = { height: 256, width: 256 };
    var ZOOM_MAX = 21;

    function latRad(lat) {
        var sin = Math.sin(lat * Math.PI / 180);
        var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
        return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
    }

    function zoom(mapPx, worldPx, fraction) {
        return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2);
    }

    var ne = bounds.getNorthEast();
    var sw = bounds.getSouthWest();

    var latFraction = (latRad(ne.lat()) - latRad(sw.lat())) / Math.PI;

    var lngDiff = ne.lng() - sw.lng();
    var lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;

    var latZoom = zoom(mapDim.height, WORLD_DIM.height, latFraction);
    var lngZoom = zoom(mapDim.width, WORLD_DIM.width, lngFraction);

    return Math.min(latZoom, lngZoom, ZOOM_MAX);
}

Demo on jsfiddle

参数:

“bounds”参数值应该是 google.maps.LatLngBounds 对象。

“mapDim”参数值应该是一个具有“height”和“width”属性的对象，表示显示 map 的 DOM 元素的高度和宽度。如果您想确保填充，您可能需要减小这些值。也就是说，您可能不希望边界内的 map 标记太靠近 map 边缘。

如果您使用的是 jQuery 库，则可以按如下方式获取 mapDim 值:

var $mapDiv = $('#mapElementId');
var mapDim = { height: $mapDiv.height(), width: $mapDiv.width() };

如果使用Prototype库，mapDim值可以通过如下方式获取:

var mapDim = $('mapElementId').getDimensions();

返回值:

返回值是仍将显示整个边界的最大缩放级别。该值将介于 0 和最大缩放级别(含)之间。

最大缩放级别为 21。(我相信 Google Maps API v2 只有 19。)

<小时/>

说明:

Google map 使用墨卡托投影。在墨卡托投影中，经线等间距，但纬线不等间距。从赤道到两极，纬线之间的距离逐渐增加。事实上，当到达两极时，距离趋于无穷大。然而，Google map 不显示北纬约 85 度以上或南纬约 -85 度以下的纬度。 ( reference ) (我计算实际截止点为 +/-85.05112877980658 度。)

这使得纬度边界分数的计算比经度更复杂。我用了formula from Wikipedia计算纬度分数。我假设这与谷歌地图使用的投影相匹配。毕竟，我上面链接到的 Google map 文档页面包含指向同一维基百科页面的链接。

其他注意事项:

1. 缩放级别的范围是从 0 到最大缩放级别。缩放级别 0 是 map 完全缩小。更高的级别会进一步放大 map 。 (reference)
2. 在缩放级别 0 时，整个世界可以显示在 256 x 256 像素的区域中。 (reference)
3. 对于每个更高的缩放级别，显示相同区域所需的像素数在宽度和高度上都会加倍。 (reference)
4. map 沿纵向环绕，但不沿纬度方向环绕。