独特标识Leaflet标记

Question

我之前对这个话题进行了一些研究，但是我还没有找到我的特定问题的答案。我目前正在使用Leaflet.js。每个标记都有弹出文本，该文本从MySQL数据库中提取。然而，其中一些数据不会在弹出窗口中显示，而只与标记相关联。

我想做的是，每当单击特定标记时，与它相关联的数据就会在其他位置上（如DIV中）回显。

是否有一种方法可以唯一地识别一个标记，以便您可以提取与它相关联的数据并将其回显到其他地方？

编辑： 以下是一些代码，以使事情更加清晰：

这是我的JS的一部分：

var json_data = <?php echo json_encode($data); ?>;

for (var i = 0; i < json_data.length; i++) {
    L.marker([json_data[i].latitude, json_data[i].longitude])
    .bindPopup(json_data[i].firstName + ' ' + json_data[i].lastName + '<br>' + '<strong>Date:</strong>' + ' ' + json_data[i].dateOccurred)
    .addTo(map);
  }

这是我的 PHP 代码：

$query = "SELECT * FROM incident, victim WHERE incident.incidentID = victim.incidentID";
//converting the data from mySQL to PHP

$data = array(); //setting up an emtpy PHP array for the data to go into

if($result = mysqli_query($db,$query)) {
  while ($row = mysqli_fetch_assoc($result))
  {
    $data[] = $row;
  }
}
?>

基本上我通过PHP获取数据，然后将其编码为JSON格式。

另外，感谢你们的帮助!! :)

- sleepy_daze

---

你有一个可以指向的网站以便更好地理解吗？我是一个 JavaScript 和 Leaflet 的新手，但是这个星期我一直在做和你一样的事情。但如果你能提供更多信息或示例，我就会明白你的意思。另外，请参见此处：https://www.google.co.uk/?gws_rd=ssl#q=leaflet.js+github+examples 这里有 GitHub 上的预编码示例...它对我帮助很大。 - Birdy

@Birdy，我还没有上线网站（我正在本地工作），但是我可以给你展示一些我的代码！我刚刚编辑了我的问题。 - sleepy_daze

Answer 1

您可以尝试向标记添加自定义属性，然后在onClick事件中获取该属性：

//Handle marker click
var onMarkerClick = function(e){
    alert("You clicked on marker with customId: " +this.options.myCustomId);   
}
//Create marker with custom attribute
var marker = L.marker([36.83711,-2.464459], {myCustomId: "abc123"});
marker.on('click', onMarkerClick);

Example on JSFiddle

- gusjap