2012-05-08 12 views
1

GoogleマップをAPIのV2からv3に変換し始めたばかりです。拡大地図を表示するときにInfoWindowを表示する

InfoWindowが開いているときに地図が拡大されると、InfoWindowがマップから外れて最終的に表示されなくなるという点で、これはV2とは異なる動作です。 V2では、InfoWindowは常に表示されたままです。

V2マップ:http://www.stroud.gov.uk/docs/housing/tenant_map_v2.asp

V3マップ:http://www.stroud.gov.uk/docs/housing/tenant_map_v3.asp

だけで、通常のズームコントロールで、地図をズームし、それは情報ウィンドウのオープンする任意のマーカーをクリックしてください。

V2マップのように動作を維持する方法はありますか?

おかげで、 マイク


私は機能するソリューションを作ってみました。上記のようにURLが、私が追加したgoogle.maps.event.addListener(newMarker、 "クリック" 機能では

var currentInfoWindow = null; // new global scope variable to hold current open infoWindow 

をtenant_map.asp使用:

currentInfoWindow = this; 

zoom_changedリスナーを追加します。

google.maps.event.addListener(theMap, "zoom_changed", function() { 
    if (currentInfoWindow != null) { 
     infoWindow.open(theMap, currentInfoWindow); 
    } 
}); 

と情報ウィンドウcloseclickリスナー:

google.maps.event.addListener(infoWindow, "closeclick", function() { 
    currentInfoWindow = null; 
}); 

うまく動いているように見えますが、ズーミングするときにパンニングを少ししてもらえますが、これまでのところ唯一のことでした。

V2マップほど良くはありませんので、誰かがより良い解決策を持っている場合は投稿してください。

答えて

0

V2マップは、ズームしたときに最後にハイライトされたマーカーに直接ズームするため、私のようです。 V3は地図が現在中心にある場所にズームするだけです。マーカークリックイベントハンドラをそのマーカーの地図の中心に戻すのはどうですか?

+0

こんにちはダンカン、その考えをありがとう、それは良い作品です。それを自分自身で試みることは決して考えなかった。私は両方の方法を提供し(そして標準のV3マップを残して)、ユーザーが何を考えるかを見ていきます。 –

0

ここに、情報ウィンドウを保持するズーム機能があります。私は自分自身のズームコントロールを使用していて、zoomBy(1)を呼び出して1つのレベルを拡大するか、zoomBy(-2)を呼び出して2つのレベルを縮小します。

var helperOverlay = new google.maps.OverlayView(); 
helperOverlay.draw = function(){}; 
helperOverlay.setMap(map); 

function zoomBy(delta) { 
    var newZoom = map.getZoom() + delta; 
    if (newZoom < 0) return; 
    var projection = helperOverlay.getProjection(); 
    if (projection) { // projection may be undefined (if the overlay is not ready I guess) 
    var center = projection.fromLatLngToContainerPixel(map.getCenter()); 
    var focus = projection.fromLatLngToContainerPixel(infoWindow.getPosition()); 
    for (var i = Math.abs(delta); i > 0; i--) 
     center = (delta > 0) ? 
     new google.maps.Point((center.x + focus.x)/2, (center.y + focus.y)/2) : 
     new google.maps.Point(center.x * 2 - focus.x, center.y * 2 - focus.y); 
    map.setCenter(projection.fromContainerPixelToLatLng(center)); 
    } 
    map.setZoom(newZoom); 
} 

数値はthis scroll wheel zoom implementationから借りています。スクロールホイールのズームインプリメンテーションをインフォメーションウィンドウの位置に渡して呼び出すことができればいいと思います。

関連する問題