Question

我正在使用Leaflet在地图上徘徊，我有兴趣绘制一些折线来连接我创建的国家/地区标记（6个有效的标记）。唯一的问题是，当我运行代码时，即使我已检查代码没有问题且没有错误弹出窗口，geojson也未加载到地图上。下面是从头到尾的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin=""/>
        <!-- Make sure you put this AFTER Leaflet's CSS -->
        <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin=""></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            #map {
                height: 550px;
                width: 100%;
            }
        </style>
        <title>Leaflet JS map testing</title>
    </head>
    <body>
        <h2>Leaflet JS Map Testing</h2>
        <div id="map"></div>
        <script>
            var mymap = L.map('map').setView([20.594, 78.962], 4); //L.map('map') because it follows the div id in the parentheses
            const attribution = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'
            const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
            const tiles = L.tileLayer(tileUrl, { attribution });
            tiles.addTo(mymap);

            // Array of marker coordinates
            var markers = [
                {
                    coords:[4.21, 101.97],
                    country:'Malaysia',
                },
                {
                    coords:[20.594, 78.962],
                    country:'India',
                },
                {
                    coords:[35.861, 104.195],
                    country:'China',
                },
                {
                    coords:[23.421, 53.8478],
                    country:'UAE',
                },
                {
                    coords:[23.6978, 120.9605],
                    country:'Taiwan',
                },
                {
                    coords:[0.7892, 113.9213],
                    country:'Indonesia',
                },
            ];
            // Loop through markers
            for(var i = 0; i<markers.length; i++){
                addMarker(markers[i]);
            }
            // To add the marker coordinates
            function addMarker(props){ // Will not set the marker for the countries
                var marker = L.marker(props.coords).addTo(mymap).bindPopup(props.country).openPopup();
            }
            addMarker(); // To call the function

            // For GeoJSON features
            var myLines = {
                "type": "Feature",
                "properties": {
                    "name": "Please work",
                },
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [113.9213, 0.7892],[53.8478, 23.421],[101.97, 4.21]
                        ]
                }
            };
            L.geoJSON(myLines).addTo(map);
        </script>
    </body>
</html>

请告诉我您是否知道geojson无法在我的地图上工作的原因，或者代码是否有任何错误。

Answer 1

（至少）不是L.geoJSON(myLines).addTo(mymap);的最后一行吗？

如何在传单中加载geoJSON？

1 个答案: