while 循环中的传单侧边栏

Question

我有一个包含多个点（纬度、经度和每个点的一些文本）的数据集，我想使用 Leaflet 在地图上显示这些点。我没有使用 Leaflet 内置弹出窗口，而是尝试使用 leaflet-sidebar，它允许在单击标记时打开侧边栏。

如果你有兴趣，你可以在这里看到一个例子（只有一个标记）： https://github.com/Turbo87/leaflet-sidebar/blob/master/examples/index.html

如您所见，我正确地为每个标记打开了侧边栏，但每个 <div> 的内容显示在 也在地图下方 。这是因为我在 PHP while 循环中有 <div>，如下所示：

<?php
$i = 0;
while($result = mysql_fetch_array($objQuery)){
$i++;
$lat = $result['lat'];
$lon = $result['lon'];
$text = $result['some_text'];
?>

<div id="sidebar_<?=$i;?>" align="left">
<b>text</b>: <?=$some_text;?>
</div>

<script>
        var sidebar_<?=$i;?> = L.control.sidebar('sidebar_<?=$i;?>', {
        closeButton: true,
        position: 'left'
        });
        map.addControl(sidebar_<?=$i;?>);
        setTimeout(function () {
        sidebar_<?=$i;?>.hide();
        }, 500);
        var marker = L.marker([<?php echo $lat;?>, <?php echo $lon;?>]).addTo(map).on('click', function () {
        sidebar_<?=$i;?>.toggle();
        });
</script>

<?php
}
?>

如果我将 <div id="sidebar_<?=$i;?>"> 放在 while 循环之外，我无法收集每个标记 lat/lon/text 参考。

关于如何避免地图下方的重复，您有什么建议吗？

Answer 1

侧边栏样式需要添加display: none <div> -

<div id="sidebar_<?=$i;?>" align="left" style="display:none">
<b>text</b>: <?=$some_text;?>
</div>

您可能可以使用类以更简洁的方式完成它，但这应该让您继续。

Answer 2

我找到了解决方法！

在 plugin webpage 上有一条动态添加内容到 <div> 的注释。基本上，您需要将 html 中的 <div> 留空，并在脚本部分添加内容，使用 setContent:

<script>
        var sidebar_<?=$i;?> = L.control.sidebar('sidebar_<?=$i;?>', {
            closeButton: true,
            position: 'left'
        });

//HERE IT IS:

        sidebar_<?=$i;?>.setContent('<b>categoria</b>: <?=$categoria;?><br><br><b>problema</b>: <?=$descrizione;?><br><br><b>proposta</b>: <?=$soluzione;?><br><br><div class="smaller">data segnalazione: <?=$giorno."/".$mese."/".$anno;?></div>');

        map.addControl(sidebar_<?=$i;?>);
        setTimeout(function () {
            sidebar_<?=$i;?>.hide();
        }, 500);

        var marker = L.marker([<?php echo $lat;?>, <?php echo $lon;?>], {icon: iconarossa}).addTo(map).on('click', function () {
            sidebar_<?=$i;?>.toggle();
        });
</script>

现在看起来 as I wished。

while 循环中的传单侧边栏

Leaflet sidebar within a while loop

php

sidebar

while-loop

leaflet