Fatal编程技术网
  • javascript/
  • Javascript 如何在layer.js中设置layer.control的样式？

Javascript 如何在layer.js中设置layer.control的样式？

javascript jquery css leaflet

Javascript 如何在layer.js中设置layer.control的样式？,javascript,jquery,css,leaflet,Javascript,Jquery,Css,Leaflet,我正在尝试更改图层控件中的默认下拉菜单图标。我希望图标旁边有文字。有没有办法做到这一点？也许使用JQuery和CSS 我正在做一个基于以下示例的传单项目： 代码： <html> <head> <title>Leaflet Layers Control Example</title> <meta charset="utf-8" /> <meta name="viewport" content="wi

我正在尝试更改图层控件中的默认下拉菜单图标。我希望图标旁边有文字。有没有办法做到这一点？也许使用JQuery和CSS

我正在做一个基于以下示例的传单项目：

代码：

<html>
<head>
    <title>Leaflet Layers Control Example</title>
        <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="../dist/leaflet.css" />
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>

    <script src="../dist/leaflet.js"></script>
    <script>
        var cities = new L.LayerGroup();

        L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
        L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
        L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
        L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);


        var cmAttr = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 Clou   dMade',
        cmUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png';

    var minimal   = L.tileLayer(cmUrl, {styleId: 22677, attribution: cmAttr}),
        midnight  = L.tileLayer(cmUrl, {styleId: 999,   attribution: cmAttr}),
        motorways = L.tileLayer(cmUrl, {styleId: 46561, attribution: cmAttr});

    var map = L.map('map', {
        center: [39.73, -104.99],
        zoom: 10,
        layers: [minimal, motorways, cities]
    });

    var baseLayers = {
        "Minimal": minimal,
        "Night View": midnight
    };

    var overlays = {
        "Motorways": motorways,
        "Cities": cities
    };

    L.control.layers(baseLayers, overlays).addTo(map);
</script>


传单层控制示例
var cities=新的L.LayerGroup（）；
L.marker（[39.61，-105.02]）.bindPopup（'这是美国利特尔顿公司。）.addTo（城市），
L.marker（[39.74，-104.99]）.bindPopup（'这是丹佛，公司。）.addTo（城市），
L.marker（[39.73，-104.8]）.bindPopup（'这是公司Aurora.）.addTo（城市），
L.marker（[39.77，-105.23]）.bindPopup（'This is Golden，CO.））.addTo（cities）；
var cmAttr='地图数据和副本；2011年OpenStreetMap贡献者、图像和副本；2011年《克洛德马德》，
cmUrl='http://{s}.tile.cloudmake.com/bc9a493b41014caab98f0471d759707/{styleId}/256/{z}/{x}/{y}.png'；
var minimal=L.tileLayer（cmUrl，{styleId:22677，attribute:cmAttr}），
midnight=L.tileLayer（cmUrl，{styleId:999，attribute:cmAttr}），
高速公路=L.tileLayer（cmUrl，{styleId:46561，属性：cmAttr}）；
var map=L.map（'map'{
中间：[39.73，-104.99]，
缩放：10，
图层：[最小、高速公路、城市]
});
var baseLayers={
“最小”：最小，
“夜景”：午夜
};
变量覆盖={
“高速公路”：高速公路，
“城市”：城市
};
L.控制层（基本层、覆盖层）。添加到（地图）；

在传单后添加此样式：

<style>
.leaflet-control-layers-toggle:after{ 
    content:"your text"; 
    color:#000 ;
}
.leaflet-control-layers-toggle{ 
    width:auto;
    background-position:3px 50% ;
    padding:3px;
    padding-left:36px;
    text-decoration:none;
    line-height:36px;

}
</style>


.传单控制层切换：在{
内容：“你的文本”；
颜色：#000；
}
.传单控制层切换{
宽度：自动；
背景位置：3px50%；
填充：3倍；
左侧填充：36px；
文字装饰：无；
线高：36px；
}
您可以使用HTML，并且可以在定义baselayers dans覆盖时更改文本

例如：

var baseLayers = {
    "<div id='my-div-id'><img src='img/icon-minimal.png' />Minimal View</div>": minimal,
    "<div id='my-div-id'><img src='img/icon-night.png' />Super Night View</div>": midnight
};

var overlays = {
    "<img src='myimage.png' /> Motorways": motorways,
    "<img src='myimage2.png' /> All Cities": cities
};

var baseLayers={
“最小视图”：最小，
“超级夜景”：午夜
};
变量覆盖={
“高速公路”：高速公路，
“所有城市”：城市
};
这实际上不起作用，因为显然无法控制单选按钮之间的垂直间距，这意味着按钮与标签（和图像）不对齐

我所看到的这类事情的唯一一个实际有效的例子是位于的软件包中的传单提供商插件演示页面。显然，他所做的是将单选按钮和标签放置在实际图层控件上方的覆盖图上，有点像大多数传单地图右下角的传单属性覆盖图…

如果使用Jquery，可以将其添加到document ready部分

 $(document).ready(function () {

 $('.leaflet-control-layers').css({ 'width': 'auto', 'float': 'left' });
 $('.leaflet-control-layers-toggle').css('float', 'left');
 $('.leaflet-control-layers-toggle').after('<div class='control-extend'>Your text goes here</div>')
 $('.control-extend').css({ 'float': 'left', 'line-height': '35px', 'font-weight': 'bold', 'margin-right' : '10px'});

 $('.leaflet-control-layers').on('mouseover', function (e) {
 $('.control-extend').hide();

 });

 $('.leaflet-control-layers').on('mouseout', function (e) {
 $('.control-extend').show();

 });
});

$（文档）.ready（函数（）{
$（'.传单控制层'）.css（{'width'：'auto'，'float'：'left'}）；
$（'.传单控制层切换'）.css（'float'，'left'）；
$（'.传单控制层切换'）。之后（'文本转到此处'）
$（'.control extend'）.css（{'float'：'left'，'line height'：'35px'，'font weight'：'bold'，'margin right'：'10px'}）；
$（'.传单控制层'）。on（'mouseover'，函数（e）{
$（'.control extend'）.hide（）；
});
$（'.传单控制层'）。在（'mouseout'，函数（e）上{
$（'.control extend'）.show（）；
});
});
谢谢。太糟糕了，OP没有选择这个作为答案。我如何通过jQuery更改“after”内容？@Jeff:
jQuery（函数（$）{$（'.传单控制层切换'）.append（'some text'）；}）