Боковая панель Leaflet во время цикла

Question

У меня есть набор данных с несколькими точками (широта, долгота и немного текста для каждой), которые я хотел бы показать на карте, используя Leaflet.Вместо использования встроенных всплывающих окон Leaflet я пытаюсь использовать leaflet-sidebar , который позволяет открывать боковую панель при нажатии на маркер.

Если вам интересно, вы можете увидетьпример (с одним маркером) здесь: https://github.com/Turbo87/leaflet-sidebar/blob/master/examples/index.html

Как видите, я правильно открываю боковую панель для каждого маркера, но содержимое каждого <div> отображается также под картой.Это связано с тем, что у меня есть <div> внутри цикла PHP, как показано ниже:

<?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, я не смогу собрать каждый из нихмаркер широта / долгота / текстовая ссылка.

Есть ли у вас какие-либо советы, как избежать этого повторения под картой?

Answer 1

Я нашел обходной путь!

На веб-странице плагина есть примечание для динамического добавления содержимого в <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>

Теперь это выглядит так, как я хотел .

Answer 2

Вам нужно добавить display: none к стилю боковой панели <div> -

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

Возможно, вы можете сделать это аккуратно с классами, но это должно помочь вам.