Falsche Polylinie Klicken gefeuert, wenn mehrere Polylinien auf der Karte

Question

Ich habe mehrere Polylinien auf einer Google Map und fügen Sie einen 'click' Event-Handler für jede. All diese Polylinien werden über JavaScript-Code hinzugefügt. Wenn ich jedoch auf eine beliebige Polylinie in der Karte klicke, wird das Klickereignis für die zuletzt hinzugefügte Polylinie ausgelöst. Dies macht es schwierig, die angeklickte Linie zu identifizieren.

Der Code, der die Polylinien erstellt ist:

$.ajax({ 
       type: "GET", 
       url: "MapData.html", 
       success: function (json) { 
        mapData = JSON.parse(json); 
        var newroad; 
        for (var i = 0; i < mapData.length; i++) { 
         newroad = new google.maps.Polyline({ 
          ID: mapData[i].ID, 
          path: google.maps.geometry.encoding.decodePath(mapData[i].latLngs), 
          strokeColor: 'blue', 
          strokeOpacity: 0.75, 
          strokeWeight: 3 
         }); 

         newroad.setMap(map); 
         google.maps.event.addListener(newroad, 'click', function() { 

          setSelectedRoad(newroad); 
         }); 
        } 
       }, 
       error: function() { 
        alert('Critical Data Failure'); 
       } 
      }); 

Die Daten sind korrekt abgerufen von dem Server und alle Polylinien werden in Blau angezeigt, wie erwartet. Die Funktion, die aufgerufen wird, wenn eine Polylinie geklickt wird, ist

function setSelectedRoad(road) { 
     road.strokeColor = 'black'; 
     road.setOptions({ strokeColor: 'black', strokeOpacity: 1.0 }); 
     selectedRoadID = road.ID; 
    } 

jedoch die „selectedRoadID“ immer die letzte Polylinie hinzugefügt werden, stellt sich heraus, und die Farbe für diese Linie in Schwarz geändert, auch wenn andere Polylinie geklickt wird.

Der verwirrende Teil ist, dass, wenn ich eine frische Polylinie auf der Karte zeichne und das click-Ereignis auf die gleiche Funktion setze, dann funktioniert das richtig. Ich bekomme die richtige ID für die angeklickte Polylinie. Dies funktioniert für beliebig viele neue Linien und funktioniert ordnungsgemäß, um sie in beliebiger Reihenfolge anzuklicken.

Answer 1

Ich fand, dass

newroad.setMap(map); 
    google.maps.event.addListener(newroad, 'click', function() { 

      setSelectedRoad(newroad); 
    }); 

zu

newroad.setMap(map); 
    google.maps.event.addListener(newroad, 'click', function() { 

      setSelectedRoad(this); 
    }); 

alles fixiert zu ändern.

Answer 2

Das Problem ist, Sie tun dies in einer Schleife:

newroad = new google.maps.Polyline({ ... }); 

google.maps.event.addListener(newroad, 'click', function() { 
    setSelectedRoad(newroad); 
}); 

So Sie neu erstellen newroad mal 10 mal sagen. Jedes Mal, wenn Sie es erstellen, geben Sie derselben Variablen einen neuen Ereignis-Listener, d. H., Sie überschreiben denselben Ereignis-Listener 10-mal. Es werden keine 10 separaten Ereignis-Listener erstellt, einer für jede Polylinie.

Wenn Sie auf Ihre Polylinie klicken, führen Sie nur die allerletzte Version des Ereignis-Listeners aus.

Stattdessen müssen Sie den Ereignis-Listener von der Schleife trennen. Etwas wie folgt aus:

$.ajax({ 
    type: "GET", 
    url: "MapData.html", 
    success: function (json) { 
     mapData = JSON.parse(json); 
     var newroad; 
     for (var i = 0; i < mapData.length; i++) { 
      newroad = new google.maps.Polyline({ 
       ID: mapData[i].ID, 
       path: google.maps.geometry.encoding.decodePath(mapData[i].latLngs), 
       strokeColor: 'blue', 
       strokeOpacity: 0.75, 
       strokeWeight: 3, 
       map: map 
      }); 

      bindEvent(newroad); 
     } 
    }, 
    error: function() { 
     alert('Critical Data Failure'); 
    } 
}); 

function bindEvent(newroad) { 
    newroad.addListener('click', function() { 
     setSelectedRoad(this); 
    }); 
} 

Auf diese Weise können bindEvent 10 mal nennen, jedes Mal mit einem anderen Argument für newroad. Sie erstellen also jedes Mal 10 separate Ereignis-Listener mit einem anderen Wert für newroad.