2012-03-08 12 views
2

私は一つの質問、マップに関連 なぜ線量マウスイベント我々はマーカーマウスイベントマーカーから基本となるマップへの伝播

EXPを超えているときに起動しませんがあります。 のマーカーを移動すると、マウスの移動リスナーがマップに追加されることはありません(イベントの伝播またはバブリングと呼ばれることはありません)。

これは地図v2上で動作していました。

これはバグですか、それともv3のこの動作に変更されましたか?

ブレイズここ

例がある

...

あなたがマップを移動した場合、mapLabelは でなければなりませんように更新されますが、uは、マーカーの上に移動する場合mapLabelが更新されることはありません

var map; 
    function initialize() { 
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
    var myOptions = { 
    zoom: 4, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    google.maps.event.addListener(map, 'MOUSEMOVE', function() { 
    document.getElementByID('moveLabel').innerHtml = 'Mouse map move' + Math.random(); 
    }); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title:"Hello World!" 
    }); 
google.maps.event.addListener(marker, 'MOUSEOUT', function() { 
    document.getElementByID('markerLabel').innerHtml = ''; 
    }); 
    google.maps.event.addListener(marker, 'MOUSEOVER', function() { 
    document.getElementByID('markerLabel').innerHtml = 'Mouse over marker'; 
    }); 
} 
+0

関連コードをお知らせください。 – Josh

+0

こんにちはJosh コードには何も特別なものはありません。地図の移動リスナーとマーカーをマップに追加するだけです。 – user1257452

+0

こんにちはJosh コードには何も特別なものはありません。地図の移動リスナーとマーカーをマップに追加するだけです。 1.マーカーがclickable = falseに設定されている場合、マーカー上のマップ移動イベントは発生しますが、この場合はすべてのマーカーイベントが発生しません! 2.マーカーclickable = trueの場合、すべてのマーカーイベントが発生しますが、マーカー上のマップ移動イベントは発生しません。 V2では、オーバーレイされているかどうかに関係なく、マップイベントは常に発生しました。 – user1257452

答えて

2

すべてのGoogleマップのデータは7つのレイヤーに配置されています。これらの層はペインと呼ばれます。図面がどのペインに属しているかに応じて、イベントを受信するか受信できないかを示します。詳細については、google.maps.MapPanesのドキュメントを参照してください。

更新日: Googleマップは7つのペインにすべてのデータを描画します。すべてのペインは同じ親の子です。イベントのバブリングでは、要素の関係がparent-child(子が親にイベントをバブルできる)である必要がありますが、sibling-siblingではありません。 sibling-siblingの関係では、イベントは、最も高い数字のz-indexで受信されます。これは、あなたがマーカーのペインから地図のペインにイベントを吹き飛ばさない理由です。

+0

MapPanesをチェックすると、6つのペイン、overlayImage(3番目のペインはマーカ​​ーイメージレイヤです)が表示され、これもイベントを取得します。 私はコードを追加しました上記。それをチェック! Tnx – user1257452

+0

@ user1257452私は更新しました。それをチェック! – Engineer