在layerGroup上打开一个传单弹出窗口 [英] Opening a leaflet popup on a layerGroup

查看:38
本文介绍了在layerGroup上打开一个传单弹出窗口的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I am trying to draw country shapes on a leaflet map using L.GeoJSON(data).addTo(map). I then want to bind a popup to the click event of that country shape...

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 属性就是这样:

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.

然而,如果 data 是一个多边形(即美国),这将停止工作,因为layer"现在是一个 layerGroup(它有一个 _layers)属性,因此没有 _popup 属性,因此我无法获得弹出窗口的 _contentNode .

However if the data is a multipolygon (i.e. 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.

这似乎是很普通的事情,想要在layerGroup上弹出一个窗口.为什么没有 _popup 属性?

It seems like this should be quite a common thing, wanting a popup on a layerGroup. Why does it have no _popup attribute?

推荐答案

简短答案:图层组不支持弹出窗口

short answer: layergroup does not support popup

计划B:

您应该考虑使用 FeatureGroup ,它扩展了

you should consider using FeatureGroup, it extends LayerGroup and has the bindPopup method and this is an example

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

这篇关于在layerGroup上打开一个传单弹出窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