在layerGroup上打开传单弹出窗口

Question

我试图使用L.GeoJSON(data).addTo(map)在传单地图上绘制国家形状。 然后我想将弹出窗口绑定到该国家/地区形状的click事件...

new L.GeoJSON(data, {
  onEachFeature: function(feature, layer) {
    layer['on']('click', popupFunction);
  }
}).addTo(this.map);


popupFunction = function(event) {
  var layer = event.target;

  // Open the 'add' popup and get our content node
  var bound = layer.bindPopup(
    "<div>Hello World!</div>"
  ).openPopup();

  // Ugly hack to get the HTML content node for the popup
  // because I need to do things with it
  var contentNode = $(bound['_popup']['_contentNode']);
}

现在，当数据是单个多边形时，这可以正常工作，因为传递给onEachFeature函数的layer属性就是：一个图层。

但是，如果data是多面（即美国），则停止工作，因为“ layer ”现在是一个layerGroup（它具有_layers ）属性，因此没有_popup属性，因此我无法获得弹出窗口的_contentNode 。

看起来这应该是很常见的事情，想要在layerGroup上弹出一个。 为什么它没有_popup属性？

Answer 1

首先，您应该能够以与使用Leaflet教程使用GeoJSON类似的方式绑定popUp。 像这样的东西：

var geoJsonLayer = L.geoJson(data, {
  onEachFeature: function(feature, layer) {
    layer.bindPopup('<div>Hello World!</div>');
  }
}).addTo(map);

如何进一步处理你的popUps取决于你的用例。 也许这对你来说已经足够了：

geoJsonLayer.eachLayer(function(layer) {
  var popUp = layer._popup;
  // process popUp, maybe with popUp.setContent("something");
});

希望这可以帮助..

Answer 2

简短回答：layergroup不支持弹出窗口

计划B：

您应该考虑使用FeatureGroup ，它扩展了LayerGroup并具有bindPopup方法，这是一个示例

 L.featureGroup([marker1, marker2, polyline]) .bindPopup('Hello world!') .on('click', function() { alert('Clicked on a group!'); }) .addTo(map); 

Answer 3

你不能将L.Popup绑定到L.Layer以外的任何东西，因为弹出窗口会有一些坐标可以锚定。

对于L.Marker，它将是位置（L.Latlng），对于L.Polygon，它将是中心（查看代码以了解它是如何计算的）。

至于其他情况（和你的一样），你可以打开一个弹出窗口但是你必须决定弹出窗口的打开位置：

var popup = L.popup()
    .setLatLng(latlng)
    .setContent('<p>Hello world!<br />This is a nice popup.</p>')
    .openOn(map);

Answer 4

我使用此代码打开图层组中的所有弹出窗口：

markers.eachLayer(marker => marker.openPopup());

在处理图层组时，您可能需要考虑在绑定弹出窗口时传递{ autoClose: false, closeOnClick: false }选项，因此弹出窗口不会在打开新弹出窗口时关闭，或者如果用户点击地图：

marker.bindPopup(item.name, { autoClose: false, closeOnClick: false });