Ändern Sie das Markierungssymbol beim Klicken mit der Broschüre

20

Ich habe eine Karte mit vielen (> 100) Markierungen. Ich möchte es so machen, dass das Klicken auf diese das Symbol in eine hervorgehobene Version ändert. Ich habe zwei benutzerdefinierte Symbole erstellt, ein reguläres und ein hervorgehobenes. Ich habe diese Funktion für einzelne Marker eingerichtet, kann sie jedoch nicht einrichten, sodass jedes Symbol durch Klicken geändert werden kann.

Hier ist der Arbeitscode für ein Symbol:

var testmarker = L.marker([44.0, -73.0], {icon: unselectedIcon});

testmarker.on('click', function(e) {
  testmarker.setIcon(selectedIcon);
});

Ich habe jedoch viele Marker und benutze eine for-Schleife, um sie zu platzieren:

//points is a 2 dim array with lat/long pairs
for (i = 0; i <= points.length-1; i++) {
    var marker = L.marker([points[i][0], points[i][1]], {icon: unselectedIcon});    
}

marker.on('click', function(e) {
  marker.setIcon(selectedIcon);
});

Ich habe versucht, jedem Marker mithilfe eines Arrays einen eindeutigen Variablennamen zu geben:

for (i = 0; i <= points.length-1; i++) {
    testmarker[i] = L.marker([points[i][0], points[i][1]], {icon: unselectedIcon}); 
    testmarker[i].on('click', function(e) {
alert(e.latlng); e.setIcon(selectedIcon); 
}); 
}

Das gibt mir nur "undefiniert" in der Warnung.

Der Wechsel testmarker[i].onzu this.map.ongibt nur beim Klicken auf die Karte eine Warnung aus (keine Änderung des Symbols).

Ändern Sie die gesamte Zeile in:

testmarker[i].on('click', function(e) {
alert(e.latlng); testmarker[i].setIcon(selectedIcon);
});

Ändert die letzte (wenn eine angeklickt wird) und gibt gleichzeitig eine undefinierte Warnung aus.

Wie kann ich die Marker so einstellen, dass jeder mit einem Klick einzeln geändert werden kann, ohne Hunderte von wiederholten Codeblöcken für jeden zu verwenden?

leaflet markers DaleSwanson
quelle

Antworten:

16

Am Ende habe ich das gelöst. Ich habe auch herausgefunden, dass Sie beliebige Optionen hinzufügen und später darauf zugreifen können. Dies ist nützlich, um Markern eindeutige IDs zuzuweisen:

for (i = 0; i <= points.length-1; i++) {
    testmarker[i] = L.marker([points[i][0], points[i][1]], {icon: unselectedIcon, id: i}); 
    testmarker[i].on('click', function(e) {
        e.target.setIcon(selectedIcon);
        document.getElementById('someDiv').innerHTML = points[e.target.options.id][2];
}); 
}
DaleSwanson
quelle