【问题标题】:Uniquely identifying Leaflet Markers唯一识别传单标记
【发布时间】:2015-10-22 07:25:04
【问题描述】:

我之前已经对此主题进行了一些研究,但我还没有找到我的特定问题的答案。我目前正在使用 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。

另外,谢谢你们的帮助,伙计们!! :)

【问题讨论】:

  • 您有可以指向的网站以便更好地理解吗?我是 java 脚本和传单的新手,但是我本周一直在使用它,做的和我想的完全一样。但如果你能提供更多信息或例子,我会确切地知道你的意思。也请看这里:google.co.uk/?gws_rd=ssl#q=leaflet.js+github+examplesgithub 上有所有预编码的示例。它对我帮助很大。
  • @Birdy,我还没有网站(我在本地工作),但我可以向您展示我的一些代码!我刚刚编辑了我的问题。

标签: javascript php mysql json leaflet


【解决方案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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2022-11-30
    • 2020-09-04
    • 2021-02-20
    • 1970-01-01
    • 2013-01-21
    • 2011-08-25
    • 2019-05-24
    • 1970-01-01
    相关资源
    最近更新 更多