leaflet загрузить маркеры из json файла

Question

Не пойму как подгрузить маркеры из json файла. в таком виде работает:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>for so</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
    <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
    <div id="map" style="height: 600px"></div>
    <script type="text/javascript">
    var map = L.map('map', {center: [0.0, 0.0], minZoom: 2, zoom: 3,})
    
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: ['a', 'b', 'c'],
    }).addTo(map)
    
    var markers = [{
            "comment":"zero",
            "latitude":0.0,
            "longitude":0.0
    },
    {
            "comment":"ten",
            "latitude":10.0,
            "longitude":10.0
    }]
    
    for (var i = 0; i < markers.length; ++i) {
      L.marker([markers[i].latitude, markers[i].longitude])
        .bindPopup('<b>Comment: </b>' + markers[i].comment).addTo(map)
    }
    
    </script>
</body>
</html>

Если json отдельно сохранить в файле markers.js и подключить к странице, то все тоже работает

var markers = [{
        "comment":"zero",
        "latitude":0.0,
        "longitude":0.0
},
{
        "comment":"ten",
        "latitude":10.0,
        "longitude":10.0
}]

Не получается, что бы данные грузились из .json

БЛОГ НА HUSL

leaflet загрузить маркеры из json файла

Ответы (0 шт):