Javascript 单张onEachFeature表格信息放入Div？

我试图从使用

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;

更新

我设法找到了如何做到这一点，基于：

var sidebar=L.control.sidebar（'sidebar'{
closeButton:false，
位置：'左'
});
map.addControl（侧栏）；
变量ptsty={
半径：8，
fillColor:#ff7800“，
颜色：“000”，
体重：1，
不透明度：1，
填充不透明度：0.8
};
功能onEachFeature（功能，图层）{
分层({
单击：打开侧栏
});
}
var lay1=L.geoJson（json_Obras{
pointToLayer：功能（特性、latlng）{
返回L.circleMarker（latlng，ptsty）
},
onEachFeature:onEachFeature
}).addTo（地图）；
函数openSidebar（e）{
边栏.toggle（）；
侧栏.setContent（“”+e.target.feature.properties.OBRA+“”）；
}

像这样使用串联

var tbl1='OBRA'；
var proy=L.geoJSON（json_Obras{
onEachFeature:函数（特性，层）{
tbl1+=''+（feature.properties['OBRA']！==null？Autolinker.link（String（feature.properties['OBRA']）：''）+''
}
}).addTo（地图）；
tbl1+=''像这样使用连接


var tbl1='OBRA'；
var proy=L.geoJSON（json_Obras{
onEachFeature:函数（特性，层）{
tbl1+=''+（feature.properties['OBRA']！==null？Autolinker.link（String（feature.properties['OBRA']）：''）+''
}
}).addTo（地图）；
tbl1+=''首先，在调用回调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);
}

onEachFeature:功能（功能，图层）{
var popupContent=“我一开始是一个GeoJSON”+
feature.geometry.type+”，但现在我是传单向量！
”；
if（feature.properties&&feature.properties.popupContent）{
popupContent+=feature.properties.popupContent；
}
$（'#侧边栏>.sidebar_content'）.html（popupContent）；
$（'.custom div'）.html（popupContent）；
}

首先，在调用回调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);
}

onEachFeature:功能（功能，图层）{
var popupContent=“我一开始是一个GeoJSON”+
feature.geometry.type+”，但现在我是传单向量！
”；
if（feature.properties&&feature.properties.popupContent）{
popupContent+=feature.properties.popupContent；
}
$（'#侧边栏>.sidebar_content'）.html（popupContent）；
$（'.custom div'）.html（popupContent）；
}

您正在生成的表的方式错误。在每次迭代中，您都会将完整的表分配给tbl1变量。没错，在切换回调中有任何建议吗？请检查div是否显示，然后放置文档。getElementsByClassName（'t1'）。innerHTML=tbl1；否则就空了；您正在生成的表是错误的。在每次迭代中，您都会将完整的表分配给tbl1变量。没错，在切换回调中有任何建议吗？请检查div是否显示，然后放置文档。getElementsByClassName（'t1'）。innerHTML=tbl1；否则就空了；谢谢，它帮助我将geojson信息连接到侧栏，但它只显示我的geojson中最后一个点功能的值，它不迭代使用$（“#侧栏>.sidebar_content”）.append（popupContent）；而不是$（'#sidebar>.sidebar_content'）.html（popupContent）；或者将标记保存到数组中。我尝试过，但它显示了整个列表，我尝试了一次迭代：var info=[]；对于（feature.properties中的var prop）{info.push（prop+“：“+feature.properties[prop]）；}，它可以很好地处理layer.bindpoppup，但是当我用.append将它绑定到jQuery代码时，它会显示整个列表，使用.html，它只显示最后一个功能您似乎想显示已单击功能的信息？在这种情况下，您需要向要素本身添加内容（或按要素键/id将其存储在地图中）。并在单击侧栏时使用.html（）方法更新侧栏的内容。谢谢，它帮助我将geojson信息连接到侧栏，但它只显示我的geojson中最后一点功能的值，它不会迭代使用$（'#sidebar>.sidebar_content'）。append（popupContent）；而不是$（'#sidebar>.sidebar_content'）.html（popupContent）；或者将标记保存到数组中。我尝试过，但它显示了整个列表，我尝试了一次迭代：var info=[]；对于（feature.properties中的var prop）{info.push（prop+“：“+feature.properties[prop]）；}，它可以很好地处理layer.bindpoppup，但是当我用.append将它绑定到jQuery代码时，它会显示整个列表，使用.html，它只显示最后一个功能您似乎想显示已单击功能的信息？在这种情况下，您需要向要素本身添加内容（或按要素键/id将其存储在地图中）。并在单击侧边栏时使用.html（）方法更新侧边栏的内容。
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>');
    }

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);
}