Klicken Sie auf Ereignisse mit Leaflet und geoJSON


18

Wie hänge ich ein Klickereignis an einen geoJSON an, der beim Klicken eine Ajax-Funktion ausführt. Ich habe onEachFeaturenachgesehen, aber das wird ausgeführt, wenn der geoJSON geladen wird, nicht, wenn darauf geklickt wird, und führt so eine Menge Ajax-Aufrufe aus!

Antworten:


22

Sie waren auf dem richtigen Weg mit onEachFeature.

Sie müssen nur einen Ereignis-Klick auf jedes Element binden.

Siehe unten (getestet)

function whenClicked(e) {
  // e = event
  console.log(e);
  // You can make your ajax call declaration here
  //$.ajax(... 
}

function onEachFeature(feature, layer) {
    //bind click
    layer.on({
        click: whenClicked
    });
}

geojson = L.geoJson(your_data, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(map);

8

Sie können es mit etwas weniger Code als die Version von ThomasG77 tun:

function onEachFeature(feature, layer) {
    //bind click
    layer.on('click', function (e) {
      // e = event
      console.log(e);
      // You can make your ajax call declaration here
      //$.ajax(... 
    });

}

geojson = L.geoJson(your_data, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(map);

3

nur ein anderer weg als inline funktion

geojson = L.geoJson(your_data, {
style: style,
onEachFeature: function onEachFeature(feature, layer) {

layer.on('mouseover', function (e) {
  // e = event
  console.log(e);
  // You can make your ajax call declaration here
  //$.ajax(... 
  });}).addTo(map);
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.