Wie mehrere benutzerdefinierte Steuerschaltfläche Flyer js hinzufügen?

Question

Ich habe den Code gefunden, um eine einzige Schaltfläche auf der Leaflet-Map zur oberen linken Ecke hinzuzufügen. Aber jetzt möchte ich mehrere Tasten nacheinander hinzufügen.

1. Ist es möglich, innerhalb des folgenden Codes mehrere Schaltflächen einzufügen?

2. Ich habe auch versucht, Kontrollkästchen/Optionsfelder zu verwenden. Aber ich weiß nicht, wie man der Checkbox und dem Button Labels hinzufügt.

3. Und hinzugefügte/ungeprüfte Eigenschaften für sie.

Danke.

My-Code hier:

var customControl = L.Control.extend({ options: {position: 'topleft'},onAdd: function (map) { 
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom'); 

onAdd: function (map) { 
    var container = L.DomUtil.create('input','my-button btn'); 
    container.type="button"; 
    container.title="x"; 
    container.value = "x"; 
    container.label = "x"; 

    container.style.backgroundColor = 'white';  

    container.style.backgroundSize = "30px 30px"; 
    container.style.width = '40px'; 
    container.style.height = '40px'; 
    container.style.borderRadius = "25px"; 
    container.style.padding = "0"; 
    container.style.margin = "10px"; 

container.onclick = function(){ 
    console.log('buttonClicked'); 
} 

return container;}}); 

Answer 1

Sie können so viele Faltblatt "Kontrollen" erstellen, wie Sie möchten. Sie können sie an jeder Ecke einfügen, und sie werden einfach "gestapelt" (mit einem 10px Rand, wenn ich mich richtig erinnere) in einer vertikalen Spalte in der gegebenen Ecke.

Wie für den Inhalt jedes Steuerelements ist es rein HTML und CSS. In Ihrem Code verwenden Sie Leaflet Dienstprogramm L.DomUtil.create(), aber Sie könnten einfach auch die native document.createElement() verwendet haben (aber würde die Klasse in einer separaten Zeile hinzufügen) oder sogar jQuery DOM-Dienstprogramm (mit dem Sie direkt eine HTML-Zeichenfolge schreiben können).

Dann können Sie komplexen Inhalt (mit Eingängen, zugeordneten Etiketten usw.) erstellen. Suchen Sie einfach nach HTML-Tutorials/JavaScript, die DOM-Knoten erstellen.