[英]Can't get Leaflet legend to display properly
我试图显示我认为是微不足道的东西 - 在传单地图上显示图例。 但是我现在已经花了大约 6 个小时试图让它工作无济于事。 我想要做的就是显示一个几乎不透明的框,带有一个小方块,然后每个方块旁边有一个文本标签,给出其颜色的含义。
但是无论我尝试什么,我都只能显示文本,无法以任何颜色显示任何类型的形状,也无法像所有网络示例一样将图例显示在漂亮的灰色框中显示。 这是Javascript代码:
function getColor(s) {
if ( s === 'Last update <2 hours ago')
return 'yellow';
else if ( s === 'Last update >24 hours ago' )
return 'blue';
else
return 'black';
}
var legend = L.control({position: 'topright'});
legend.onAdd = function (map) {
var legendDiv = L.DomUtil.create('div', 'info legend'),
checkins = ['Last update > 30 days ago', 'Last update >24 hours ago', 'Last update <2 hours ago'],
title= ['<strong>Marker Color Codes</strong>'],
labels = [];
for ( var i=0; i < checkins.length; i++) {
labels.push(
'<i class="square" style="background:' + getColor(checkins[i]) + '"></i>'+ checkins[i] + '')
}
legendDiv.innerHTML = labels.join('<br>');
return legendDiv;
}
legend.addTo(map);
这是CSS:
.legend {
border: 5px solid black;
font-weight: bold;
color: blue;
text-align: left;
width: 250px;
height: 240px;
line-height: 18px;
background: white;
opacity: 1;
}
.legend i {
width: 50px;
height: 50px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
.legend square {
border-radius: 50%;
width: 50px;
height: 50px;
margin-top: 8px;
}
我一直在玩各种边框和图例大小,所以不要过多关注宽度和高度参数。 我无法获得任何尺寸来有所作为。 这是显示内容的屏幕截图:
我想看到的正是所有示例所显示的内容 - 一个带有灰色背景(颜色不是材料)的方框,带有一个小方块颜色,后跟一个描述该颜色重要性的文本字符串。
我在这里做错了什么?
感谢您的帮助。
我知道这个问题很老,但我遇到了同样的问题。 L.DomUtil.create('div', 'info legend')的 css 背景色可以通过以下方式更改:
<style>
.info.legend {
background-color: white;
}
<\style>
无论出于何种原因,您的 CSS 规则似乎都没有应用。
正确添加后,您的legend
显示您设置的任何规则: https : //plnkr.co/edit/qAjh0duPRI4US6Q4DSCN?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.