我之前对这个主题做过一些研究,但我还没有找到我的特定问题的答案。我目前正在使用 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。
另外,谢谢你们的帮助,伙计们! :)
最佳答案
您可以尝试向标记添加自定义属性,然后在 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);
关于javascript - 唯一识别传单标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31732215/