创建 Leaflet 自定义复选框控件答案

【问题标题】：Create a Leaflet custom checkbox control创建 Leaflet 自定义复选框控件
【发布时间】：2014-11-03 23:55:00
【问题描述】：

我想创建一个自定义复选框控件，它只会在 jquery/javascript 中设置一个标志：如果选中标志 = 'clustered' 或如果未选中标志 = 'unclustered'。到目前为止，我在地图上有一个控件，但它不是一个复选框，我如何获得复选框的状态 - 如果它已选中/未选中。

代码：

function MapShowCommand() {
  alert("checked / unchecked"); //set flag
}

L.Control.Command = L.Control.extend({
    options: {
        position: 'topleft',
    },

    onAdd: function (map) {
        var controlDiv = L.DomUtil.create('div', 'leaflet-control-command');
        L.DomEvent
            .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
            .addListener(controlDiv, 'click', L.DomEvent.preventDefault)
        .addListener(controlDiv, 'click', function () { MapShowCommand(); });

        var controlUI = L.DomUtil.create('div', 'leaflet-control-command-interior', controlDiv);
        controlUI.title = 'Map Commands';
        return controlDiv;
            }
    });
var test = new L.Control.Command();
map.addControl(test);

【问题讨论】：

标签： javascript jquery map leaflet

【解决方案1】：

您必须在 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/

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

【讨论】：

你能举个例子帮忙吗，因为我不能让它工作。用上面的表格。

【解决方案2】：

偶然发现了这一点，尽管接受的答案为我指明了正确的方向，但我对其进行了调整以添加适当的 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

结果：

【讨论】：