javascript - leafletjs 如何获取事件弹出/标记的句柄

Question

我希望能够更改 leafletjs map 上弹出窗口的内容。我有数百个标记，每个标记都有自己的弹出窗口，它们从数组加载到 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检索绑定(bind)的弹出窗口。 .

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 元素。这样，您可以直接将弹出窗口绑定(bind)为按钮的属性。

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