擴展Google地圖邊界，以便div覆蓋不包括任何標記

在我正在處理的Google地圖混搭中，地圖100％寬，幾乎100％高，並且我有一個水平透明div覆蓋使用z-index和CSS的地圖左側。擴展Google地圖邊界，以便div覆蓋不包括任何標記

當我動態添加我的標記時，我從一個空的Bounds對象開始，並逐個擴展它以包含新的LatLng。有時候，標記會出現在包含其他元素的透明div下面。

假設我的透明div是250像素寬。

我想要做的是一旦我的邊界顯示出所有的標記已經建立，我想再擴展它們來擴展Google Map的視口，這樣當我適合邊界時，這些標記現在距離左邊框至少有250個像素，因此它們不被透明div覆蓋。

我試着玩MapProjection.fromPointToLatLng和MapCanvasProjection.fromDivPointToLatLng，但無法獲得可預測的結果。

任何意見或例子，將不勝感激。

來源

2011-01-26 Vladimir Gurovich

希望這個快速和骯髒的解決方案將幫助（這是API第3版）

<html> 
<head> 
<style> 
#over { 
position: absolute; 
z-index:99999; 
width: 250px; 
height: 600px; 
opacity: 0.7; 
top: 0px; 
border: 2px solid black; 
left: 0px; 
background: white; 
} 
</style> 

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps Bounds</title> 
<script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var map; 
var bounds; 
var overlay; 
//the witdh of your overlay (probably should get it dynamically 
var overlayWidth = 250; 

function initialize() { 
    var chicago = new google.maps.LatLng(41.875696,-87.624207); 
    var myOptions = { 
    zoom: 11, 
    center: chicago, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
     overlay = new google.maps.OverlayView(); 

    overlay.draw = function() {}; 

    overlay.setMap(map); 


} 
function addMarker() { 

maywood = new google.maps.LatLng(41.8823,-87.8487); 
var marker = new google.maps.Marker({ 
     position: maywood, 
     map: map 
    }); 
bounds = map.getBounds(); 

point = overlay.getProjection().fromLatLngToContainerPixel(maywood); 
//point is under overlay 
if (point.x<overlayWidth) { 
//calculate offset by which to extend 
offset = new google.maps.Point((point.x-overlayWidth),0); 
extendByX = overlay.getProjection().fromContainerPixelToLatLng(offset); 
//here you might want to check if all your existing markers will fit into new bounds before applying the new bounds 
newBounds = new google.maps.LatLngBounds(extendByX,bounds.getNorthEast()); 
map.fitBounds(newBounds); 
} 


} 

</script> 
</head> 
<body onload="initialize()"> 
<div id="over">OVERLAY</div> 
    <div id="map_canvas" style="width: 900px;height: 600px;"></div> 
<input type="button" value="Add Marker & Expand Bounds" onclick="addMarker()"> 
</body> 
</html>

來源

2011-01-31 12:19:49 Michal

感謝您的答覆，虐待不久對其進行評估，看看它的工作原理 – 2011-02-03 18:41:41

擴展Google地圖邊界，以便div覆蓋不包括任何標記

回答

相關問題