如何在“popupopen”事件期间识别 Leaflet 的标记？

Posted 2023-02-16

【中文标题】如何在“popupopen”事件期间识别 Leaflet 的标记？

【英文标题】：How to identify Leaflet's Marker during a `popupopen` event?

【发布时间】：2012-09-23 22:52:12

【问题描述】：

当一个标记被点击时，我需要执行一些代码来找到与被点击的标记相对应的id，从后端API检索数据，然后将新检索到的数据添加到弹出窗口的content打开。

能够监听标记上的点击事件的唯一方法是

map.on('popupopen', function(e)
    // How to retrieve marker?
    // eg: Assign an id on creation, retrieve it now during popupopen
;)

我怎样才能知道这是哪个标记？是否可以为每个标记添加id 属性，然后在popupopen 事件期间检索此id？

【问题讨论】：

leaflet.cloudmade.com/reference.html#marker L.Marker 放置在地图上：marker.addTo(map)。我可以将id 值传递给每个marker 对象。这应该如何完成，以及如何在popupopen 事件期间稍后检索此id？

创建标记时，我会执行var marker = new L.marker( new L.LatLng( lat, lng )); 然后marker.setContent(content).addTo(map) 之类的操作。

【参考方案1】：

事件对象包含一个“popup”属性，该属性具有一个名为“_source”的私有属性，该属性是弹出窗口绑定到的对象（即标记）。由于 _source 应该是私有的，这似乎不是正确的方法，但我不知道该怎么做。

map.on('popupopen', function(e) 
  var marker = e.popup._source;
);

【讨论】：

在打开由L.geoJson() 调用生成的弹出窗口时，我在e.popup._source 上收到undefined。有什么线索吗？

我目前的dirty解决方案是在onEachFeature 的弹出内容中包含<div>，然后在...e.target._popup._contentNode.childNodes[0].attributes[0] 上查找它。是的，很脏，但它有效。 呼

【参考方案2】：

javascript 对象可以定义任何属性。创建弹出窗口时，将 popup.marker 设置为引用的标记。然后您可以稍后在事件处理程序中访问它。

【讨论】：

好主意，因为在我的例子中 e.popup._source 是 null

这个答案可以说比接受的答案更好，因为e.popup._source 确实可能会丢失，例如，如果以编程方式打开/关闭弹出窗口（而不是单击）。

【参考方案3】：

要获取标记 id，您可以使用以下代码：

map.on('popupopen', function(e) 
  var marker = e.popup._source.feature.properties.markerid;
);

【参考方案4】：

其他答案无效，但可以：

map.on('popupopen', function(e)  alert(e.popup._source._popup._content); );

猜想这个库非常不稳定......我不知道为什么首先传输这些信息会如此复杂。