Klik Acara dengan Leaflet dan geoJSON

18

Bagaimana cara melampirkan acara klik ke geoJSON yang kemudian menjalankan fungsi Ajax saat diklik. Saya melihat ke dalam onEachFeaturetetapi itu dijalankan ketika geoJSON dimuat, bukan ketika diklik, sehingga mengeksekusi satu ton panggilan ajax!

Brett Cullen
sumber

Jawaban:

22

Anda berada di jalan yang benar dengan onEachFeature.

Hanya saja Anda harus mengikat event klik pada setiap elemen.

Lihat di bawah (diuji)

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);
ThomasG77
sumber
8

Anda dapat melakukannya dengan kode yang sedikit lebih sedikit daripada versi 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);
Steve Bennett
sumber
3

hanya cara lain sebagai fungsi inline

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);
hoogw
sumber