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

问题描述

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

I'm using a JSON file to plot the markers in 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
  },{...}]

我正在做的是以下事情:

What I'm doing is the following:

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

但是，因为我将为每个单独的标记添加额外的功能，所以我想为每个标记添加"click"事件，并在此函数中访问每个标记的JSON属性.例如:

However because I'll add extra functionalities for each individual markers, I want to add 'click' event for each marker and in this function accessing the JSON attributes for each marker. For example:

marker.on('click', onClick_Marker)

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

如何在弹出窗口中从JSON文件获取访问各个属性?

How to get access individual attributes, from the JSON file, in a pop-up window?

提前谢谢！ :)

推荐答案

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

Since you already create a Popup for each Marker, you could already embed your JSON data into its content.

但是，如果由于某种原因而无法执行此操作，则只需从创建的Leaflet Markers中引用，如下所述:

But if for whatever reason you cannot do it, you just have to reference your JSON data from your created Leaflet Markers, as described in:

传单:包括带有CircleMarkers的元数据

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

Within your loop, use any of the 3 described methods to attach your jsonDataObject[i] to your marker.

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

Then in your "click" handler, your clicked Marker is accessible as e.target, then depending on how you attached your JSON data, you can retrieve it with e.target.myJsonData, e.target.options.myJsonData or 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/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

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

这篇关于提取传单，onClick事件中标记的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！