Materialise CSS 不显示带有 Leaflet 网络映射覆盖的多个复选框

Question

我正在使用 Materialise 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

看起来 visual checkbox from Materialize CSS 是 Materialise CSS 在您输入的 <label> 标签中创建的工件，而实际的 <input type="checkbox" /> 被隐藏了。

这就是 Leaflet 图层控件所发生的情况：<input> 被隐藏了，但是由于 Leaflet 没有将适当的 <label> 关联到 <input>（或者至少，不是 Materialise CSS 期望的方式），Materialise CSS 没有占位符来创建视觉替换。

至于您的评论，我不确定您是否可以 "opt out" 如此轻松地从样式表中获得。在您的特定情况下，您可以尝试覆盖 Leaflet 复选框的 Materialize CSS 规则，以避免它们被隐藏起来：

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

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

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

例如，请参阅 Extending Leaflet: Class Theory 教程。

在你的情况下，这只需要确保有一个正确的 <label> 关联到图层控件 <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;
  }
});

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

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

有了这个，您让 Materialize CSS 完成它的工作并创建复选框替换，这样结果就是您将该库包含到您的页面上所期望的结果。

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

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

Answer 2

您可以尝试将此添加到您的 CSS

.leaflet-control-layers-overlays input[type='checkbox'] {
   display: block !important;
 }

Materialise CSS 不显示带有 Leaflet 网络映射覆盖的多个复选框

Materialize CSS not showing multiple checkboxes with Leaflet web-mapping overlays

javascript

css

materialize

leaflet