[英]Opening a leaflet popup on a layerGroup
I am trying to draw country shapes on a leaflet map using L.GeoJSON(data).addTo(map)
. 我试图使用
L.GeoJSON(data).addTo(map)
在传单地图上绘制国家形状。 I then want to bind a popup to the click event of that country shape... 然后我想将弹出窗口绑定到该国家/地区形状的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']);
}
Now this works fine when the data is a single polygon, because then the layer
attribute passed to the onEachFeature function is just that: a layer. 现在,当数据是单个多边形时,这可以正常工作,因为传递给onEachFeature函数的
layer
属性就是:一个图层。
However if the data
is a multipolygon (ie the US) this stops working because the " layer
" is now a layerGroup (it has a _layers
) attribute and therefore has no _popup
attribute and so I can't get the _contentNode
for the popup. 但是,如果
data
是多面(即美国),则停止工作,因为“ layer
”现在是一个layerGroup(它具有_layers
)属性,因此没有_popup
属性,因此我无法获得弹出窗口的_contentNode
。
It seems like this should be quite a common thing, wanting a popup on a layerGroup. 看起来这应该是很常见的事情,想要在layerGroup上弹出一个。 Why does it have no
_popup
attribute? 为什么它没有
_popup
属性?
First of all, you should be able to bind popUp in similar way to Using GeoJSON with Leaflet tutorial. 首先,您应该能够以与使用Leaflet教程使用GeoJSON类似的方式绑定popUp。 Something like this:
像这样的东西:
var geoJsonLayer = L.geoJson(data, {
onEachFeature: function(feature, layer) {
layer.bindPopup('<div>Hello World!</div>');
}
}).addTo(map);
How to further process your popUps depends on your usecase. 如何进一步处理你的popUps取决于你的用例。 Maybe this can be enough for you:
也许这对你来说已经足够了:
geoJsonLayer.eachLayer(function(layer) {
var popUp = layer._popup;
// process popUp, maybe with popUp.setContent("something");
});
Hope this helps.. 希望这可以帮助..
short answer: layergroup does not support popup 简短回答:layergroup不支持弹出窗口
plan B: 计划B:
you should consider using FeatureGroup , it extends LayerGroup and has the bindPopup method and this is an example 您应该考虑使用FeatureGroup ,它扩展了LayerGroup并具有bindPopup方法,这是一个示例
L.featureGroup([marker1, marker2, polyline]) .bindPopup('Hello world!') .on('click', function() { alert('Clicked on a group!'); }) .addTo(map);
You cannot bind a L.Popup to anything else than a L.Layer because the popup will some coordinates to anchor on. 你不能将L.Popup绑定到L.Layer以外的任何东西,因为弹出窗口会有一些坐标可以锚定。
For a L.Marker it will be the position (L.Latlng), for the L.Polygon it will be the center (look at the code to see how it is calculated). 对于L.Marker,它将是位置(L.Latlng),对于L.Polygon,它将是中心(查看代码以了解它是如何计算的)。
As for the other cases (like yours), you can open a popup but you will have to decide where the popup opens: 至于其他情况(和你的一样),你可以打开一个弹出窗口但是你必须决定弹出窗口的打开位置:
var popup = L.popup()
.setLatLng(latlng)
.setContent('<p>Hello world!<br />This is a nice popup.</p>')
.openOn(map);
I used this code to open all popups in a layer group: 我使用此代码打开图层组中的所有弹出窗口:
markers.eachLayer(marker => marker.openPopup());
While dealing with layer groups, you might want to consider passing { autoClose: false, closeOnClick: false }
options while binding popup, so popups won't get closed while opening new popup, or if user clicks on the map: 在处理图层组时,您可能需要考虑在绑定弹出窗口时传递
{ autoClose: false, closeOnClick: false }
选项,因此弹出窗口不会在打开新弹出窗口时关闭,或者如果用户点击地图:
marker.bindPopup(item.name, { autoClose: false, closeOnClick: false });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.