Nie można dodać wydarzenia na mapie Google Infobox

Question

Używam Infobox z Google Map V3 (załączony obraz). Klikając na Infobox, chcę przejść do strony ze szczegółami. Ale nie jestem w stanie dodać detektora kliknięcia na infobox. Oto kod używam:

To mój infobox config:

var ib = new InfoBox({ 
     alignBottom : true, 
     disableAutoPan: false, 
     maxWidth: 0, 
     pixelOffset: new google.maps.Size(-125, -50), 
     zIndex: null, 
     closeBoxURL: "", 
     infoBoxClearance: new google.maps.Size(1, 1), 
     isHidden: false, 
     pane: "floatPane", 
     enableEventPropagation:false 
    }); 

I dodałem słuchacza do tego Infobox jak ten:

google.maps.event.addListener(ib, 'domready', function() { 
     if(Ext.get(ib.div_)){ 
      Ext.get(ib.div_).on('click', function(){ 
       console.log('test on click') 
      }, this); 

      Ext.get(ib.div_).on('mousedown', function(){ 
       console.log('test on click') 
      }, this); 
     } 
    }); 

Podczas enableEventPropagation = false, zdarzenie nie jest propagowane do MAP, ale żadne zdarzenie nie działa na infobox.

Podczas gdy enableEventPropagation = true, zdarzenia (kliknięcie, mousedown) działają, ale kliknięcie na inną część infobox, zabiera mnie do mapowania lub innego znacznika.

Każdy pomysł, jak rozwiązać ten problem?

Answer 1

Możesz załączyć słuchacza do zawartości twojego InfoBox.

var boxText = document.createElement('div'); 
var myOptions = { 
    content: boxText, 
    ... 
} 
var ib = new InfoBox(myOptions); 
ib.open(theMap, marker); 
boxText.setAttribute('onclick', 'alert("InfoBox clicked")'); 

Czy ta praca dla Ciebie?

Answer 2

Musisz dodać zdarzenie domready do zdarzenia infobox's eventListener, aby google go nie mapował. Dopiero po wyświetleniu html infoboxu możesz powiązać wydarzenie. Aby zapobiec wiązaniu zdarzeń w wielu zdarzeniach, zamknij inne infobox przed załadowaniem nowego.

infobox= new InfoBox(); 
google.maps.event.addListener(marker, 'click', function() { 
    infobox.close(); 
    infobox= new InfoBox({ ... }); 
    infobox.open(map, this); 
    infobox.addListener("domready", function() { 
    $("#target").on("click", function(e) { /* do something */ }); 
    }); 
});