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是多字形（即美国），则会停止工作，因为＆＃34; layer＆＃34;现在是一个layerGroup（它具有_layers）属性，因此没有_popup属性，因此我无法获得弹出窗口的_contentNode。

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

Answer 1

首先，您应该能够以与Using GeoJSON with Leaflet教程类似的方式绑定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，它将是中心（查看the code以了解它是如何计算的。）

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

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 });

在layerGroup上打开传单弹出窗口

4 个答案: