我希望能够在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来更改弹出内容。

语法

最佳答案

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

它们“简单”(对于您而言,用纯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/

关于javascript - leafletjs如何获取事件弹出/标记的句柄,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34504816/

10-14 21:00
查看更多