Googleマップ境界を拡張してdivオーバーレイがマーカーをカバーしないようにする

私が取り組んでいるGoogle Mapsマッシュアップでは、地図は100％の幅で100％の高さです。 z-indexとCSSを使用して地図の左側に表示されます。Googleマップ境界を拡張してdivオーバーレイがマーカーをカバーしないようにする

マーカーを動的に追加すると、空白のBoundsオブジェクトから始めて1つずつ拡張して新しいLatLngを追加します。しかし、時にはマーカーが他の要素を含む私の透明なdivの下に表示されます。

私の透過divは250ピクセル幅です。

私がしたいのは、すべてのマーカーが表示されている境界線が確立された後です。もう一度それらを拡張してGoogleマップのビューポートを拡張して、境界に合わせるとマーカーは、透明なdivで覆われないように、左端から少なくとも250ピクセル離れた位置に表示されるようになりました。

MapProjection.fromPointToLatLngとMapCanvasProjection.fromDivPointToLatLngで試してみましたが、予測できない結果が得られました。

ご了承ください。

出典

2011-01-26 Vladimir Gurovich

うまくいけば、この迅速かつ汚いソリューションは、（それがAPI v3のです）ご回答のため

<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

感謝を助ける、病気はすぐにそれを評価し、それが動作するかどうかを確認します –

Googleマップ境界を拡張してdivオーバーレイがマーカーをカバーしないようにする

答えて

関連する問題