leafletjs 如何获取活动句柄 pop/marker

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

您将有多种选择来保留对包含单击按钮的弹出窗口的引用。

他们 "easy" 一个（对于你用纯 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/

leafletjs 如何获取活动句柄 pop/marker

leafletjs how to get a handle to the active pop/marker

javascript

popup

leaflet