创建传单自定义复选框控件

您必须在controlDiv中创建一个带有输入type=“checkbox”的表单元素。

// create the control
var command = L.control({position: 'topright'});

command.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'command');

    div.innerHTML = '<form><input id="command" type="checkbox"/>command</form>'; 
    return div;
};

command.addTo(map);


// add the event handler
function handleCommand() {
   alert("Clicked, checked = " + this.checked);
}

document.getElementById ("command").addEventListener ("click", handleCommand, false);

在这个jsfiddle中工作 http://jsfiddle.net/FranceImage/ao33674e/

您也可以通过传单的方式阅读以下提示: https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Layers.js

我对此感到困惑,尽管接受的答案指向了我正确的方向,但我还是在推特上添加了适当的内容 css 类。

function toggleFunction(bool) {
  alert(bool)
}

var command = L.control({position: 'topright'});
command.onAdd = function (map) {
    var div = L.DomUtil.create('div');
    div.innerHTML = `
    <div class="leaflet-control-layers leaflet-control-layers-expanded">
      <form>
        <input class="leaflet-control-layers-overlays" id="command" 
          onclick=toggleFunction(this.checked) type="checkbox">
          Toggle
        </input>
      </form>
    </div>`; 
    return div;
};
command.addTo(mymap); //your map variable

结果: