Thêm một trình lắng nghe sự kiện trên Marker trong Tờ rơi

Tôi đang sử dụng Tờ rơi để hiển thị bản đồ. Tôi đã tạo một bản đồ với các điểm đánh dấu và tôi không biết cách triển khai Trình nghe sự kiện 'onClick' trên mỗi Điểm đánh dấu.

Mã của tôi

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

Thí dụ

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

Tờ rơi đề cập đến người nghe sự kiện bằng cách tham chiếu, vì vậy nếu bạn muốn thêm người nghe và sau đó loại bỏ nó, hãy xác định nó là một hàm:

function onClick(e) { ... }

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

Chào mừng bạn đến với Sàn giao dịch GIS!

Không có khó khăn đặc biệt nào trong việc gắn một cuộc gọi lại vào sự kiện nhấp chuột đánh dấu (s). Bạn chỉ cần sử dụng myMarker.on('click', callback)như bạn đã làm với bản đồ. Bạn cũng sẽ phải làm điều đó cho mọi điểm đánh dấu mà bạn muốn đính kèm một cuộc gọi lại.

Một khả năng khác là thêm tất cả các điểm đánh dấu của bạn vào Nhóm tính năng (ví dụ: chỉ đơn giản là khởi tạo của bạn markersLayerbằng L.featureGroup()thay vì L.layerGroup()), để bạn có thể đính kèm cuộc gọi lại trực tiếp vào Nhóm đó. Nó sẽ nhận được các sự kiện nhấp chuột từ các điểm đánh dấu riêng lẻ và bạn có thể truy cập tính năng nhấp riêng lẻ bằng cách sử dụng event.layer.

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

// populate map from stops…

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

Bản trình diễn: http://jsfiddle.net/ve2huzxw/74/

Câu hỏi tương tự được hỏi bởi một người khác trên diễn đàn Leaflet: https://groups.google.com/forum/#!topic/leaflet-js/RDTCHuLvMdw

Sửa đổi vòng lặp dân số bản đồ của bạn để gán các thuộc tính cho điểm đánh dấu của bạn.

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

Sau đó, để truy cập các thuộc tính này (tính năng như chúng được gọi) trong sự kiện onclick,

markersLayer.on("click", markerOnClick);

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

Cách properties.vartiếp cận có thêm lợi ích là làm cho điểm đánh dấu của bạn ở định dạng GeoJson tiêu chuẩn. Làm cho nó tương thích nếu, giả sử, bạn cần xuất dữ liệu dưới dạng shapefile, nhập dấu từ shapefile, v.v.

Một cách khá đơn giản và dễ dàng để thực hiện việc tạo ra một loạt các điểm đánh dấu có thể nhấp trong đối tượng bản đồ tờ rơi là thao tác danh sách lớp của điểm đánh dấu đã tạo bằng cách thêm tên lớp tăng tùy chỉnh vào mỗi điểm đánh dấu. Sau đó, thật dễ dàng để tạo một người nghe và biết điểm đánh dấu nào đã được nhấp. Bằng cách bỏ qua một hoạt động hoặc không, mỗi cái có một sự kiện nhấp có thể truy xuất được với một ID đáng tin cậy.

  // 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();
    });
  }