gogowq
@gogowq
Ozh domosh acha ozh

Как вывести инфо выбранного маркера leafleat js map в своём DIV вне поп-апа?

У меня есть карта -
// Latitude, longitude, Zoom Level
        var map = L.map('map__riot').setView([38.6245, -90.1506], 14);

        // TileLayer
        L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}.png', {
            attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            minZoom: 10,
            maxZoom: 16,
            ext: 'png'
        }).addTo(map);

        // Iterate over the markers and add them to the map
        for (var i = 0; i < sites.length; i++ ) {
            marker = new L.marker([sites[i].lat, sites[i].lng])
            .bindPopup('<p class="popup__header">'+ sites[i].address + '</p><p class="popup__description">' + sites[i].description + '</p>' )
            .addTo(map);

        }


Данные которые мне нужны,лежат тут - sites[i].description
Само собой при клике маркер (с учёта что их несколько) ,данные там меняются
Сейчас они выводятся в поп-ап окне этого скрипта.Я хочу их вывести в своём div,не в поп-апе как это сделано сейчас.
Тут-
<div class="description">
<p id="text_info"></p>
</div>


Документацию я смотрел,но ничего в Example не нашёл. Поделитесь,как мне выводить данные при клике на маркер в своём div
  • Вопрос задан
  • 55 просмотров
Решения вопроса 2
freeExec
@freeExec
Участник OpenStreetMap
У маркера есть событие на клик. Вот в нём и формируйте свой див.
Ответ написан
gogowq
@gogowq Автор вопроса
Ozh domosh acha ozh
for (const site of sites) {
                  marker = new L.marker([site.lat, site.lng], {
                        icon: greenIcon,
                     })
                   
                     .on('click', function(e) {

                        this.setIcon(redIcon);

                        document.getElementById('YOURDIV').textContent = site.address
                     })

                     .addTo(map);
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы