5

Google マップとイベントの処理/リッスンについて質問があります。

jQuery と Google マップ v3 を使用して、マップ マーカーと、ユーザーがマーカーをクリックしたときに情報バブルを開くイベント リスナーを配置できます。私がやりたいこと (ただし、これまでのところ把握できていません) は、情報バブルの内容に別のイベント ハンドラーを追加することです。たとえば、ユーザーがマップ マーカーをクリックすると、情報バブルが開き (その部分が機能します)、情報バブル内の何かをクリックすると、別の操作が行われます。以下にコードを貼り付けました。事前に助けてくれてありがとう

function addMarker(data) {
    var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
    var title = data.title? data.title: "";
    var icon = $('#siteUrl').val() + 'img/locate.png';

var bubbleContentString = "<span class=\"bubble-details-button\">Get Details about " + title+ "</span>";

myInfoBubble = new InfoBubble({
    content: bubbleContentString,
    hideCloseButton: true,        
    backgroundColor: '#004475',
    borderColor: '#004475'
});

var myMarker =  new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: title,
        icon: icon
    });    
addListenerToMarker(myMarker, myInfoBubble);
markerSet.push(myMarker, myInfoBubble);    
}
function addListenerToMarker(marker, bubble){
    console.log($(bubble.getContent()).find('.bubble-details-button')[0]);
    google.maps.event.addListener(marker, 'click', function() { 
        if (!bubble.isOpen()) {  
            google.maps.event.addListenerOnce(bubble, 'domready', function(){ 
                console.log($(bubble.getContent()).find('.bubble-details-button')[0]);
                google.maps.event.addDomListener($(bubble.getContent()).find('.bubble-details-button')[0], 'click', function(){ 
                    alert("hi"); 
                }); 
            });
            bubble.open(map, marker); 
        }     
    });
}
4

2 に答える 2

5

"click"ではない要素にイベントを追加しようとしていDOM Elementます。$('.bubble-details-button')ではありませんDOM Element（のラッパーですDOM Element）が、$('.bubble-details-button')[0]です。

一方、"click"イベントを追加しようとすると、コンテンツはまだ作成されていません。すでに作成されている場合にのみ、コンテンツの要素を操作 (イベントの追加など) できます。InfoBubbleそのコンテンツが作成されると、イベントがトリガーされます。したがって"domready"、それを処理する必要があります。

 if (!bubble.isOpen()) {
    google.maps.event.addListenerOnce(bubble, 'domready', function(){
        google.maps.event.addDomListener($(bubble.getContent()).find('.bubble-details-button')[0], 'click', function(){
            alert("hi");
        });
    });
    bubble.open(map, mymarker);        
}
于 2012-04-08T17:20:16.170 に答える
3

あなたが説明していることをしなければならないシナリオでは、JavaScript関数呼び出しをInfoBubbleコンテンツに直接含めます。InfoBubble内にハイパーリンクを含めることが多いので、その場合は次のようにします。1-ハイパーリンクのクリックを処理するJavaScript関数を記述します。2-マーカーを作成します。3-クリックイベントハンドラーを、InfoBubbleを開くマーカーにアタッチします。4-InfoBubbleのコンテンツを定義して、InfoBubbleコンテンツに直接埋め込まれたJavaScriptが、ステップ1で定義されたJavaScript関数を呼び出すことによってクリックイベントを処理するように設定されるようにします。

"<span>" +
     "<a href='javascript:showDetail(" + param1 + "," + param2 + ");'>" + 
      displayTextContent + "</a>" +
"</span>"
于 2012-04-08T18:32:16.847 に答える