使传单标记可单击并在div上显示数据

Question

我有以下脚本创建一个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的ID，但似乎不起作用。