Erstellen Sie ein Leaflet benutzerdefiniertes Kontrollkästchen Steuerelement

Question

Ich möchte ein benutzerdefiniertes Kontrollkästchen Steuerelement erstellen, die einfach ein Flag in jquery/javascript setzen wird: wenn aktiviert das Flag = 'gruppiert' oder wenn nicht markiert Flag = 'nicht gruppiert'. Bisher habe ich ein Steuerelement auf der Karte, aber es ist kein Kontrollkästchen und wie bekomme ich den Status des Kontrollkästchens - wenn es aktiviert/deaktiviert ist.

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

Answer 1

Sie haben ein Formularelement mit einem input type = "checkbox" in Ihrem controlDiv zu erstellen.

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

Arbeiten in diesem jsfiddle http://jsfiddle.net/FranceImage/ao33674e/

Sie können es auch tun, um die Broschüre Weg, dies für Hinweise zu lesen: https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Layers.js