我怎样才能在leaflet.js中设置layer.control的样式？

Question

我怎样才能在leaflet.js中设置layer.control的样式？

use*_*911 4 javascript css jquery leaflet

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

我正在根据这个例子开发一个传单项目:http://leafletjs.com/examples/layers-control.html

码:

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

bsu*_*tor 7

您可以使用 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
};

Run Code Online (Sandbox Code Playgroud)

Answer 2

Dr.*_*lle 6

在 leaflet.css 之后添加这个样式:

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

Run Code Online (Sandbox Code Playgroud)

谢谢。可惜OP没有费心选择这个作为答案。我将如何通过 jQuery 更改“之后”内容？ (2认同)
@Jeff：`jQuery(function($){$('.leaflet-control-layers-toggle').append('some text');});` (2认同)

归档时间：	11 年，7 月前
查看次数：	16316 次
最近记录：	11 年，3 月前