Tambahkan pendengar acara pada Marker di Leaflet

Saya menggunakan Leaflet untuk membuat peta. Saya membuat peta dengan spidol dan saya tidak tahu bagaimana menerapkan Event onener 'onClick' pada masing-masing Marker.

Kode saya

var stops = JSON.parse(json);
var map = new L.Map('map', {
  zoom: 12,
  minZoom: 12,
  center: L.latLng(41.11714, 16.87187)
});
map.addLayer(L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'Map data',
  maxZoom: 18,
  id: 'mapbox.streets',
  accessToken: '-----'
}));
var markersLayer = new L.LayerGroup();
map.addLayer(markersLayer);


//populate map from stops
for (var i in stops) {
  L.marker(L.latLng(stops[i].Position.Lat, stops[i].Position.Lon), {
    title: stops[i].Description
  }).addTo(markersLayer).bindPopup("<b>" + stops[i].Description + "</b>").openPopup();
}

Contoh

map.on('click', function(e) {
    alert(e.latlng);
});

Leaflet berurusan dengan pendengar acara dengan referensi, jadi jika Anda ingin menambahkan pendengar dan kemudian menghapusnya, tentukan sebagai fungsi:

function onClick(e) { ... }

map.on('click', onClick);
map.off('click', onClick);

Selamat datang di GIS Stack Exchange!

Seharusnya tidak ada kesulitan khusus dalam melampirkan acara klik callback ke marker. Anda cukup menggunakan myMarker.on('click', callback)seperti yang Anda lakukan dengan peta. Anda juga harus melakukan itu untuk setiap penanda yang ingin Anda lampirkan panggilan balik.

Kemungkinan lain adalah menambahkan semua spidol Anda ke dalam Grup Fitur (misalnya, instantiate markersLayerdengan Anda L.featureGroup()alih - alih L.layerGroup()), sehingga Anda dapat melampirkan panggilan balik langsung ke Grup tersebut. Ini akan menerima peristiwa klik dari penanda individual, dan Anda dapat mengakses fitur yang diklik individu menggunakan event.layer.

var markersLayer = L.featureGroup().addTo(map);

// populate map from stops…

markersLayer.on("click", function (event) {
    var clickedMarker = event.layer;
    // do some stuff…
});

Demo: http://jsfiddle.net/ve2huzxw/74/

Pertanyaan serupa diajukan oleh orang lain di forum Leaflet: https://groups.google.com/forum/#!topic/leaflet-js/RDTCHuLvMdw

Ubah loop populasi peta Anda untuk menetapkan properti ke marker Anda.

//populate map from stops
for (var i in stops) {
  var oneMarker = L.marker(L.latLng(stops[i].Position.Lat, stops[i].Position.Lon), {
    title: stops[i].Description
  }).bindPopup("<b>" + stops[i].Description + "</b>").openPopup();

  oneMarker.properies.name = stops[i].Name;
  oneMarker.properies.description = stops[i].Description;
  oneMarker.properies.othervars = stops[i].othervars;
  oneMarker.addTo(markersLayer);
}

Kemudian, untuk mengakses properti ini (properti fitur sebagaimana mereka dipanggil) di acara onclick,

markersLayer.on("click", markerOnClick);

function markerOnClick(e) {
  var attributes = e.layer.properties;
  console.log(attributes.name, attributes.desctiption, attributes.othervars);
  // do some stuff…
}

The properties.varpendekatan memiliki manfaat tambahan membuat penanda Anda dalam format GeoJSON standar. Buat itu kompatibel jika, katakanlah, Anda perlu mengekspor data sebagai shapefile, mengimpor spidol dari shapefile, dll.

Cara yang cukup lurus ke depan dan mudah untuk mencapai pembuatan array penanda yang dapat diklik dalam objek peta selebaran adalah memanipulasi daftar kelas marker yang dibuat dengan menambahkan nama kelas yang ditambahkan kustom ke setiap marker. Maka mudah untuk membuat pendengar dan tahu penanda mana yang diklik. Dengan melewatkan yang aktif atau tidak, masing-masing memiliki acara klik yang dapat diambil dengan ID yang andal.

  // creates markers, each with a leaflet supplied class
  if (length === 1) {
    for (i = 0; i < parks.length; ++i) {
      if (parks[i].parksNumber !== parks.parksNumber)
        L.marker([parks[i].latitude, parks[i].longitude], {
          icon: parks[i].iconMarker
        }).addTo(mymap);
    }
  }

  // select all of the leaflet supplied class
  let markers = document.querySelectorAll(".leaflet-marker-icon");

  // loop through those elements and first assign the indexed custom class
  for (i = 0; i < markers.length; ++i) {
    markers[i].classList.add("marker_" + parks[i].parksNumber);

    // then add a click listener to each one
    markers[i].addEventListener("click", e => {

      // pull the class list
      let id = String(e.target.classList);

      // pull your unique ID from the list, be careful cause this list could 
      // change orientation,  if so loop through and find it
      let parksNumber = id.split(" ");
      parksNumber = parksNumber[parksNumber.length - 1].replace("marker_", "");

      // you have your unique identifier to then do what you want with
      search_Number_input.value = parksNumber;
      HandleSearch();
    });
  }