Question

我将动态图例添加到传单地图中。

我的问题是在if语句和for语句完成之前调用div.innerHTML +='</div>'的地方。

我一直在调查Callbacks，但我在看了几个小时之后真的陷入了困境，而且似乎是在圈子里走了

/*Legend Control */
function maplegendControl() {
  dynamicmapLegend = L.control({
    position: 'topright'
  });
  dynamicmapLegend.onAdd = function(map) {
    var div = L.DomUtil.create('div', 'legend'),
      legendcolors = ["#7c7c7c", "#9d2a2a", "#26a82f"],
      legendlabels = ["Blue", "Red", "Green"];
    div.innerHTML += '<div class="legend-inner-top">' + '<div class="legend-inner-top-m" style="padding-top: 3px color: #e3e3e3;"><strong style="color: #e3e3e3">Legend</strong></div>' + '<div class="legend-inner-top-m" style="float: right;"><button type="button" class="btn btn-xs btn-legend closeLegend"></button></div>' + '</div>' + '<div class="legend-inner-bottom">'
    if (map.hasLayer(jungle)) {
      // loop through our density intervals and generate a label with a colored square for each interval
      for (var i = 0; i < legendcolors.length; i++) {
        div.innerHTML +=
          '<div style="margin-top: 10px;"><i style="background:' + legendcolors[i] + '"></i>' + legendlabels[i] + "</div>";
      }
    }
    if (map.hasLayer(tropical)) {
      div.innerHTML += '<i><img src="assets/img/legend-tropical.png" alt="Tropical Icon" height="18" width="18"></i>' + 'Tropical' + "<div style='margin-top: 10px;'></div>";
    }
    if (map.hasLayer(forest)) {
      div.innerHTML += '<i><img src="assets/img/legend-forest.png" alt="Forest Icon" height="18" width="18"></i>' + 'Forest' + "<div style='margin-top: 10px;'></div>";
    }
    div.innerHTML += '</div>'
    return div;
  }
  dynamicmapLegend.addTo(map);
}

Answer 1

这里的一个问题是getArray()无法按照您的预期运作。它与.innerHTML不同，您可以将内容写入HTML页面，document.write()和<div>以及其中的所有内容分别写出来。

这可能就是为什么似乎提前添加</div>的原因：如果您分配到</div>并且未关闭代码，则浏览器会为您执行此操作。 .innerHTML顶部附近的第一个.innerHTML分配不会像onAdd()那样打开代码，它会在那里关闭它们。这就是为什么下面写的其他标签没有嵌套在里面。

如果您使用document.write()，您应该创建一个包含完整DOM片段的字符串，然后在构建该字符串之后，将整个字符串分配到.innerHTML。

从您现在的代码开始，直接翻译将是：

.innerHTML

动态div显示不正确

1 个答案: