javascript 如何在 Leaflet.js 中设置 layer.control 的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21078310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I style layer.control in leaflet.js?
提问by user3187911
I am trying to change the default dropdown menu icon in the layer control. I'd like to have text alongside the icon. Is there any way to do this? Perhaps using JQuery and CSS?
我正在尝试更改图层控件中的默认下拉菜单图标。我想在图标旁边有文字。有没有办法做到这一点？也许使用 JQuery 和 CSS？
I'm working on a leaflet project based on this example: http://leafletjs.com/examples/layers-control.html
我正在基于此示例进行传单项目：http: //leafletjs.com/examples/layers-control.html
Code:
代码：
<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 © 2011 OpenStreetMap contributors, Imagery © 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>
回答by Dr.Molle
Add this style afterleaflet.css:
在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>
回答by bsuttor
You can use HTML and you can change text when you define baselayers dans overlays.
您可以使用 HTML 并且可以在定义 baselayers dans 叠加层时更改文本。
Example:
例子：
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
};
回答by AMunk
If you are using Jquery you can add this to the document ready section
如果您使用的是 Jquery，您可以将其添加到文档就绪部分
$(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();
});
});
回答by user3233010
This actually doesn't work because there is apparently no way to control the vertical spacing between the radio buttons, which means that the buttons don't line up with the labels (and images).
这实际上不起作用，因为显然无法控制单选按钮之间的垂直间距，这意味着按钮不会与标签（和图像）对齐。
The only example of this sort of thing I have seen that ACTUALLY WORKS is in the Leaflet Providers plug-in demo page in the package at https://github.com/leaflet-extras/leaflet-providers. What he apparently has done is to place the radio button and label on a overlay above the actual layer control, sort of like the Leaflet attribution overlay at the bottom right of most Leaflet maps...
我见过的此类事情的唯一示例是 ACTUALLY WORKS 位于https://github.com/leaflet-extras/leaflet-providers包中的 Leaflet Providers 插件演示页面。他显然所做的是将单选按钮和标签放在实际图层控件上方的叠加层上，有点像大多数传单地图右下角的传单属性叠加...
