Как создать видимый маршрут/путь на карте листовки?

У меня есть приложение, которое позволяет пользователю увидеть маршрут между его местоположением и местом, куда он хочет добраться, и у меня возникают трудности с отображением маршрута, однако 2 маркера отображаются.

//Passing lat and lon value from a django template variable
const latitude = document.getElementById('lat').textContent;
const longtitude = document.getElementById('lon').textContent;


// Creating map options
let mapOptions = {
    center: [latitude, longtitude],
zoom: 18,
zoomControl: true,
zoomAnimation: true,
}
  
// Creating a map object guessing if there's an error it could be down here...
var map = new L.map('map', mapOptions);
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
});
map.addLayer(layer);
L.marker([latitude,longtitude]).addTo(map);

const btn = document.getElementById('create_route');

btn.addEventListener("click",function create_route(e){
   
    function success(pos) {
   const crd = pos.coords;
   let crdLat = crd.latitude, crdLon = crd.longitude;
   L.Routing.control({
    waypoints: [
        L.latLng(latitude,longtitude),
        L.latLng(crdLat,crdLon) 
    ],
    autoRoute: true,
    routeWhileDragging: true
   }).addTo(map);
}

    //get user location
    navigator.geolocation.getCurrentPosition(success);
   })

Также я получаю эту ошибку в моей консоли

leaflet-routing-machine.js:15868 Ошибка маршрутизации: {message: 'HTTP request failed: undefined', url: 'https://router.project-osrm.org/route/v1/driving/-...erview=false&alternatives=true&steps=true&hints=;', status: -1, target: XMLHttpRequest}

Любая помощь будет высоко оценена, я открыт и для других альтернатив... Если только это поможет сделать работу.

Вернуться на верх