提取Leaflet中标记的属性，在单击事件上

Question

我正在使用JSON文件在Leaflet中绘制标记:

 [{
"id": 1,
"date": "1/1/2015",
"Title": "Trinity College",
"Latitude": 41.745167,
"Longitude": -72.69263}, 
  {
    "id": 2,
    "date": "1/2/2015",
    "Title": "Wesleyan University",
    "Latitude": 41.55709,
    "Longitude": -72.65691
  },{...}]

我正在做的是以下内容：

      var markers = new L.markerClusterGroup(); //clustering function

  var markerList = [];

  for (var i = 0; i < jsonDataObject.length; i++) {
    var marker = L.marker(L.latLng(parseFloat(jsonDataObject[i].Latitude), parseFloat(jsonDataObject[i].Longitude)));
    marker.bindPopup(jsonDataObject[i].Title );
    markerList.push(marker);
      }
      markers.addLayers(markerList);
      map.addLayer(markers);

但是，由于我要为每个单独的标记添加额外的功能，我想为每个标记添加“点击”事件，并在此函数中访问每个标记的JSON属性。例如：

marker.on('click', onClick_Marker)

function onClick_Marker(e) {
        popup = L.popup()
        .setContent("The number id is: " + e.id)
        .openOn(map);
    }

如何在弹出窗口中访问JSON文件中的各个属性？

提前感谢！ :)

- sibams

Answer 1

既然您已经为每个标记创建了弹出窗口，您就可以将JSON数据嵌入其内容。

但是如果由于某种原因您无法这样做，您只需从您创建的Leaflet标记中引用您的JSON数据，方法如下：

Leaflet: Including metadata with CircleMarkers

在循环内部，使用其中的任何一种方法将jsonDataObject[i]附加到marker上。

然后，在您的"click"处理程序中，您点击的标记可以通过e.target.myJsonData、e.target.options.myJsonData或e.target.getProps().myJsonData来检索，具体取决于您如何附加JSON数据。

例如：

var jsonDataObject = [{
    "id": 1,
    "date": "1/1/2015",
    "Title": "Trinity College",
    "Latitude": 41.745167,
    "Longitude": -72.69263
  },
  {
    "id": 2,
    "date": "1/2/2015",
    "Title": "Wesleyan University",
    "Latitude": 41.55709,
    "Longitude": -72.65691
  }
];

var map = L.map('map').setView([41.65, -72.67], 9);

for (var i = 0; i < jsonDataObject.length; i++) {
  var marker = L.marker(L.latLng(parseFloat(jsonDataObject[i].Latitude), parseFloat(jsonDataObject[i].Longitude)));
  marker.bindPopup(jsonDataObject[i].Title, {
    autoClose: false
  });
  map.addLayer(marker);
  marker.on('click', onClick_Marker)
  // Attach the corresponding JSON data to your marker:
  marker.myJsonData = jsonDataObject[i];
}

function onClick_Marker(e) {
  var marker = e.target;
  popup = L.popup()
    .setLatLng(marker.getLatLng())
    .setContent("The number id is: " + marker.myJsonData.id)
    .openOn(map);
}

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<div id="map" style="height: 180px"></div>

- ghybs