使用Leaflet Web地图叠加层实现CSS不显示多个复选框

Question

我正在使用Materialize 0.97.7与Leaflet 1.0.1(最新)

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css">

当我尝试创建一个带有多个复选框以覆盖项目的叠加层时,不会出现任何复选框,只有标签可用作切换但我需要复选框或开关.如果我将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

任何人都可以提供修复吗？

谢谢

Answer 1

看起来Materialise CSS 中的视觉复选框是由 Materialize CSS 创建的工件，位于<label>输入的标签内，而实际的复选框<input type="checkbox" />是隐藏的。

这就是 Leaflet Layers Control 所发生的情况：被<input>隐藏起来，但由于 Leaflet 没有将<label>其与属性相关联<input>（或者至少不是 Materialize CSS 所期望的方式），Materialize CSS 没有占位符来创建视觉替换。

至于您的评论，我不确定您是否可以如此轻松地从样式表中“选择退出”。在您的具体情况下，您可以尝试覆盖 Leaflet 复选框的 Materialise CSS 规则，以避免它们被隐藏：

input[type="checkbox"].leaflet-control-layers-selector {
  position: inherit;
  left: inherit;
  opacity: inherit;
}

演示： https: //jsfiddle.net/3v7hd2vx/289/

然而，你的评论的最后一部分确实是可行的，并且可以导致一个更有趣的结果：Leaflet 代码结构的优点之一是你可以很容易地扩展它的类，甚至只是重写一些方法。

例如，请参阅扩展传单：类理论教程。

在你的情况下，只需要确保有一个<label>与 Layers Control 正确关联的<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 <label> to the <input>.
    var id = input.id = 'leaflet-layers-control-layer-' + input.layerId;

    L.DomEvent.on(input, 'click', this._onInputClick, this);

    // Use a <label> instead of a <span>.
    var name = document.createElement('label');
    name.innerHTML = ' ' + obj.name;
    name.setAttribute('for', id); // Associate the <label> to the <input>.

    var holder = document.createElement('div');

    label.appendChild(holder);
    holder.appendChild(input);
    holder.appendChild(name);

    var container = obj.overlay ? this._overlaysList : this._baseLayersList;
    container.appendChild(label);

    this._checkDisabledLayers();
    return label;
  }
});

（大部分代码只是从原始方法复制而来，实际上只有 3 行插入或修改，如注释所示）

演示： https: //jsfiddle.net/3v7hd2vx/288/

这样，您就可以让 Materialise CSS 完成其工作并创建复选框替换，这样结果就是您通过将该库包含到页面中所期望的结果。

使用 Materialise CSS 开关而不是复选框进行演示：https://jsfiddle.net/3v7hd2vx/290/

（与上面类似的方法覆盖概念，但稍微复杂一些，因为您需要用 of 类包装整个and并<label>添加额外的占位符）。<input><div>"switch""lever"