如何添加多个自定义控件按钮传单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？

回答

相关问题