javascript - 如何在显示或隐藏 Leaflet LayerGroup 时获得通知?

标签 javascript leaflet dom-events onclicklistener

我想在用户单击图层控件中的“城市”复选框时收到通知 - 这会显示或隐藏 linked example 中的城市标记.这是一个 JSFiddle一起玩。

Leaflet screenshot

我看到了LayerGroup派生出一些events from FeatureGroup .如果我错了,请纠正我:据我所知,显示和隐藏标记与 layeradd 不同。和 layerremove ?!

input 元素没有要绑定(bind)到的 id:

<label>
    <input class="leaflet-control-layers-selector" type="checkbox" checked="">
    <span> Cities</span>
</label>

当切换标记的可见性时如何通知我?

最佳答案

您可以使用 jQuery 来选择输入元素,使用它的类:

$('.leaflet-control-layers-selector').click(function(){
    alert('something')
});

此外,如果您有多个图层,则可以通过单击其中一个复选框来检查 map 是否包含图层。

$('.leaflet-control-layers-selector').click(function(){
    if(map.hasLayer(cities)) alert('something');
});

更新

您还可以使用 map 事件 overlayadd 和 overlayremove,如下所示:

map.on({
    overlayadd: function(e) {
        if (e.name === 'Cities') alert('added');
    },
    overlayremove: function(e) {
        if (e.name === 'Cities') alert('removed');
    }
});

这是您示例的更新后的 JSFiddle:http://jsfiddle.net/pufanalexandru/g54efr69/1/

关于javascript - 如何在显示或隐藏 Leaflet LayerGroup 时获得通知?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29447875/

相关文章:

javascript - 如何优化此 javascript 函数以提高速度?

javascript - Javascript this 对象的替代品

javascript - 检查传单 map 上的位置是否是标记

Javascript jQuery post()/get() JSON 对象作为文档准备好之前的闭包函数

javascript - 如何创建多个对象,每个对象加载相同的页面但在 javascript 中具有不同的数据?

javascript - 将 svg 文本与 d3.js 图例对齐

javascript - 如何使用 AMD 和 RequireJS 从 JavaScript 访问导出的 TypeScript 类

javascript - 在 Vue2Leaflet 中扩展 LMarker

javascript - Leaflet + noWrap 选项在 1.x 以上版本中不起作用

javascript - 将 html 事件绑定(bind)到函数