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/

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

1 个答案: