リーフレットのポリラインが動作しない

Question

私は、ウェイポイントの配列を接続するためにポリラインを描画しようとしています。しかし、私はこのような空のdivを得ています

ルートのあるマップの代わりに。

私のコードはこれです：

<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

タイルレイヤーが1つ以上で、地図の初期中心とズームレベルを設定していることを確認してください。