无法让传单图例正确显示

Question

我试图展示我认为的东西琐碎 - 在传单地图上显示图例。但是我花了大约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; 
    } 

我一直在玩各种边框和传说尺寸，所以不要集中在宽度太大和高度参数。我无法获得任何大小来改变。以下是所显示的内容截图：

我想看到的正是所有的例子显示 - 灰色背景的方盒子（颜色是不是材料）用小方颜色后面跟着描述该颜色重要性的文本字符串。

我在做什么错在这里？

感谢您的任何帮助。

Answer 1

无论出于何种原因，您的CSS规则似乎不适用。

一旦它们被正确添加，您legend显示器与任何规则，你已经设置：https://plnkr.co/edit/qAjh0duPRI4US6Q4DSCN?p=preview