Google地图适合自定义边界中的标记

时间:2014-11-24 01:02:26

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

我有一个Google地图画布,可以拉伸页面的整个宽度和高度。覆盖在它上面的是一个固定高度(100像素)的标题和一个响应宽度(20%+ 5%边距)的侧边栏。

演示小提琴:http://jsfiddle.net/L9yjvdLv/1/

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

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

如何缩放地图并使地图居中,以便所有标记在"可用"地图的区域?

1 个答案:

答案 0 :(得分: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

希望这有帮助。