Leafletjs如何获取活动弹出/标记的句柄

Question

我希望能够更改 Leafletjs 地图上弹出窗口的内容。我有数百个标记，每个标记都有自己的弹出窗口，它们从数组加载到 for 循环中。

    var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });
    marker.bindPopup('<img width="'+width+'" height="'+height+'"  src="'+a[3]+'"/><br><div id="weather"> <button type="button" onclick="weatherload(\''+a[0]+'\',\''+a[1]+'\')">Click Me for Weather!</button></div>',{'maxWidth':'500','maxHeight':'350','minWidth':'350'});
    CAMlayer.addLayer(marker);

这会弹出一个带有图片和按钮的弹出窗口。单击按钮时，我希望按钮消失，并被加载 gif 替换。虽然 AJAX 函数向服务器询问一些事情，但一旦从服务器获取数据，它应该再次更改内容。我可以使用 div 上的 id 完成所有这些操作，但这会破坏我想要调整的弹出窗口的大小。

myPopup._updateLayout()

可以用来强制它调整大小，但我如何告诉它哪个是 myPopup 工作？

我知道setContent 是更新弹出窗口的正确方法，但我又该如何告诉它哪个弹出窗口是我要处理的活动弹出窗口？

How to identify Marker during a popupopen event? 看起来很有希望，但我还没有弄清楚如何使用这种方式设置的 id 来更改弹出内容。

语法。

Answer 1

您将有几个选项来保留对包含单击按钮的弹出窗口的引用。

他们“简单”的一个（对于您使用纯 HTML 文本填充弹出内容的情况，包括您的按钮 HTML）将是保留每个弹出/标记的映射，键是一种 ID，然后将该 ID 传递给您的 weatherload 函数。

如果您只保留对标记的引用，则可以使用getPopup() method 检索绑定的弹出窗口。

var allMarkersMap = {};
var currentID = 0;

// Create a marker with a popup.
var button = '<button onclick="weatherload('+ lat + ',' + lng + ',' + currentID + ')">Click Me for Weather!</button>';
var marker = L.marker(lat, lng).bindPopup(permanentContent + button);
marker.myPermanentContent = permanentContent;

allMarkersMap[currentID] = marker;
currentID += 1;

// Loop to create more markers.

function weatherload(lat, lng, markerID) {
  var marker2 = allMarkersMap[markerID];
  var permanentContent2 = marker2.myPermanentContent;
  var popup = marker2.getPopup();
  // Use this to add your loading GIF. Do the same in your AJAX callback.
  popup.setContent(permanentContent2 + newContent);
}

一个更复杂的解决方案（但它给你更多的控制）是创建将在你的弹出窗口中的 HTML 元素。这样，您可以直接将弹出窗口绑定为按钮的属性。

演示：http://jsfiddle.net/ve2huzxw/95/