谷歌地圖適合標記在自定義範圍內

我有一個Google地圖畫布，可以拉伸頁面的整個寬度和高度。重疊在它上面的是一個固定高度（100像素）的標題和一個響應寬度（20％+ 5％邊距）的側欄。谷歌地圖適合標記在自定義範圍內

搗鼓示範：http://jsfiddle.net/L9yjvdLv/1/

我面對的是確保所有的地圖上的標記是可見的問題。

我試着玩fitBounds，但問題是地圖沒有考慮到疊加的元素，這意味着標記將位於側邊欄或標題元素之後，或者非常靠近它們。

如何縮放和居中地圖，使所有標記在地圖的「可用」區域中可見？

來源

2014-11-24 Emphram Stavanger

任何特殊原因的標題和邊欄需要在地圖上，或者你可以適應它的內部區域？這將是棘手的，否則 – adanot 2014-11-24 01:09:35

在實際的網站，頭部有一個邊緣，邊欄是半透明的，所以爲了更「沉浸」的體驗（或其他，我不是設計師），地圖需要像這樣整頁。而且我知道這很棘手，我一直試圖在我的頭上繞了很長一段時間。 – 2014-11-24 01:14:45

啊我明白了。那麼，可能有一些方法可以做到這一點。看看這裏的地圖填充：https://developers.google.com/maps/documentation/android/map#map_padding這可以幫助你。 – adanot 2014-11-24 01:18:26

您將需要使用地圖投影和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

希望這有助於。

來源

2014-11-24 08:27:01 MrUpsidown

谷歌地圖適合標記在自定義範圍內

回答

相關問題