HTML, JavaScript, YandexAPI und eine Prise Bootstrap / Sudo Null IT News

Hey Habr!

Ich denke, dass jeder über YandexAPI Bescheid weiß, aber es reicht nicht aus, es zu wissen, man muss es anwenden. Heute werde ich eine kleine Aufgabe analysieren, die wie folgt lautet:

  • Sie müssen ein Formular erstellen, um die Adressen der Abfahrts- und Ankunftsorte einzugeben.

  • Erstellen Sie eine Karte und erstellen Sie eine Route vom Abfahrts- zum Ankunftspunkt.

Ich zeige eine der möglichen Implementierungen in JavaScript, erstelle ein HTML-Formular und peppe alles mit ein wenig Bootstrap v5 auf.

Was muss auf der Seite angezeigt werden, um die Aufgabe abzuschließen:

  • Eingabefeld für den Abfahrtsort;

  • Eingabefeld für den Ankunftsort;

  • Bestätigungsschaltfläche zum Senden des Formulars

  • einen Bereich zum Anzeigen einer Karte mit Informationen von wo und wo in Form einer Karte, wo sich die Karte oben befindet, und anderen Informationen unten.

Es ist erwähnenswert, dass die APIs nur mit einem Schlüssel funktionieren, der im persönlichen Konto des Yandex-Entwicklers erhältlich ist, wo Sie freien Zugriff auf die „JavaScript-API und den HTTP-Geocoder“ erhalten müssen. Ich werde den Prozess nicht malen, es ist dort leicht zu verstehen.

Jetzt Programmieren. Das Formular ohne das Anwenden von Stilen wird mittelmäßig aussehen, daher werde ich die endgültige Version mit Bootstrap zeigen, um das Material nicht mit Code aufzublähen, sondern in JavaScript zu schreiben. Die Formularimplementierung sieht folgendermaßen aus:

Problem

Testbeispiel!

Ort:

An:

Erstellungsdatum:

Im Code können Sie sehen, dass die Eingabe die Methode onblur hat. Seine Anwendung wird aufgerufen, wenn der Fokus aus dem Feld entfernt wird. Warum ist das notwendig? Um JavaScript aufzurufen, um die richtige Adresse zu erhalten, da eine Person beim Schreiben von Adressen einen Fehler machen kann, um dies zu vermeiden, ziehe ich das Ergebnis aus dem von der API bereitgestellten Geocoder und ersetze den Wert des Eingabefelds damit.

Da es zwei Eingabefelder gibt, muss die Funktion angepasst werden, damit beide Felder verwendet werden können. Dazu übergeben wir den Inhalt des Feldes und seine ID an die Funktion, um den neuen Wert an der richtigen Stelle einzusetzen.

Die Skriptimplementierung sieht folgendermaßen aus:

ymaps.ready (getcoords); form.addEventListener(‘submit’, getFormValue); Funktion getFormValue (Ereignis) { event.preventDefault (); } // Funktion zum Abrufen der korrekten Adresse function getcoords(value, inputID){ // Text von zusätzlichen Zeichen löschen let check = value.replace(/[!@#$%^&*()+]/g, ‘ ‘).replace(/\s+/g, ‘ ‘).trim(); // Korrektheit der eingegebenen Adresse überprüfen if ((check !== “”) && (check.length > 10)) { // Anfrage an den Geocoder let myGeo = new ymaps.geocode(check); // Antwort erhalten myGeo.then( function (res) { // Text durch Geocoder-Ergebnis ersetzen, indem das Land entfernt wird document.getElementById(idInput).value = res.geoObjects .get(0)[“properties”][“_data”][“text”]

.slice(8,); }); // im Fehlerfall eine Meldung anzeigen }else{ alert(“Bitte geben Sie einen gültigen Wert ein!”) } }

An dieser Stelle ist die Arbeit mit den Eingabefeldern beendet, bei der Eingabe der Adresse wechselt das Skript auf die Adresse, die in der Yandex-Datenbank hinterlegt und korrekt ist.

Der nächste Schritt besteht darin, eine Demonstration der Route auf der Karte mit Beschriftungen für Abfahrts- und Ankunftspunkte zu implementieren. Mit der Yandex-API können Sie eine Karte mit den erforderlichen Parametern anzeigen. Es ist besser, sich auf ein paar zu beschränken, damit die Karte nur das anzeigt, was Sie benötigen. Um die Aufgabe abzuschließen, benötigen Sie:

