将传单 onEachFeature 表信息放入 Div？答案

【问题标题】：Leaflet onEachFeature table info into a Div?将传单 onEachFeature 表信息放入 Div？
【发布时间】：2017-11-23 14:08:19
【问题描述】：

我试图从使用onEachFeature 函数提取的geojson 中获取一个表，它可以通过警报显示它，但我尝试getElementsByClassName 将它放入一个Div 但没有显示

我正在使用带有传单侧边栏插件的传单

谢谢

var tbl1 = "";

var proy = L.geoJSON(json_Obras, {
    onEachFeature: function(feature, layer) { 
        tbl1 = '<table><tr><th scope="row">OBRA </th><td>' + (feature.properties['OBRA'] !== null ?     Autolinker.link(String(feature.properties['OBRA'])) : '') + '</td></tr>'

    }
}).addTo(map);


proy.on('click', function () {
    sidebar.show();

})
map.on('click', function () {
    sidebar.hide();
});

document.getElementsByClassName('t1').innerHTML = tbl1;

点击按钮显示 div

<input id="btn" class="gral" type="button" name="answer" value="DATA" />
            <div id="tabla" class="t1" style="display:none;">
            </div>

jquery 点击函数

$('.gral').click(function() {
      $('.t1').toggle('slow', function() {

      });
    });

更新

根据previous question，我设法找出了如何做到这一点：

var sidebar = L.control.sidebar('sidebar', {
            closeButton: false,
            position: 'left'
        });

map.addControl(sidebar);

var ptsty = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

function onEachFeature(feature, layer) {
        layer.on({
            click: openSidebar 
         });
     }

var lay1 = L.geoJson(json_Obras,{
        pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, ptsty)
    },
        onEachFeature: onEachFeature
    }).addTo(map);


 function openSidebar(e) {
        sidebar.toggle();
        sidebar.setContent('<div id="sidebarin"><h2>' + e.target.feature.properties.OBRA + '</h2></div>');
    }

【问题讨论】：

你生成的表格是错误的。在每次迭代中，您都将整个表分配给 tbl1 变量。
你是对的，有什么建议吗？
在切换回调中检查 div 是否显示然后放置 document.getElementsByClassName('t1').innerHTML = tbl1;否则为空；

标签： javascript jquery html

【解决方案1】：

首先，您在调用回调 onEachFeature 之前设置 div 的内容。所以内容是空的。相反，最好将内容直接添加到元素（侧边栏或 div），或者在切换侧边栏时添加。

onEachFeature: function (feature, layer) {
    var popupContent = "<p>I started out as a GeoJSON " +
     feature.geometry.type + ", but now I'm a Leaflet vector!</p>";

    if (feature.properties && feature.properties.popupContent) {
      popupContent += feature.properties.popupContent;
    }
    $('#sidebar>.sidebar_content').html(popupContent);
    $('.custom-div').html(popupContent);
}

I have prepared small demo which is working and you can get an idea how it can be implemented.

【讨论】：

谢谢，将geojson信息连接到侧边栏对我有很大帮助，但它只显示我的geojson中最后一个点特征的值，它不会迭代
只需使用 $('#sidebar>.sidebar_content').append(popupContent);而不是 $('#sidebar>.sidebar_content').html(popupContent);或将您的标记保存到数组中。
我试过了，但它显示了整个列表，我尝试了一个迭代： var info = []; for (var prop in feature.properties) { info.push(prop + " : " + feature.properties[prop]);使用 layer.bindPopup 可以正常工作，但是当我使用 .append 将它绑定到 jQuery 代码时，它会显示整个列表，而使用 .html 它只显示最后一个功能
您似乎想显示已点击功能的信息？在这种情况下，您需要将内容添加到要素本身（或通过要素键/ID 将其存储在地图中）。并在使用 .html() 方法单击侧边栏时更新其内容。

【解决方案2】：

像这样使用串联。

var tbl1 = '<table><tr><th scope="row">OBRA </th></tr>';

var proy = L.geoJSON(json_Obras, {
    onEachFeature: function(feature, layer) { 
        tbl1 += '<tr><td>' + (feature.properties['OBRA'] !== null ?     Autolinker.link(String(feature.properties['OBRA'])) : '') + '</td></tr>'

    }
}).addTo(map);
tbl1 += '</table>';

jQuery 点击函数

$('.gral').click(function() {
  $('.t1').toggle('slow', function() {
     if($(this).is(":visible")){
       document.getElementsByClassName('t1').innerHTML = tbl1;
     }else{

     }
  });
});

【讨论】：