代码之家 › 专栏 › 技术社区 › Aenaon

带有嵌入式引导开关切换的传单映射

bootstrap-switch leaflet twitter-bootstrap jquery javascript

Aenaon · 技术社区 · 6 年前

我正在尝试添加一个引导开关 bootstrap switch inside my spleet.js map.

到目前为止,我有一个工作按钮(请参阅代码片段),但我想用一个开关来代替。

见附图:

到目前为止,这是一个完全的失败。

在我尝试过的事情中,下面的代码(显然不起作用):。

var customcontrol_2=l.control.extend({
选项:{
位置:“右上”
}

ONADD:功能(映射){
var container=l.domutil.create('input','myswitch');

container=$(“[class='myswitch']”).bootstrapswitch()

//container.onclick=function()。{
//console.log(“buttonchecked”);
//}


返回容器;
}
(});
map.addcontrol(new customcontrol_2());
< /代码> 

有人知道怎么做吗?一如既往,我们非常感谢您的帮助。如果相同的切换开关可以以其他方式实现(即不带引导),那也会很好。


非常感谢!



文档类型HTML>
& HTML& GT;

&头;

<title>传单</title>

<meta charset=“utf-8”/>

&!--JQuery——& GT;
<script src=“https://code.jquery.com/jquery-3.3.1.js”></script>

&!--引导程序-->
<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>

&!--引导程序开关-->
<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---GT;
<script src='https://d3 js.org/d3.v4.min.js'></script>

&!--传单——>
<link rel=“stylesheet”href=“https://unpkg.com/leaflet@1.3.1/dist/leaflet.css”/>gt;
<script src=“https://unpkg.com/spleet@1.3.1/dist/spleet.js”></script>



风格& GT;
HTML
身体{
身高:100%;
保证金:0;
}

α映射{
宽度:600 px;
高度:400 px;
}

&风格/风格;


和/头& GT;

和身体;

<DIV ID='map'></DIV>

<script type=“text/javascript”>
var map=l.map(“map”,){
迷你变焦:0,
})设置视图([37,-103],3);

var positiron=l.tilelayer('http://123;s.basemaps.cartocdn.com/light_all/z/x/y.png','{
属性:“cartodb”
} Adto(MAP);


//切换按钮以打开和关闭层
var customcontrol=l.control.extend({
选项:{
位置:“右上”
}

ONADD:功能(映射){
var container=l.domutil.create('input');
container.type=“按钮”;
container.title=“部分标题”;
container.value=“关闭”;

container.style.backgroundcolor='白色';
container.style.backgroundsize=“80px 30px”;
container.style.width='80px';
container.style.height='30px';


功能切换(按钮){
if(button.value==“关闭”)。{
button.value=“开”
button.innerhtml=“打开”
ReavelayServer();
}else if(button.value==“on”)。{
button.value=“关闭”
button.innerhtml=“关闭”
AddiaServer();
}
}

container.onclick=函数()。{
切换(这个);
console.log(“buttonched”);
}


返回容器;
}
(});
map.addControl(new customControl());

& /脚本& GT;



和/身体;

</html>>=
< / div一个工作按钮(见代码片段),但我想用一个开关来代替。

见附图:



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

我尝试过的方法之一是下面的代码(显然不起作用):

 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>

1 回复 | 直到 6 年前

ghybs 6 年前

$("[class='mySwitch']") finds selector Bootstrap Switch example $(container).bootstrapSwitch({})

    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>