Utwórz kontrolkę niestandardowego pola wyboru Ulotka

Question

Chcę utworzyć niestandardową kontrolkę checkbox, która po prostu ustawi flagę w jquery/javascript: jeśli zaznaczone flag = 'klastrowany' lub odznaczone flag = 'unclustered'. Do tej pory mam kontrolę na mapie, ale nie jest to pole wyboru i jak mogę uzyskać stan pola wyboru - jeśli jest zaznaczone/odznaczone.

Kod:

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); 

Answer 1

Musisz utworzyć element formularza z input type = "checkbox" w controlDiv.

// 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); 

Prace w tym jsfiddle http://jsfiddle.net/FranceImage/ao33674e/

Można również zrobić to ulotka czyta ten sposób za wskazówki: https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Layers.js