javascript - 扩展 L.Control.Layers 悬停失败

标签 javascript leaflet

Fiddle

我想延长L.Control.Layers因为我希望能够通过选项更改图标。这是到目前为止的元素:

var layers = L.Control.Layers.extend({

    options: {
        position: 'topright',
        icon: 'podcast',
    },

    initialize: function (options) {
        L.setOptions(this, options);
        L.Control.Layers.prototype.initialize.call(this, options);
    },

    onAdd: function (map) {
        var container = L.Control.Layers.prototype.onAdd.call(this, map);
        container.classList.add('st-control-layers');
        container.childNodes[0].innerHTML = '<center><span style="margin-top:4px;" class="fa fa-2x fa-' +
                                            this.options.icon + '"></span></center>';
        return container;
    },
});

不修改<a>的事件childNode,当鼠标悬停在控件上时,它会折叠,但不显示图层列表:

var stLayerControl = layers(null, {'one': L.layerGroup()}).addTo(this);  // 'this' is a map 

检查元素时,我可以看到 <form>存在并且有 3 个 div 为正常 Control.Layers然而,最后一个 div(类为 leaflet-control-layers-overlays )应该具有复选框数组,但没有子节点。

也许我需要在我的 onAdd() 中调用父级上的其他内容方法,但我不确定它会是什么。

最佳答案

我没有将收到的图层传递给父级,这就是列表为空的原因。这是扩展控件的工作版本:

var layers = L.Control.Layers.extend({

    options: {
        position: 'topright',
        icon: 'podcast',
    },

    initialize: function (baseLayers, overlays, options) {
        L.setOptions(this, options);
        L.Control.Layers.prototype.initialize.call(this, baseLayers, overlays, options);
    },

    onAdd: function (map) {
        var container = L.Control.Layers.prototype.onAdd.call(this, map);
        container.classList.add('st-control-layers');
        container.childNodes[0].innerHTML = '<center>' +
                                            '<span style="margin-top:4px;" class="fa fa-2x fa-' +
                                            this.options.icon + '"></span>' +
                                            '</center>';
        return container;
    },
});

module.exports = {
    Layers: layers,
    layers: function(baseLayers, overlays, options) {
        return new layers(baseLayers, overlays, options);
    },
};

关于javascript - 扩展 L.Control.Layers 悬停失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42494148/

相关文章:

javascript - 初始化后无法让 amsul timepicker 更新禁用时间

javascript - 如何在传单 map 上绘制标记

javascript - Mapbox Leaflet 将弹出窗口添加到 GeoJson

javascript - LeafletJs GeoMan 多边形编辑

php - 读取和写入cookie

javascript - 这两个自调用函数有什么区别

javascript - 如何选择另一个元素内的一个元素?

javascript - 如果我为我的 React 应用程序使用数据库,redux 有什么用?

javascript - 如何在js单张中添加多个自定义控件按钮?

javascript - leaflet.draw 中的 "Cancel"按钮触发了什么功能/事件?