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 - 如何从server_JS获取client_JS上的JSON数组?

javascript - 中值 JS 函数。错误的

javascript - 为什么我要在常规 Web 应用程序中使用输入类型日期?

javascript - 为什么 jest.useFakeTimers 不适用于 RxJs Observable 延迟

php - 解决多个 jQuery 文件之间的冲突

angularjs - 无法让传单弹出窗口与 angularjs 指令(和部分)一起使用

javascript - 如何在使用 Leaflet.Draw 绘制多边形时更改第一个顶点的颜色?

r - R-shiny : 100% height of leaflet map 中的传单

html - 修复具有两个固定位置父项的 leafletjs map div

javascript - 传单中的 EPSG 转换