Apropos JavaScript, jedes Element ist ein Objekt mit einer Reihe von Funktionen, in diesem Fall eine Map. Es wird die ID des Elements übergeben, in dem sich die Karte befinden wird, sowie ein Wörterbuch mit zwei Schlüsseln mit den oben aufgeführten Werten. Danach wird die Methode route vom Objekt aufgerufen, mit der Sie einen Pfad von Punkt zu Punkt erstellen können. Es ist notwendig, eine Liste darauf zu übertragen, in der Informationen zu den Abfahrts- und Ankunftsorten gespeichert werden.

Die Liste kann folgende Informationen zu einem Punkt speichern:

Die Textversion ist zum Lösen bequemer, Sie müssen Adressen aus den Eingabefeldern abrufen und der Methode übergeben.

Nach dem Ausführen der Methode ist es notwendig, Beschriftungen für die Adressen an den entsprechenden Koordinaten anzuzeigen, dies geschieht, indem der erste und der letzte Wegpunkt abgerufen und an ihrer Stelle Symbole erstellt werden. Sie können den Text auf den Etiketten in der Form „Abfahrtsort“ und „Ankunftsort“ festlegen.

Fast hätte ich vergessen, es ist extrem wichtig, die Karte gut sichtbar auf der Strecke zu positionieren. Dazu gibt es eine setBounds-Methode auf dem Map-Objekt, die die Koordinaten von Punkten übernimmt, aber aufgrund dessen die Karte auf den Punkt zwischen ihnen zentriert. Sie können auch Kartenpositionierungseinstellungen mit 2 Parametern übergeben:

  • checkZoomRange – ein Parameter, der bestimmt, ob es möglich ist, den vom Benutzer angegebenen Zoomfaktor einzustellen;

  • zoomMargin ist ein Parameter, der den Versatz von den Grenzen des Kartenbereichs bestimmt.

Dann sieht der Code so aus:

ymaps.ready (loadMapData); // Funktion zum Starten des Renderns von Karten function loadMapData() { let cards = Array.from(document.getElementsByClassName(“card mb-3”)) for (card in cards) { let wayId = cards[card].firstElementChild.id; let dep = Karten[card].innerText.split(‘\n’)[2].slice(8,); let dest = Karten[card].innerText.split(‘\n’)[3].slice(6,); createWay(wayId, dep, dest); } } // Kartenerstellungsfunktion function createWay(divId, Abfahrt, Ziel) { var myMap = new ymaps.Map(divId,{ center: [52, 104], Zoom: 13 }); // Punkte auf der Karte bekommen ymaps.route([
departure,
destination
]).then( // zusätzliche Funktion zum Anzeigen von Markierungen und Positionieren der Karte function (route) { // Daten von Adressen abrufen myMap.geoObjects.add(route); // alle Routenpunkte abrufen var points = route.getWayPoints(); var lastPoint = points.getLength() – 1; // Beschriftungsstil – rotes Logo und automatische Breitenausrichtung points.options.set(‘preset’, ‘twirl#redStretchyIcon’); // Inhalte auf den ersten und letzten Punktpunkten erstellen .get (0).properties.set(‘iconContent’, ‘Startpunkt’); points.get(lastPoint).properties.set(‘iconContent’, ‘Ankunftspunkt’); // Kartenpositionierung myMap.setBounds ([points.get(0).geometry._coordinates,
points.get(lastPoint).geometry._coordinates], { checkZoomRange: true, zoomMargin: 10 }); }, // im Fehlerfall function (error) { alert(‘Ein Fehler ist aufgetreten: ‘ + error.message); }); }

Das Einfügen von Adressen in eine Karte ist einfach zu implementieren, ich denke, es wird keine Probleme geben.

Infolgedessen wurde die Yandex-API für die Arbeit mit Karten in Betracht gezogen und die Aufgabe zum Erstellen einer Route implementiert. Die Dokumentation bietet die Möglichkeit zu verstehen, wie die verschiedenen Methoden funktionieren und wie Sie sie anwenden können. Ich denke, dieses Material wird für unerfahrene Entwickler nützlich sein, die die Erstellung von Karten auf der Grundlage von Textdarstellungen von Adressen implementieren müssen.

Similar Posts

Leave a Reply

Your email address will not be published.