Javascript 如何添加多个自定义控件按钮传单js?

Javascript 如何添加多个自定义控件按钮传单js?,javascript,leaflet,custom-controls,Javascript,Leaflet,Custom Controls,我找到了在左上角的leaftlet地图上添加一个按钮的代码。但现在我想一个接一个地添加多个按钮 是否可以在以下代码中插入多个按钮 我还尝试使用复选框/单选按钮。但我不知道如何添加标签的复选框和按钮 并为其添加选中/未选中的属性 谢谢 我的代码在这里: var customControl = L.Control.extend({ options: {position: 'topleft'},onAdd: function (map) { var container = L.DomUtil.crea

我找到了在左上角的leaftlet地图上添加一个按钮的代码。但现在我想一个接一个地添加多个按钮

  • 是否可以在以下代码中插入多个按钮

  • 我还尝试使用复选框/单选按钮。但我不知道如何添加标签的复选框和按钮

  • 并为其添加选中/未选中的属性 谢谢

    我的代码在这里:

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

    您可以创建任意数量的传单“控件”。你可以在任何一个角落插入它们,它们将简单地“堆叠”(如果我没记错的话,有10px的边距)在给定角落的垂直列中

    至于每个控件的内容,它纯粹是HTML和CSS。在您的代码中,您使用的是传单的实用程序
    L.DomUtil.create()
    ,但您也可以简单地使用本机
    document.createElement()
    (但必须在单独的一行中添加该类),甚至可以使用jQuery DOM实用程序(使用它可以直接编写HTML字符串)


    然后,您可以构建复杂的内容(包括输入、相关标签等)。只需查找构建DOM节点的HTML教程/JavaScript。

    是的。一个很好的例子是
    小册子.draw
    插件,它为绘制点、多边形、圆等添加了层叠的工具栏按钮。