Javascript 谷歌地图在自定义范围内匹配标记

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

小提琴示范：

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

我试着使用

fitBounds

，但问题是地图没有考虑覆盖的元素，这意味着标记将位于侧栏或标题元素后面，或者非常接近它们

---

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

您需要使用地图投影和

从LatlngTopoint

在坐标和点之间转换，以便能够考虑不同的覆盖元素

如需详细解释，请查看

我的示例只有一个左侧边栏覆盖，但是您应该能够根据需要调整函数

---

希望这能有所帮助。

标题和侧边栏需要位于地图上方的特殊原因是什么，还是您可以将其安装到地图内部的区域？在实际的网站中，这将是一个棘手的问题，页眉周围有一个空白，边栏是半透明的，因此为了获得更“沉浸式”的体验（或者说，我不是设计师），地图需要像这样整版。我知道这很棘手，我已经想了很久了。啊，我明白了。嗯，可能有几种方法可以做到这一点。看看这里的地图填充：这可以帮助您。下面是一个示例：

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));
}