我正在使用Materialize 0.97.7与Leaflet 1.0.1(最新)
当我尝试创建一个带有多个复选框以覆盖项目的叠加层时,不会出现任何复选框,只有标签可用作切换但我需要复选框或开关.如果我将CSS cdn切换到另一个框架,例如Bootstrap,它们会出现.
在有人感兴趣的情况下,用于剥离的传单代码:
http://leafletjs.com/reference-1.0.0.html#layergroup
// items to toggle
var myItems = new L.LayerGroup();
// bind popup to each item once checkBox is selected
L.marker([lat,lon]).bindPopup('Item').addTo(myItems);
// create overlays multi-checkBox selection
var overlays = {
Items = myItems
};
// add overlays to the web-map
L.control.layers(null,overlays).addTo(map);
这显然不是Leaflet问题,因为它适用于其他CSS
任何人都可以提供修复吗?
谢谢
这就是Leaflet图层控件所发生的事情:< input>被隐藏起来,但由于Leaflet没有关联正确的<标签>那个< input> (或者至少,不是Materialize CSS期望它的方式),Materialize CSS没有占位符来创建视觉替换.
至于你的评论,我不确定你能否从样式表中轻易“退出”.在您的特定情况下,您可以尝试覆盖Leaflet复选框的Materialize CSS规则,以避免它们被隐藏:
input[type="checkBox"].leaflet-control-layers-selector {
position: inherit;
left: inherit;
opacity: inherit;
}
演示:https://jsfiddle.net/3v7hd2vx/289/
但是,评论的最后一部分确实可行,并且可以产生更有趣的结果:Leaflet代码结构的一个优点是你可以很容易地扩展它的类甚至只是覆盖一些方法.
例如,请参阅Extending Leaflet: Class Theory教程.
在您的情况下,这只需要确保有一个正确的<标签>与图层控件关联< input type =“checkbox”/>:
L.Control.Layers.include({
_addItem: function(obj) {
var label = document.createElement('label'),checked = this._map.hasLayer(obj.layer),input;
if (obj.overlay) {
input = document.createElement('input');
input.type = 'checkBox';
input.className = 'leaflet-control-layers-selector';
input.defaultChecked = checked;
} else {
input = this._createRadioElement('leaflet-base-layers',checked);
}
input.layerId = L.stamp(obj.layer);
// Create an explicit ID so that we can associate a
(大多数代码只是从original method重复,实际上只有3个插入或修改过的行,如注释所示)
演示:https://jsfiddle.net/3v7hd2vx/288/
有了这个,你让Materialise CSS完成它的工作并创建复选框替换,这样结果就是你可能通过将该库包含到页面中而获得的结果.
使用Materialize CSS开关而不是复选框进行演示:https://jsfiddle.net/3v7hd2vx/290/
(类似的方法覆盖了上面的概念,但稍微复杂一点,因为你需要用< div>类“switch”包装整个< label>和< input>并添加一个额外的“杠杆”占位符).