leaflet js如何添加多个自定义控件按钮？

Question

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

是否可以在下面的代码中插入多个按钮？
我也尝试过使用 checkbox/radio 按钮。但我不知道如何为复选框和按钮添加标签。
并为它们添加 checked/unchecked 属性。

谢谢。

我的代码在这里：

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

您可以创建任意数量的传单 "controls"。您可以将它们插入任何角落，它们将简单地 "stack up"（如果我没记错的话，有 10px 的边距）在给定角落的垂直列中。

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

然后您可以构建复杂的内容（使用输入、相关标签等）。只需查找构建 DOM 个节点的 HTML 教程/JavaScript。

leaflet js如何添加多个自定义控件按钮？

How to add multiple custom control button leaflet js?

javascript

custom-controls

leaflet