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!

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

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

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);
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.