提取传单中标记的属性，onClick 事件答案

【问题标题】：Extract attributes for markers in leaflet, onClick event提取传单中标记的属性，onClick 事件
【发布时间】：2018-06-14 11:35:43
【问题描述】：

我正在使用 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 文件中的各个属性？

提前致谢！ :)

【问题讨论】：

标签： javascript leaflet

【解决方案1】：

由于您已经为每个标记创建了弹出窗口，因此您已经可以将 JSON 数据嵌入到其内容中。

但是，如果出于某种原因您无法做到这一点，您只需引用您创建的传单标记中的 JSON 数据，如下所述：

Leaflet: Including metadata with CircleMarkers

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

然后在您的"click" 处理程序中，您单击的标记可作为e.target 访问，然后根据您附加JSON 数据的方式，您可以使用e.target.myJsonData、e.target.options.myJsonData 或e.target.getProps().myJsonData 检索它。

例如：

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>

【讨论】：