无法正确显示传单图例

Posted 2023-02-16

【中文标题】无法正确显示传单图例

【英文标题】：Can't get Leaflet legend to display properly

【发布时间】：2018-01-13 02:03:18

【问题描述】：

我正在尝试显示我认为微不足道的内容 - 在传单地图上显示图例。但我现在花了大约 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;
    

我一直在玩各种边框和图例大小，所以不要过分关注宽度和高度参数。我无法获得任何尺寸来有所作为。这是显示的屏幕截图：

我希望看到的正是所有示例所显示的内容 - 带有灰色背景（颜色不是材料）的方形框，带有一小块颜色，后面是描述该颜色重要性的文本字符串。

我在这里做错了什么？

感谢您的帮助。

【问题讨论】：

分享一些你引用的“网络示例”的链接，甚至截图。这肯定会帮助人们理解你在说什么。

以下是我一直关注的一对：ghost.mixedbredie.net/legendary-leaflet-legendsplnkr.co/edit/lbKlXaV76t6NclHQPCtr?p=preview

div真的有图例类吗？

【参考方案1】：

我知道这个问题很老，但我也遇到了同样的问题。 L.DomUtil.create('div', 'info legend') 的 css 中的背景颜色可以这样更改：

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

【参考方案2】：

无论出于何种原因，您的 CSS 规则似乎都没有被应用。

正确添加后，您的 legend 会显示您设置的任何规则：https://plnkr.co/edit/qAjh0duPRI4US6Q4DSCN?p=preview