如何在 BindPopup 上获取内容

Question

我正在尝试在单击事件时获取标记的 .bindPopup 内容，以便将其保存到 localStorage。但它对每个标记都无法正常工作。

 L.marker([76.920614, -60.117188])
 .addTo(map)
 .bindPopup('<div><span class="claimed">DATA 1</span></div>')
 .on('click', groupClick);

 L.marker([77.841848, -31.289063])
 .addTo(map)
 .bindPopup('<div><span class="claimed">DATA 2/span></div>')
 .on('click', groupClick)

 function groupClick(event) {
   var a = document.querySelector('.claimed').innerHTML;
   console.log(a);
 }

它会在第一次点击时起作用，但在第二次点击不同的标记时，它将从我点击的第一个标记而不是第二个标记中获取数据。在这种情况下，我必须先单击地图上的其他位置或单击弹出式关闭按钮，然后才能单击下一个标记以正确获取数据。有什么解决办法吗？

Answer 1

问题： 您 select 在您的函数中 只是 class 的第一次出现 （不是点击的 child）在

 var a = document.querySelector('.claimed').innerHTML;

解决方案 1（不推荐）： 您应该使用 this 关键字，以及 getPopup() 和 getContent() 方法，您的函数应该类似于：

function groupClick(event) {
   var a = this.getPopup().getContent();
   console.log(a);
}

这样你会得到转义的html，所以更好更正确的方法是...

解决方案 2（推荐）： 如果您将必要的数据存储在标记选项中（而不是从弹出窗口中存储和获取 html），如下所示：

 L.marker([40, 12], {data: 1, datastring: 'first'})
   .addTo(map)
   .bindPopup('ONE')
   .on('click', groupClick);

然后您可以通过以下方式在您的函数中访问此选项：

function groupClick(event) {
   var a = this.options.data + ' ' + this.options.datastring;
   alert(a);
 }

又是一个working fiddle。

编辑： 我找到了所需逻辑的解决方法。但是，您仍然需要 link 标记及其弹出内容，因为： 弹出内容不是 DOM 中的节点，因此在用户单击打开之前无法访问它。

所以在我的解决方案中，我在标记选项 (divId: int) 中存储了一个简单的整数，这是标记。在弹出内容中，无线电输入具有与所需字符串连接的相同 id (name="Item-10 " 值="0" 选中="">).

L.marker([40, 32], {
     divId: 10
   })
   .addTo(map)
   .bindPopup('<div id="2div" class="popup-todo"><input type="radio" id="Item-10-0" name="Item-10" value="0" checked=""><label for="Item-10-0">Claimed</label><input type="radio" id="Item-10-1" name="Item-10" value="1"><label for="Item-10-1">Unclaimed</label></div>')
   .on('click', groupClick);

如果用户点击，新节点已经可以访问，所以你可以select它并使用它的id和值。

function groupClick(event) {
    var a = document.querySelector('input[name=Item-'+this.options.divId+']');
    document.querySelector('#demo').innerHTML = a.id + ' ' + a.value;
 }

fiddle.

如何在 BindPopup 上获取内容

How to get contents on BindPopup

leaflet