คลิกกิจกรรมด้วย Leaflet และ geoJSON


18

ฉันจะแนบเหตุการณ์การคลิกกับ geoJSON ที่จะเรียกใช้ฟังก์ชัน Ajax เมื่อคลิกได้อย่างไร ฉันมองเข้าไปonEachFeatureแต่มันทำงานเมื่อมีการโหลด geoJSON ไม่ใช่เมื่อคลิกดังนั้นจึงเรียกใช้ ajax ได้หลายครั้ง!

คำตอบ:


22

onEachFeatureคุณอยู่บนทางที่ถูกต้องด้วย

เป็นเพียงคุณต้องผูกเหตุการณ์คลิกในแต่ละองค์ประกอบ

ดูด้านล่าง (ทดสอบแล้ว)

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

คุณสามารถทำได้โดยใช้รหัสน้อยกว่ารุ่น 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

อีกวิธีหนึ่งเป็นฟังก์ชันอินไลน์

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);
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.