我有一个 Google map Canvas ,可以拉伸(stretch)整个页面的宽度和高度。覆盖在它上面的是一个固定高度(100 像素)的标题和一个响应宽度(20% + 5% 边距)的侧边栏。
用于演示的 fiddle :http://jsfiddle.net/L9yjvdLv/1/
我面临的问题是确保 map 上的所有标记都可见。
我试过使用 fitBounds
,但问题是 map 没有考虑重叠元素,这意味着标记将在侧边栏或标题元素后面,或者非常靠近它们.
如何缩放 map 并将其居中,以便所有标记在 map 的“可用”区域中可见?
最佳答案
您将需要使用 map 投影和 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));
}
我的示例只有一个左侧边栏叠加层,但您应该能够根据需要调整功能。
希望这对您有所帮助。
关于javascript - Google map 适合自定义范围内的标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27096429/