Der Versuch, mehrere InfoWindows mit mehreren Markern auf einer Google Map zu verbinden und fehlzuschlagen

Question

Mein Projekt verwendet einen JSON-Feed, um Informationen über Erdbeben innerhalb einer bestimmten Längen- und Breitengren- ze zu sammeln. Ich nehme diese Informationen und wandle alle Ergebnisse in Markierungen auf einer Google-Karte um. Ich brauche jeden Marker, um auch einige zusätzliche Informationen anzuzeigen, also versuche ich, die eingebauten InfoWindow-Objekte so zu verwenden, dass wenn Sie auf einen Marker klicken, Sie den Tooltip mit einigen Informationen öffnen, die diesem Marker zugeordnet sind. Ich finde jedoch, dass egal welcher Marker ich anklicke, das gleiche Infowindow immer über dem gleichen Marker dieser Gruppe erscheint, und ich glaube, es ist immer das letzte Infowindow, das in meinem Loop erstellt wurde. Hier ist der Code.

$.getJSON(url, function(json) { 
        for(var i = 0; i < json.earthquakes.length; i++) 
        { 
         var pos = new google.maps.LatLng(json.earthquakes[i].lat, json.earthquakes[i].lng); 
         var info = json.earthquakes[i].lat + ", " + json.earthquakes[i].lng; 
         var marker = new google.maps.Marker({ 
          map: map, 
          position: pos, 
          title: json.earthquakes[i].eqid 
         }) 
         var tooltip = new google.maps.InfoWindow({ 
          content: info 
         }) 
         google.maps.event.addListener(marker, 'click', function() { 
          tooltip.open(map, marker); 
         }); 
         markers.push(marker); 
         tooltips.push(tooltip); 
        }    
       }); 

Marker ist ein Array für die alle Marker Objekte auf der Karte und tooltips ist eine weitere Array für die Infofenster Objekte speichern. Sie sind global.

Answer 1

Dies ist eine sehr häufige Frage in der google-maps Tag und ein einfacher Fehler zu machen :).

Was passiert ist, dass Ihr click-Ereignis asynchron aufgerufen wird und den aktuellen Wert in der Marker-Variable im getJSON-Callback (der letzte in der Liste) aufnimmt.

Sie benötigen addListener Anruf in einer Funktion wickeln, so dass ein Verschluss um den Marker Variable erstellt wird, in dem Klick Rückruf verwendet wird:

function listenMarker (marker) 
{ 
    // so marker is associated with the closure created for the listenMarker function call 
    google.maps.event.addListener(marker, 'click', function() { 
         tooltip.open(map, marker); 
        }); 
} 

Dann listenMarker von Ihrem Haupt getJSON Rückruf anrufen (wo Sie rufen gerade addListener auf.

Answer 2

Durch das Einfügen des AddListener-Aufrufs in eine eigene Funktion wird auch das Problem mehrerer Infofenster gelöst, die alle den gleichen Text anzeigen.

Answer 3

Sie können dies auch tun:

// so marker is associated with the closure created for the listenMarker function call 
google.maps.event.addListener(marker, 'click', function() { 
        tooltip.open(map, this); 
       }); 

Wo "Marker" ist mit "this" in dem Add-Listener Anruf ersetzen. So können Sie den addListner-Code an dem Punkt platzieren, an dem Sie den Marker erstellt haben, und müssen keine neue Funktion erstellen.

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

Überprüfen Sie die vollständige Lösung und eine Demo: D