javascript - 传单折线不起作用

Question

我正在尝试绘制折线来连接一组航路点。但我得到了一个像这样的空 div

而不是带有路线的 map 。

我的代码是这样的:

    <script>
            // set center coordinates
            var centerlat = 48.05;
            var centerlon = 44.25;

            // set default zoom level
            var zoomLevel = 3;

            // initialize map
            var map = L.map('map-track').setView([centerlat,centerlon], zoomLevel);
            var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
            var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
            var osm = new L.TileLayer(osmUrl, {minZoom: 1, maxZoom: 18, attribution: osmAttrib});
            var lats = [];
            var lons = [];

            lats = ${lats};
            lons = ${lons};
            map.addLayer(osm);
//Here I fill an array with coordinates
            var wps = [];
            for (var j = 0; j < lats.length; j++){
                wps.push({latLng: L.latLng(lats[j], lons[j])});

            }
            L.Routing.control({
                polyline: wps,
                lineOptions: {styles: [{color: 'black', opacity: 0.15, weight: 9},
                    {color: 'white', opacity: 0.8, weight: 6},
                    {color: 'blue', opacity: 0.3, weight: 15}],
                    addWaypoints: false},
                createMarker: function() { return null; },
                show: false
            }).addTo(map);
            for (var i = 0; i < lats.length; i++){
                if (i == 0) {
                    L.marker( [lats[i], lons[i]]).addTo(map);
                }
                if (i == lats.length - 1) {
                    L.marker( [lats[i], lons[i]]).addTo(map);
                }
            }
            map.fitBounds(group.getBounds());
            group.addTo(map);
        </script>

有人可以告诉我哪里出错了吗？

Answer 1

确保您至少有一个瓦片图层，并且您已设置 map 的初始中心和缩放级别。