带有嵌入式引导开关切换的传单地图答案

【问题标题】：Leaflet map with embedded Bootstrap Switch toggle带有嵌入式引导开关切换的传单地图
【发布时间】：2018-08-27 23:47:29
【问题描述】：

我正在尝试在我的 leaflet.js 地图中添加 bootstrap switch。

到目前为止，我有一个工作按钮（请参阅 sn-p），但我想使用一个开关。

见附图：

到目前为止，它完全失败了。

我尝试过的代码如下（显然不起作用）：

 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>

【问题讨论】：

标签： javascript jquery twitter-bootstrap leaflet bootstrap-switch

【解决方案1】：

$("[class='mySwitch']") finds 元素基于字符串 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>

【讨论】：

这才是真正的美！我永远也想不通。我曾尝试创建一个 div 和一个输入，但每个都单独，从不按特定顺序，将输入作为子项附加到 div 容器。非常感谢！