唯一识别传单标记 [英] Uniquely identifying Leaflet Markers

问题描述

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

I've done some research on this topic before, but I have yet to find an answer to my particular question. I am currently working with Leaflet.js. Each marker has popup text that is pulled from a MySQL database. However, some of this data does not display in the popup and is only associated with the marker.

我想做的是每当单击一个特定的标记时，与其关联的数据都会在弹出窗口以外的位置(即DIV)中回显.

What I would like to do is whenever a particular marker is clicked, data that is associated with it is echoed in a location other than in the popup (ie. in a DIV).

有没有一种方法可以唯一地标识标记，以便您可以提取与其关联的数据并在其他地方回显它?

Is there a way to uniquely identify a marker so that you can pull data that is associated with it and echo it elsewhere?

修改: 这是一些使事情变得更清楚的代码:

Here's some code to make things a bit clearer:

以下是我的一些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.

Basically I pull the data via PHP and then encode it into JSON.

另外，谢谢您的帮助，伙计们！ :)

Also, thank you for your help, guys!! :)

推荐答案

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

You can try adding a custom attribute to the marker and then get that attribute in the onClick event:

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

关于JSFiddle的示例

这篇关于唯一识别传单标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！