将小册子onEachFeature表信息转换为Div?

时间:2017-11-23 14:08:20

标签: javascript jquery html

我试图从使用geojson函数提取的onEachFeature中获取一个表格,它会显示一条警告,但我尝试了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>');
    }

2 个答案:

答案 0 :(得分:0)

使用这样的连接。

&#13;
&#13;
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>';
&#13;
&#13;
&#13;

jQuery点击功能

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

     }
  });
});

答案 1 :(得分:0)

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

} catch (FileNotFoundException obj) {
    System.out.println("errr occured");
}

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