onclick - 传单/JSON对象。标记 onclick 仅显示最后一条记录

Question

我的代码

 <div id='map'></div>
 <div id="info"></div>

 [...] 

var markers1 = new L.MarkerClusterGroup( { showCoverageOnHover: true } );

 $.ajax({
    type: "GET",
    url: "db.php",
    success: function (result) {
        var JSONobject = JSON.parse(result);
        var jnCount = JSONobject.length;
        for (var i = 0; i < jnCount; i++) {
            var marker = new L.Marker(new L.LatLng(JSONobject[i]["lat"],JSONobject[i]["lng"]),{ icon: myIcon1 });

            var id = JSONobject[i]["id"];
            var list = "<dl>"

                    + "<dt><b>CITTA':</b> " + JSONobject[i]["citta_"] + "</dt>";

            marker.on('click', function()
 { {document.getElementById('info').innerHTML = list;} }); 


            markers1.addLayer(marker);
        }
        map.addLayer(markers1);

    }

});

标记 onclick 只显示最后一条记录！我认为问题出在循环中，但我不明白如何解决它。任何想法？

谢谢

尼古拉

Answer 1

问题在于，当您调用 click 函数时，它会查看list函数内部的变量，这意味着它会查看list变量的最后一个值。堆栈答案中详细说明了问题和潜在的解决方案：Javascriptclosure inside loops

您可以尝试使用上述信息修复它，或者您可以将Leaflet Choropleth 教程修改为基于点。它目前基于多边形，但将其迁移到点和onClick函数应该不是什么大问题。