带有嵌入式 Bootstrap 切换开关的传单地图

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

有人知道这应该如何工作吗？一如既往，非常感谢任何帮助。如果可以通过其他方式实现相同的拨动开关（即没有 bootstrap），那也很好。

非常感谢！

<!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

$("[class='mySwitch']")finds Elements based on the string selector. You have to adjust the Bootstrap Switch example给你用法。在你的情况下，你不需要选择器，但你可以直接传递你创建的 HTML 元素，这样它就被 jQuery 包裹并且可以被 Bootstrap 开关转换： $(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>

带有嵌入式 Bootstrap 切换开关的传单地图

Leaflet map with embedded Bootstrap Switch toggle

javascript

jquery

twitter-bootstrap

leaflet

bootstrap-switch