javascript 创建一个 Leaflet 自定义复选框控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25763626/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a Leaflet custom checkbox control
提问by user2906420
I want to create a custom checkbox control which will simply set a flag in jquery/javascript: if checked the flag = 'clustered' or if unchecked flag = 'unclustered'. So far I have a control on the map but its not a checkbox and how do i get the state of the checkbox - if its checked/unchecked.
我想创建一个自定义复选框控件，它只会在 jquery/javascript 中设置一个标志：如果选中标志 = 'clustered' 或如果未选中标志 = 'unclustered'。到目前为止，我在地图上有一个控件，但它不是复选框，我如何获取复选框的状态 - 如果选中/未选中。
code:
代码：
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);
回答by YaFred
You have to create a form element with an input type="checkbox" in your controlDiv.
您必须在 controlDiv 中创建一个 input 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);
Works in this jsfiddle http://jsfiddle.net/FranceImage/ao33674e/
在这个 jsfiddle http://jsfiddle.net/FranceImage/ao33674e/ 中工作
You can also do it the Leaflet way reading this for hints: https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Layers.js
您也可以使用 Leaflet 方式阅读此内容以获取提示：https: //github.com/Leaflet/Leaflet/blob/master/src/control/Control.Layers.js
回答by Anton vBR
Stumbled upon this and even though the accepted answer pointed me in the right direction I tweeked it to add appropiate cssclasses.
偶然发现了这一点，尽管接受的答案为我指明了正确的方向，但我还是修改了它以添加适当的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
Result:
结果：
