如何在BindPopup上获取内容 [英] How to get contents on BindPopup

问题描述

我试图在单击事件中获取标记的.bindPopup内容，以便将其保存到localStorage.但这不适用于每个标记.

I am trying to get marker's .bindPopup content on click event so I can save it to localStorage. But it is not working properly for each marker.

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

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

it would work on first click but on the second click on different marker, it will take the data from the first marker that i clicked instead of the second marker. In this case i have to click somewhere else on the map or click the popup close button first before i can click on the next marker to properly get the data. is there any fix on this?

推荐答案

问题:您在功能中仅选择该类的首次出现(而不是单击的子项)

PROBLEM: you are selecting in your function only the first appearance of the class (not the clicked ones child) at

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

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

SOLUTION 1 (NOT RECOMMENDED): You should use the this keyword, and the getPopup() and getContent() methods instead, your function should look something like:

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

这样，您将获得转义的html，因此，一种更好而正确的方法是...

This way you'll get the escaped html, so a much better and proper way is...

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

SOLUTION 2 (RECOMMENDED): if you store the necessary data in the markers options (instead of storing and getting html from popup), like this:

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

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

Then you can access this options in your function this way:

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

再次工作小提琴.

编辑:我已经找到了所需逻辑的解决方法.但是，仍然需要链接标记及其弹出内容，因为: 弹出式内容不是DOM中的节点，因此您无法在通过用户单击打开它之前对其进行访问.

I have found a workaround for the desired logic. But still, you need to link the marker and its popup content, because: Popup content is not a node in the DOM, so you cannot access it before it is opened with a user click.

因此，在我的解决方案中，我在标记选项 (divId:int) 中存储了一个简单的整数，这是标记的唯一ID.在弹出内容中，无线电输入具有与所需字符串连接的相同ID(<输入类型=无线电" ID ="Item-10-0&" 名称="Item-10"; value ="0" checked ="").

So in my solution i store a simple integer in the marker options (divId: int), which is the unique id of the marker. In the popup content, the radio inputs have the same id concatenated with the desired string (<input type="radio" id="Item-10-0" name="Item-10" value="0" checked="">).

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

如果用户单击，则新节点已经可以访问，因此您可以选择它并使用其ID和值.

If the user clicks, the new node is already accessible, so you can select it and use its id and value.

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

小提琴.

这篇关于如何在BindPopup上获取内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！