如何添加多個自定義控件按鈕傳單js？

我找到了代碼在leaftlet地圖上添加一個按鈕到頂部的角落。但是現在我想要一個接一個地添加多個按鈕。如何添加多個自定義控件按鈕傳單js？

是否可以在下面的代碼中插入多個按鈕？
我也嘗試過使用複選框/單選按鈕。但我不知道如何將標籤添加到複選框和按鈕。
併爲它們添加選中/未選中的屬性。

謝謝。

我的代碼在這裏：

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

來源

2016-08-02 GORILLA

您可以創建許多傳單「控制」如你所願。您可以將它們插入任意角落，並且在指定角落的垂直列中，它們將簡單地「堆疊」（如果我沒有記錯的話，只需10px的餘量）。

至於每個控件的內容，純粹是HTML和CSS。在您的代碼中，您使用的是Leaflet的實用程序L.DomUtil.create()，但您也可以簡單地使用本機document.createElement()（但必須將該類添加到單獨的行中），或者甚至可以使用jQuery DOM實用程序（可以直接編寫HTML字符串）。

然後，您可以構建複雜的內容（包括輸入，關聯標籤等）。只需查找構建DOM節點的HTML教程/ JavaScript即可。

來源

2016-08-02 11:35:01 ghybs

是。一個很好的例子就是'Leaflet.draw'插件，它爲工程圖點，多邊形，圓等添加了堆疊在一起的工具欄按鈕。 – nothingisnecessary

如何添加多個自定義控件按鈕傳單js？

回答

相關問題