Tạo một điều khiển hộp kiểm tùy chỉnh Leaflet

Question

Tôi muốn tạo điều khiển hộp kiểm tùy chỉnh sẽ chỉ đặt cờ trong jquery/javascript: nếu được chọn cờ = 'nhóm' hoặc cờ không được chọn = 'unclustered'. Cho đến nay tôi có một điều khiển trên bản đồ nhưng nó không phải là một hộp kiểm và làm thế nào để tôi có được trạng thái của hộp kiểm - nếu nó được kiểm tra/bỏ chọn.

mã:

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

Bạn phải tạo một yếu tố hình thức với một input type = "checkbox" trong controlDiv của bạn.

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

trình trong jsfiddle này http://jsfiddle.net/FranceImage/ao33674e/

Bạn cũng có thể làm điều đó một cách Tờ rơi đọc này cho gợi ý: https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Layers.js