Сделайте маркеры листовки кликабельными и выводите данные на div - PullRequest
Новая
       19

Сделайте маркеры листовки кликабельными и выводите данные на div

0 голосов
/ 03 апреля 2019

У меня есть следующий скрипт, создающий карту Leaflet и добавляющий некоторые маркеры из данных, переданных контроллером, для ветки в моем приложении symfony4. 

<script>

        function drawMap() {
            markerGroup.clearLayers();
            {% for person in people %}
                {% if person.geometry %}
                    L.marker(['{{person.geometry.x}}','{{person.geometry.y}}']).addTo(markerGroup);
                {% endif %}
            {% endfor %}
        }

        function fetchData() {
            let qElem = document.getElementById("id_q");
            let qText = encodeURIComponent(qElem.value);
            let schoolElem = document.getElementById("id_school");
            let schoolId = schoolElem.options[schoolElem.selectedIndex].value;
            let yearElem = document.getElementById("id_year");
            let yearId = yearElem.options[yearElem.selectedIndex].value;

            fetch("/map?school=" + schoolId + "&year=" + yearId + "&q=" + qText, {
              headers: {'X-Requested-With': 'XMLHttpRequest'}
            })
                .then(drawMap());
        }

        let map = L.map('map').setView([40.6207348, 22.9285512], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
            maxZoom: 18
        }).addTo(map);
        let markerGroup = L.layerGroup().addTo(map);

        ["id_q", "id_year", "id_school"].forEach(id => {
           document.getElementById(id).addEventListener("change", e => {
               fetchData();
           })
        });

        fetchData();
    </script>

Я хочу, чтобы он отображал данные, которые у меня есть на div. Я изменил команду L.marker следующим образом 

L.marker(['{{person.geometry.x}}','{{person.geometry.y}}'])
.addTo(map)
.on('click', function populate() {
                    document.getElementById('externaldiv')
                        .innerHTML = "<ul><li>{{person.name}}</li><li>{{person.school}}</li></ul>";
                }).addTo(markerGroup);

где 'externaldiv' - это идентификатор div, но, похоже, оно не работает.

...