我试图展示我认为会有些微不足道的东西 - 在传单地图上显示一个传奇。但是我现在花了大约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;
}
我一直在玩各种边框和图例尺寸,所以不要过分关注宽度和高度参数。我无法获得任何规模来发挥作用。以下是显示内容的屏幕截图:
我希望看到的是所有示例所显示的内容 - 带有灰色背景的方框(颜色不是材质),带有一个小方块的颜色,后跟一个描述其重要性的文本字符串颜色。
我在这里做错了什么?
感谢您的帮助。
答案 0 :(得分:1)
我知道这个问题很旧,但是我也遇到了同样的问题。可以通过以下方式更改 L.DomUtil.create('div','信息图例')的CSS中的背景颜色:
<style>
.info.legend {
background-color: white;
}
<\style>
答案 1 :(得分:0)
无论出于何种原因,您的CSS规则似乎都没有应用。
正确添加后,legend
会显示您设置的规则:https://plnkr.co/edit/qAjh0duPRI4US6Q4DSCN?p=preview