Javascript: Strecke von A nach B in Karte anzeigen - Wie geht das?

Test fédération OSMF
1

Hallo,
ich bin Anfänger in Sachen Openstreetmap.
Ich programmiere eine progressive Web App mit HTML, CSS und Javascript.
Der Anwender soll die Möglichkeit haben, sich eine Strecke (Startort und Zielort jeweils mit Angabe des Ortes oder Postleitzahl + Strasse) sich auf der Karte anzeigen zu lassen.

Hier mein Versuch:

// Diese Funktion zeigt die Route auf der Karte an
function displayRouteOnMap(routeData, startCoordinates, endCoordinates) {
  // Konsolenausgabe zur Überprüfung der routeData
  console.log("Empfangene Routendaten:");
  console.log(routeData);

  // Überprüfe, ob das map-Objekt bereits existiert
  if (typeof map !== "undefined") {
    map.off();
    map.remove();
  }

  // Setze das Karten-DIV sichtbar
  mapidDiv.style.display = "block";


  map = L.map("mapid").setView(
    [
      (startCoordinates.latitude + endCoordinates.latitude) / 2,
      (startCoordinates.longitude + endCoordinates.longitude) / 2,
    ],
    10
  ); // Hier die erste Zeile für die Karte mit dem Durchschnitt der Koordinaten von Start und Ziel

  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution:
      '© OpenStreetMap contributors',
  }).addTo(map);
  const route = L.geoJSON(routeData);
  route.addTo(map); // Hier die zweite Zeile für die Hinzufügung der Route
}




/**
 * Zeigt eine Openstreetmap-Karte an
 * @param {address} address der gesprochen werden soll.
 */

function showMapWithAddress(address) {
  let vaddress = escapeHtml(address);

  // Überprüfe, ob das map-Objekt bereits existiert
  if (typeof map !== "undefined") {
    map.off();
    map.remove();
  }

  map = L.map("mapid");
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution:
      '© OpenStreetMap contributors',
  }).addTo(map);

  // Setze das Karten-DIV sichtbar
  mapidDiv.style.display = "block";

  let marker;

  function geocodeAddress(vaddress) {
    let url = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(
      vaddress
    )}`;

    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        if (data.length > 0) {
          var latitude = data[0].lat;
          var longitude = data[0].lon;

          if (marker) {
            map.removeLayer(marker);
          }

          marker = L.marker([latitude, longitude]).addTo(map);

          // Setzen der Kartenposition basierend auf den geokodierten Koordinaten
          map.setView([latitude, longitude], 15);
        } else {
          alert("Geokodierung fehlgeschlagen: Adresse nicht gefunden");
        }
      })
      .catch((error) => {
        alert("Fehler bei der Geokodierung: " + error);
      });
  }

  geocodeAddress(vaddress);
}

Die Daten der Strecke, werden in der Browser-Konsole korrekt ausgegeben, aber das anzeigen der Strecke in der Karte klappt nicht.

Frage:
Wer kann mir helfen?

12 posts - 2 participants

Read full topic

Ce sujet de discussion accompagne la publication sur https://community.openstreetmap.org/t/javascript-strecke-von-a-nach-b-in-karte-anzeigen-wie-geht-das/106074