無法讓傳單圖例正確顯示

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

我知道這個問題很老，但我遇到了同樣的問題。 L.DomUtil.create('div', 'info legend')的 css 背景色可以通過以下方式更改：

<style>
    .info.legend {
        background-color: white;
    }
<\style>

Answer 2

無論出於何種原因，您的 CSS 規則似乎都沒有應用。

正確添加后，您的legend顯示您設置的任何規則： https : //plnkr.co/edit/qAjh0duPRI4US6Q4DSCN?p=preview