Cliquez sur Événements avec Leaflet et geoJSON


18

Comment attacher un événement click à un geoJSON qui exécute ensuite une fonction Ajax lorsque vous cliquez dessus. J'ai regardé onEachFeaturemais cela s'exécute lorsque le geoJSON est chargé, pas quand on clique, exécutant ainsi une tonne d'appels ajax!

Réponses:


22

Vous étiez sur la bonne voie avec onEachFeature.

C'est juste que vous devez lier l'événement en cliquant sur chaque élément.

Voir ci-dessous (testé)

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

Vous pouvez le faire avec un peu moins de code que la version de ThomasG77:

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

juste une autre façon en tant que fonction en ligne

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);
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.