Question

我正在尝试在leaflet.js映射中添加一个bootstrap switch。

到目前为止，我有一个工作按钮（请参见代码段），但我想改用开关。

查看所附图片：

到目前为止，这是一个彻底的失败。

在我尝试过的事情中，下面的代码（显然不起作用）：

 var customControl_2 =  L.Control.extend({        
      options: {
        position: 'topright'
      },

      onAdd: function (map) {
        var container = L.DomUtil.create('input', 'mySwitch');

        container = $("[class='mySwitch']").bootstrapSwitch({})

        //container.onclick = function(){
        //  console.log('buttonClicked');
        //}


        return container;
      }
    });
    map.addControl(new customControl_2());

有人知道这应该如何工作吗？与往常一样，我们非常感谢您的帮助。如果可以通过其他方式（即不使用引导程序）来实现相同的拨动开关，那也没问题。

非常感谢！

<!DOCTYPE html>
<html>

<head>

<title>Leaflet</title>

<meta charset="utf-8" />

<!--jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<!-- bootstrap switch -->
<link rel="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.js"></script> 

<!--d3 -->
<script src='https://d3js.org/d3.v4.min.js'></script>

<!-- leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>



<style>
    html,
    body {
        height: 100%;
        margin: 0;
    }

    #map {
        width: 600px;
        height: 400px;
    }

</style>


</head>

<body>

<div id='map'></div>

<script type="text/javascript">
    var map = L.map('map', {
        minZoom: 0,
    }).setView([37, -103], 3);

    var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: "CartoDB"
    }).addTo(map);


    // Toggle button to turn layers on and off
    var customControl = L.Control.extend({
        options: {
            position: 'topright'
        },

        onAdd: function(map) {
            var container = L.DomUtil.create('input');
            container.type = "button";
            container.title = "Some title";
            container.value = "Off";

            container.style.backgroundColor = 'white';
            container.style.backgroundSize = "80px 30px";
            container.style.width = '80px';
            container.style.height = '30px';


            function toggle(button) {
                if (button.value == "Off") {
                    button.value = "On"
                    button.innerHTML = "On"
                    removeLayers();
                } else if (button.value == "On") {
                    button.value = "Off"
                    button.innerHTML = "Off"
                    addLayers();
                }
            }

            container.onclick = function() {
                toggle(this);
                console.log('buttonClicked');
            }


            return container;
        }
    });
    map.addControl(new customControl());

</script>



</body>

</html>

Answer 1

基于字符串finds的$("[class='mySwitch']") selector元素。您必须根据自己的使用情况调整Bootstrap Switch example。在您的情况下，您不需要选择器，但可以直接传递您创建的HTML元素，这样它就由jQuery包装并且可以由Bootstrap Switch进行转换：$(container).bootstrapSwitch({})
不要尝试直接转换您的Control容器，而是将子复选框输入嵌入到该容器中：

    var container = L.DomUtil.create('div');
    // Use a child input.
    var input = L.DomUtil.create('input');
    input.type = "checkbox";
    // Insert the input as child of container.
    container.appendChild(input);
    // Transform the input, not the container.
    $(input).bootstrapSwitch({});

您输入错字了：

<link rel="https:....css">

…应该是：

<link rel="stylesheet" href="https:....css">

实时结果：

var map = L.map('map', {
  minZoom: 0,
}).setView([37, -103], 3);

var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
  attribution: "CartoDB"
}).addTo(map);


// Toggle button to turn layers on and off
var customControl = L.Control.extend({
  options: {
    position: 'topright'
  },

  onAdd: function(map) {
    var container = L.DomUtil.create('div');
    // Use a child input.
    var input = L.DomUtil.create('input');
    input.type = "checkbox";
    input.title = "Some title";
    input.value = "Off";
    // Insert the input as child of container.
    container.appendChild(input);

    jQuery(input).bootstrapSwitch({
      // http://bootstrapswitch.site/options.html
      onSwitchChange: function(event) {
        console.log('buttonClicked', event.target.checked);
      }
    });

    return container;
  }
});
map.addControl(new customControl());

html,
body,
#map {
  height: 100%;
  margin: 0;
}

<!--jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!--script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script-->

<!-- bootstrap switch -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.js"></script>

<!-- leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

<div id='map'></div>

Answer 2

这太好了，谢谢。我刚刚尝试使用bootsrapToggle()，它可以工作。但是，还有一个问题（有点愚蠢）。如何将id分配给此单选按钮，以便可以从外部/以编程方式检查其on或off？

代码如下：

var MyCustomControlToggle_Template = L.Control.extend({
    options: {
        position: 'topleft'
    },
    onAdd: function (map) {
        var container = L.DomUtil.create('div', 'playPause-custom-control');
        // Use a child input.
        var input = L.DomUtil.create('input');
        input.type = "checkbox";
        input.value = "Off";
        input.style = "width: 95px; height: 34px;"

    // Insert the input as child of container.
    container.appendChild(input);
    jQuery(input).bootstrapToggle({

        id:'myID', // **THIS SEEMS NOT TO BE WORKING**
                   // THE STANDARD WAY IN BOOTSTRAP 4 IS:
                   // <input class="form-check-input" type="checkbox" value="" id="myID">

        off: '<i class="fa fa-play"></i> Help',
        on: '<i class="fa fa-pause"></i> Help',
        onSwitchChange: function (event) {
            console.log('buttonClicked', event.target.checked);
        }
    });
    return container;
    }
});

带嵌入式Bootstrap Switch切换的传单地图

2 个答案: