Question

I am using Materialize 0.97.7 with Leaflet 1.0.1 (latest)

<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">

When I try to create an overlay with multiple checkboxes to toggle items, no checkbox appears, only labels, which work as a toggle but I want either checkboxes or switches. If I switch CSS cdn to another framework eg Bootstrap, they appear.

Leaflet code for debudding in case someone is interested: 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);

This is obviously not a Leaflet issue as it works fine with other CSS

Can anyone offer a fix?

Thanks

Answer 1

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

这就是传单图层控件所发生的情况：隐藏了<input>，但由于Leaflet没有将正确的<label>与<input>相关联（或者至少不是方式实现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教程。

在您的情况下，这只需要确保与图层控件<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/

有了这个，你让Materialise CSS完成它的工作并创建复选框替换，这样结果就是你可能通过在页面上包含该库而预期的结果。

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

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

Answer 2

您可以尝试将此添加到CSS

.async

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

2 个答案: