[Jquery] Присоединить обработчик событий к элементу внутри google maps info bubble


Answers

В сценариях, где я должен делать то, что вы описываете, я включаю вызов функции JavaScript непосредственно в содержимое InfoBubble. Я часто включаю гиперссылки в InfoBubble, поэтому в этом случае я делаю следующее: 1 - Напишите функцию JavaScript для обработки гиперссылки. 2 - Создайте маркер. 3 - Прикрепите обработчик события клика к маркеру, который открывает InfoBubble. 4 - Определите содержимое InfoBubble, чтобы JavaScript, встроенный непосредственно в контент InfoBubble, настроен на обработку события click, вызвав функцию JavaScript, определенную на шаге # 1, например:

"<span>" +
     "<a href='javascript:showDetail(" + param1 + "," + param2 + ");'>" + 
      displayTextContent + "</a>" +
"</span>"
Question

У меня есть вопрос относительно карт Google и обработки событий / прослушивания.

Используя jQuery и google maps 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); 
        }     
    });
}