谷歌地图在自定义范围内适合标记答案

【问题标题】：Google Maps fit markers in custom bounds谷歌地图在自定义范围内适合标记
【发布时间】：2014-11-24 01:02:25
【问题描述】：

我有一个 Google 地图画布，可以拉伸页面的整个宽度和高度。覆盖在其顶部的是一个固定高度（100 像素）的标题和一个响应宽度（20% + 5% 边距）的侧边栏。

用于演示的小提琴：http://jsfiddle.net/L9yjvdLv/1/

我面临的问题是确保地图上的所有标记都可见。

我尝试使用fitBounds，但问题是地图没有考虑覆盖的元素，这意味着标记将位于侧边栏或标题元素的后面，或者非常靠近它们。

如何缩放地图并将其居中以使所有标记在地图的“可用”区域中可见？

【问题讨论】：

标题和侧边栏需要在地图上方的任何特殊原因，或者您可以将其放入内部区域吗？否则会很棘手
在实际站点中，页眉周围有一个边距，侧边栏是半透明的，所以为了更“身临其境”的体验（或者其他什么，我不是设计师），地图需要像这样的整页。而且我知道这很棘手，我一直在努力解决这个问题。
啊，我明白了。好吧，可能有几种方法可以做到这一点。看看这里的地图填充：developers.google.com/maps/documentation/android/…这可以帮助你。
这是一个例子：emanueletessore.com/adding-padding-google-maps

标签： javascript google-maps google-maps-api-3

【解决方案1】：

您需要使用地图投影和fromLatLngToPoint 在坐标和点之间进行转换，以便能够考虑到您不同的叠加元素。

完整解释请查看this answer。

function fromLatLngToPoint(latLng) {

    var scale = Math.pow(2, map.getZoom());
    var nw = new google.maps.LatLng(map.getBounds().getNorthEast().lat(), map.getBounds().getSouthWest().lng());
    var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
    var worldCoordinate = map.getProjection().fromLatLngToPoint(latLng);

    return new google.maps.Point(Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale), Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale));
}

我的示例只有左侧边栏覆盖，但您应该能够根据需要调整功能。

JSFiddle demo

希望这会有所帮助。

【讨论】：