如何移除Leaflet地图图例中的双引号

这个问题大概率是你在构建图例HTML元素时，错误地给颜色值额外添加了双引号导致的。咱们一步步来解决：

问题根源分析 #

你提供的getColour函数已经正确返回了不带引号的颜色值（比如'green'），但如果在拼接图例的style属性时，又给这个值套了一层双引号，就会出现渲染后彩色框里显示双引号的情况。举个错误写法的例子：

// 错误写法：多余的双引号导致问题
div.innerHTML += '<i style="background:"' + getColour(grades[i]) + '"></i> ' + grades[i];

这段代码会生成类似<i style="background:"green""></i>的HTML，浏览器解析时就会把内部的双引号显示出来。

修正后的代码示例 #

你只需要移除颜色值前后多余的双引号，让background样式直接引用颜色值即可。结合你的代码，完整的图例部分可以改成这样：

function getColour(d) {
    switch (d) {
        case '> 2 uur': return 'green';
        case '1 - 2 uur': return 'yellow';
        case '30 min - 1 uur': return 'orange';
        case '< 30 min': return 'red';
        default: return '#fff';
    }
};

var legend = L.control({ position: 'bottomright' });
legend.onAdd = function(mymap) {
    var div = L.DomUtil.create('div', 'info legend');
    // 定义图例的等级数组
    var grades = ['< 30 min', '30 min - 1 uur', '1 - 2 uur', '> 2 uur'];
    
    // 循环生成图例项
    for (var i = 0; i < grades.length; i++) {
        div.innerHTML += 
            '<i style="background:' + getColour(grades[i]) + '"></i> ' +
            grades[i] + '<br>';
    }
    return div;
};
legend.addTo(mymap);

如果习惯用ES6模板字符串，写法会更清晰，也不容易出错：

for (var i = 0; i < grades.length; i++) {
    div.innerHTML += `
        <i style="background:${getColour(grades[i])}"></i> ${grades[i]}<br>
    `;
}

补充：确保图例图标样式正常 #

别忘了给图例的<i>标签添加CSS样式，让彩色框显示正常：

.info.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
    border: 1px solid #333; /* 可选：给彩色框加边框 */
}

这样修改后，图例的彩色框里就不会再出现多余的双引号啦～

内容的提问来源于stack exchange，提问作者George