複数のカスタムコントロールボタンのチラシを追加する方法js？

Question

リーフレットマップ上の単一のボタンをtopleftコーナーに追加するコードが見つかりました。しかし今、私は複数のボタンを次々と追加したいと思っています。

1. 次のコード内に複数のボタンを挿入することはできますか？

2. また、チェックボックス/ラジオボタンを使用しようとしました。しかし、私はどのようにチェックボックスとボタンにラベルを追加するか分からない。

3. さらに、チェックされた/選択されていないプロパティを追加します。

ありがとうございます。

ここに私のコード：

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

好きなだけリーフレット「コントロール」を作成することができます。あなたは任意のコーナーにそれらを挿入することができ、指定されたコーナーの縦の列に「スタックアップ」します（正しく覚えていれば10ピクセルのマージンで）。

各コントロールの内容は、純粋にHTMLとCSSです。あなたのコードではリーフレットのユーティリティーL.DomUtil.create()を使用していますが、単純にネイティブdocument.createElement()（別の行にクラスを追加する必要があります）またはjQuery DOMユーティリティー（HTML文字列を直接書くことができます）を使用することもできます。

次に、複雑なコンテンツ（入力、関連ラベルなど）を作成できます。 DOMノードを構築するHTMLチュートリアル/ JavaScriptを探してください。