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 reference。

您是否有任何关于如何避免地图下方重复的提示？

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循环内的单张侧边栏

2 个答案: