传单图例未显示

Question

谁能告诉我代码有什么问题？图例，这应该是最容易没有出现的部分，我不知道为什么。也许隐藏在其他层？

按照getColor和图例代码

var legend = L.control({
  position: 'bottomleft'
});

legend.onAdd = function(map) {
  var div = L.DomUtil.create('div', 'info legend'),
    grades = [0.2, 0.26, 0.32, 0.38, 0.44, 0.5, 0.56, 0.62, 0.68, 0.74, 0.8, 0.86, 0.92, 0.98, 1.04, 1.1],
    labels = [],
    from, to;

  for (var i = 0; i < grades.length; i++) {
    from = grades[i];
    to = grades[i + 1];

    labels.push(
      '<i style="background:' + getColor(from + 1) + '"></i> ' +
      from + (to ? '&ndash;' + to : '+'));
  }

  div.innerHTML = labels.join('<br>');
  return div;
};

Answer 1

编辑以下回答评论：

使用开发者工具（F12 / on Mac：Cmd + Alt + I）读取潜在的控制台错误。

在您的情况下，getColor 函数未在您的 legend.onAdd 范围内定义。

此外，您将 1 添加到您的 from 值，导致值在 [1.2 - 2.1] 范围内，而您的 getColor 函数使用从 0.26 到 1.1 的值。

使用您的存储库中的代码进行工作演示：http://plnkr.co/edit/lbKlXaV76t6NclHQPCtr?p=preview（getColor 在正确的范围内复制，并删除了 getColor(from + 1) 中的 +1）

原回答：

您是否将自定义控件添加到地图中？

legend.addTo(map);

附带说明一下，您的带有来自 getColor 的图例背景色的 <i> 标签没有任何内容。因此，您可能看不到彩色内容……

演示：http://jsfiddle.net/3v7hd2vx/34/（在您的 <i> 标签中包含虚拟内容）

Answer 2

我有类似的问题，即 i 元素的宽度为 0 像素。
尝试在 i 之间添加文本并添加颜色以消除文本，如下所示：

 '<i style="background:' + getColor(from + 1) + ';color:' + getColor(from + 1) +';">sometexttogivespace</i> ' +
      from + (to ? '&ndash;' + to : '+'));

或从传单教程中复制 css 代码来设置 i

的宽度

.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

传单图例未显示

Leaflet Legend not showing

javascript

legend

leaflet