Wie identifiziere ich den Leaflet-Marker während eines `popupopen`-Ereignisses?

Wenn auf eine Markierung geklickt wird, muss ich einen Code ausführen, der die findet id entsprechend der angeklickten Markierung , ruft Daten von der Backend-API ab und fügt dann die neu abgerufenen Daten zu hinzu content des sich öffnenden Popups.

Die einzige Möglichkeit, ein Klickereignis auf dem Marker zu hören, ist

map.on('popupopen', function(e){
    // How to retrieve marker?
    // eg: Assign an id on creation, retrieve it now during popupopen
};)

Wie kann ich herausfinden, welcher Marker das ist? Ist es möglich, eine hinzuzufügen id Attribut zu jeder Markierung, dann rufen Sie diese ab id während der popupopen Veranstaltung?

Das Ereignisobjekt enthält ein “Popup”-Attribut, das ein privates Attribut namens “_source” hat, das das Objekt ist, an das das Popup gebunden ist (dh die Markierung). Da _source privat sein soll, scheint dies nicht der richtige Weg zu sein, aber ich bin mir nicht sicher, wie ich es sonst machen soll.

map.on('popupopen', function(e) {
  var marker = e.popup._source;
});

Javascript-Objekte können beliebige Eigenschaften haben, die für sie definiert sind. Legen Sie popup.marker auf die referenzierte Markierung fest, wenn Sie das Popup erstellen. Dann können Sie später im Ereignishandler darauf zugreifen.

Um die Marker-ID zu erhalten, können Sie diesen Code verwenden:

map.on('popupopen', function(e) {
  var marker = e.popup._source.feature.properties.markerid;
});

Andere Antworten haben nicht funktioniert, aber das funktioniert:

map.on('popupopen', function(e) { alert(e.popup._source._popup._content); });

Ich schätze, diese Bibliothek ist ziemlich volatil … und ich bin mir nicht sicher, warum es überhaupt so kompliziert ist, solche Informationen zu übertragen.

Ich wollte eine Option finden, die keine privaten Dinge verwendet – diese Methode legt Eigenschaften für das Popup fest, auf die zugegriffen werden kann popupopen und popupclose Veranstaltungen:

const map = L.map('map').setView( [ 53.749943495499345, -2.058831736626878 ], 19 );
L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© <a target="attribution" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo( map );
/* create marker */
const marker = L.marker( [ 53.749943495499345, -2.058831736626878 ] ).addTo( map );
/* set property on marker */
marker.markerid = 'delightful';
/* create popup */
const popup = L.popup().setContent('The New Delight');
/* set properties on popup */
popup.marker = marker;
popup.markerid = marker.markerid;
/* bind popup to marker */
marker.bindPopup(popup);
/* access markerid when popup opens */
map.on( 'popupopen', e => {
    console.log( e.popup.markerid );
});
/* access marker when popup closes */
map.on( 'popupclose', e => {
    console.log( e.popup.marker.markerid );
    e.popup.marker.setOpacity(0.2);
});

Sie können für jedes von Ihnen erstellte Popup einen anderen Listener erstellen:

yourMarker1.bindPopup(popupContent1).on("popupopen", function(event){
    //this will be fired only for this specific popup of marker1 .
});

yourMarker2.bindPopup(popupContent2).on("popupopen", function(event){
    //this will be fired only for this specific popup of marker2.
});