时间戳

首页 > 解决方案 > while循环内的传单侧边栏

php - while循环内的传单侧边栏

问题描述

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

如果您有兴趣，可以在此处查看示例（带有一个标记）： https ://github.com/Turbo87/leaflet-sidebar/blob/master/examples/index.html

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

<?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 参考。

对于如何避免在地图下方重复出现这种情况，您有什么建议吗？

标签： phpwhile-loopleafletsidebar

解决方案

我找到了解决方法！

在插件网页上有一个注释可以<div>动态添加内容。基本上，您需要<div>在 html 中留空，并在脚本部分添加内容，使用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>

现在它看起来如我所愿。

推荐阅读