leafletjs如何获取活动弹出/标记的句柄 [英] leafletjs how to get a handle to the active pop/marker

问题描述

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

I am want to be able to change the content of a popup on a leafletjs map. I have have hundreds of markers each with their own popup, they are loaded in a for loop from an array.

    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来完成所有这些操作，但这破坏了我想工作的弹出窗口的大小.

That makes a popup with a picture and a button. When the button is clicked I want the button to go away being replaced by a loading gif. While an AJAX function asks the sever for a few things, once it gets the data from the sever, it should change content again. I can do all of that with the id on the div, but that breaks the re-sizing of the popup, which I would like to work.

myPopup._updateLayout()

可以用来强制其调整大小，但是如何告诉我要在哪个myPopup上运行?

can be used to force it to resize, but how do I tell it which is myPopup to work on?

我了解 setContent 是更新弹出窗口的正确方法，但同样，如何我该告诉它哪个弹出窗口是我要处理的活动窗口吗?

I understand setContent is the proper way to update the popup, but again, how do I tell it which popup is the active one that I want to work on?

如何在popupopen事件中识别标记?这看起来很有希望，但是我还没有弄清楚如何使用以这种方式设置的ID来更改弹出内容.

How to identify Marker during a popupopen event? That looks promising, but I have not figured out how to use the id that is set that way to change the popup content.

语法.

推荐答案

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

You would have several options to keep a reference to the popup in which the clicked button is contained.

简单"的一种(对于您来说，用纯HTML文本(包括按钮HTML)填充弹出式内容)是保留每个弹出式/标记的映射，其中的键是一种ID，然后将该ID传递给您的weatherload函数.

They "easy" one (for your case where you fill the popup content with plain HTML text, including your button HTML) would be to keep a mapping of each popup / marker, with the keys being a kind of ID, then pass that ID to your weatherload function.

如果仅保留对标记的引用，则可以使用 getPopup()来检索绑定的弹出窗口.方法.

If you keep a reference to the marker only, you can retrieve the bound popup using 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元素.这样，您可以将弹出窗口直接绑定为按钮的属性.

A more complex solution (but which gives you more control) would be to create the HTML elements that will be in your popup. That way, you can directly bind your popup as a property of your button.

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

这篇关于leafletjs如何获取活动弹出/标记的句柄的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！