jquery / javascriptにフラグを設定するだけのカスタムチェックボックスコントロールを作成したいと思います。チェックされている場合はflag = 'clustered'、チェックされていない場合はflag = '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);
controlDivにinputtype = "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
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加