如何添加多个自定义控制按钮传单js

How to add multiple custom control button leaflet js?

本文关键字：控制 自定义 按钮 js 何添加 添加      更新时间：2023-09-26

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

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

您可以创建任意数量的传单"控件"。你可以在任何一个角落插入它们，它们会简单地"堆叠"在给定角落的垂直列中（如果我没记错的话，有10倍的边距）。

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

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

相关文章：