Прикрепить обработчик событий к элементу в информационном пузыре Google Maps

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

Используя jQuery и google maps v3, я могу разместить маркер карты и прослушиватель событий, который открывает инфопузырь, когда пользователь нажимает на маркер. То, что я хотел бы сделать (но пока не смог выяснить), это добавить еще один обработчик событий к содержимому информационного пузыря. Например, если пользователь нажимает на маркер карты, откройте информационный пузырь (эта часть работает), а затем, если он нажмет на что-то внутри информационной панели, сделайте что-нибудь еще. Я вставил свой код ниже, заранее спасибо за любую помощь

<code>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); 
        }     
    });
}  
</code>

Ответы на вопрос(2)

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

"<span>" +
     "<a href='javascript:showDetail(" + param1 + "," + param2 + ");'>" + 
      displayTextContent + "</a>" +
"</span>"
 Felipe Kettle13 апр. 2012 г., 17:17
это решение также сработало для меня
 14 дек. 2012 г., 06:48
о хорошо .. хахахахах ... как я могу забыть это единственное решение .. Спасибо :)
Решение Вопроса

Вы пытаетесь добавить"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);        
}
 Felipe Kettle09 апр. 2012 г., 05:42
Извините, это не совсем так. В моем исходном коде была опечатка. Я исправил эту опечатку, это было в той строке, где у меня был вызов google.maps.event.addListener (marker, & apos; click & apos ;, function () {marker должен был прочитать, mymarker. Однако исправление опечатки приводит к ошибка, когда я нажимаю на маркер на карте, появляется следующее сообщение об ошибке: Ошибка времени выполнения Microsoft JScript: невозможно получить значение свойства "addEventListener": объект имеет значение null или не определено
 Felipe Kettle09 апр. 2012 г., 05:15
То, что вы говорите, имеет смысл, однако я попытался реализовать ваше предложение, но мне это не удалось. Я скопировал и вставил ваше предложение, однако сам пузырь не открывается, поэтому я не могу даже щелкнуть содержимое внутри пузыря.
 09 апр. 2012 г., 20:48
Извините за поздний ответ. Не могли бы вы проверить этоconsole.log($(bubble.getContent()).find('.bubble-details-button')[0]) ? Это элемент DOM?
 Felipe Kettle13 апр. 2012 г., 17:15
Я думаю, что у меня есть отдельная проблема с моим кодом, поскольку я попробовал это в другом проекте в качестве теста, и он работает, я сделаю некоторую отладку, чтобы отследить ошибку, но что касается исходного вопроса, это решение работает , Спасибо за вашу помощь
 Felipe Kettle11 апр. 2012 г., 01:09
не нужно извиняться, спасибо за ваш ответ. Я получаю следующее: LOG: undefined Я чувствую, что не рассказываю вам всю историю. Код, который я первоначально разместил, был немного упрощен, потому что я на самом деле перебираю массив маркеров и добавляю слушателей через другое событие (в противном случае я получаю каждый пузырь с одинаковым контентом). я отредактировал приведенный выше код (ожидающий экспертной проверки по какой-то причине), чтобы отразить фактический рабочий код, который я использую.

Ваш ответ на вопрос