Wir werden ein Projekt ähnlich wie Google Maps erstellen. Das Projekt wird einige Grundfunktionen von Google Maps abdecken, etwa das Lokalisieren bestimmter Orte auf der Karte oder das Planen von Routen zwischen Orten. Darüber hinaus können Benutzer mithilfe der Geokodierung den Standort einer Postanschrift ermitteln.
Wir werden React und React Leaflet im Frontend sowie Node.js, Express.js und verwendenSuperface OneSDKim Backend.
Das endgültige Projekt finden Sie hierauf GitHub.
Frontend: Einrichten einer Karte mit Markierungen
Beginnen wir mit der Erstellung eines leeren React-Projekts (mitCreate-React-App):
Öffnen Sie Ihr Terminal und navigieren Sie zu dem Verzeichnis, in dem Sie Ihren Projektordner erstellen möchten.
Führen Sie den folgenden Befehl aus, um ein neues React-Projekt zu erstellen (Replace
npx create-react-app<Projektname>Navigieren Sie mit dem folgenden Befehl in den Projektordner:
CD <Projektname>Öffnen Sie das Projekt in Ihrem Code-Editor.
Im
srcOrdner, suchen Sie denApp.jsDatei. Dies ist die Hauptdatei, in der wir Änderungen für das Projekt vornehmen. Entfernen Sie den gesamten Code in dieser Datei.Entfernen Sie optional alle unnötigen Dateien, wie Testdateien, Standardlogos usw.
Führen Sie das Projekt aus:
npmStart
Hinzufügen der Kartenkomponente
Um eine Kartenkomponente hinzuzufügen, stehen Ihnen viele Optionen zur Verfügung, z. B. Google Maps oder Mapbox, diese sind jedoch nicht kostenlos. Wir werden verwendenFlugblatt, eine Open-Source-JavaScript-Bibliothek. Mit Leaflet können Sie ganz einfach interaktive Karten erstellen und Markierungen, Pop-ups und andere Arten von Datenvisualisierungen hinzufügen. Leaflet unterstützt verschiedene Anbieter für Kartenressourcen, wir bleiben jedoch bei der Standardeinstellung.OpenStreetMap.
Broschüre hat vieleoffizielle und Drittanbieter-Pluginsund Verpackungen. Da wir React verwenden, können wir verwendenReact-Broschüredas Komponenten zum Rendern von Leaflet-Karten in React bereitstellt.
Zuerst installierenFlugblatt,React-BroschüreUndLeaflet-Defaulticon-Kompatibilität. Das letzte Paket behebt die Kompatibilität mit dem Webpack-Bundler (verwendet von create-react-app), um Bilder korrekt aus dem Leaflet-Paket zu laden.
npm InstallierenReact-Broschüre, Broschüre, Broschüre, Standardsymbol, KompatibilitätFügen Sie den folgenden Code einApp.cssDatei:
src/App.css
.Broschürencontainer { Breite: 100vw; Höhe: 100vh;}Und schließlich fügen Sie den folgenden Code hinzuApp.jsDatei und prüfen Sie, ob es funktioniert:
src/App.js
importieren './App.css';importieren 'leaflet/dist/leaflet.css';importieren 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';importieren { MapContainer, TileLayer } aus 'react-flyer';importieren 'leaflet-defaulticon-compatibility';Funktion App() { zurückkehren ( <div Klassenname="App"> <MapContainer Center={[51.505, -0,09]} Ausweis="Karten-ID" Zoomen={13}> <TileLayer URL="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> MapContainer> div> );}Export Standard App;
Markierungen auf einer Karte hinzufügen
Um Orte auf der Karte zu lokalisieren, können wir das verwendenMarkerUndAufpoppenKomponenten aus dem React Leaflet. DerMarkerMit der Komponente können Sie eine Markierung (Stecknadel) an einer bestimmten Stelle auf der Karte hinzufügen, während dieAufpoppenDie Komponente zeigt zusätzliche Informationen an, wenn auf die Markierung geklickt oder getippt wird.
Fügen Sie den folgenden Code hinzuApp.js:
src/App.js
importieren './App.css';importieren 'leaflet/dist/leaflet.css';importieren 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';importieren { MapContainer, TileLayer, Marker, Aufpoppen } aus 'react-flyer';importieren 'leaflet-defaulticon-compatibility';Funktion App() { constPosition= [51.505, -0,09]; zurückkehren ( <div Klassenname="App"> <MapContainer Center={[51.505, -0,09]} Ausweis="Karten-ID" Zoomen={13}> <Marker Position={Position}> <Aufpoppen>Hallo WeltAufpoppen> Marker> <TileLayer URL="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> MapContainer> div> );}Export Standard App;
Back-End: Lokalisierung des vom Benutzer eingegebenen Standorts
Nachdem wir nun verstanden haben, wie man Markierungen hinzufügt, können wir damit beginnen, eine vom Benutzer eingegebene Adresse zu lokalisieren. Dazu wird eine Geokodierungs-API verwendet, um die Adresse in einen Satz Koordinaten umzuwandeln, der dann zum Platzieren einer Markierung auf der Karte verwendet werden kann.
Wir werden mithilfe von Node.js und Express eine Backend-API für die Karte einrichten. Sobald ein Benutzer eine Adresse eingibt, wird diese mithilfe einer Geokodierungs-API in Standortkoordinaten übersetzt – dieser Teil wird von Superface übernommen. Wir werden die zurückgegebenen Koordinaten verwenden, um die Markierung auf einer Karte zu platzieren.
Einrichten des Serverprojekts
Erstellen Sie im Projektordner einen neuen Ordner mit dem NamenServerum den serverseitigen Code leer zu speichernpackage.jsonDatei.
mkdirServerCDServernpmdrin-yAls nächstes installieren Sie Express.js, um serverseitige Anfragen zu verarbeiten.
Server/
npm InstallierenäußernErstellen Sie abschließend eine leereserver.jsDatei in diesem Ordner.
Geokodierung mit OneSDK implementieren
Ich habe mich für Superface für die API-Integration entschieden, weil es den Prozess unglaublich einfach macht. Mit Superface muss ich mich nicht mit der mühsamen API-Dokumentation herumschlagen und kann mehrere Anbieter mit derselben Schnittstelle nutzen. Darüber hinaus ist dieSuperface-Katalogbietet viele vorgefertigte API-Anwendungsfälle, was es zu einem wertvollen Werkzeug für Ihr Toolkit macht.
Beginnen Sie mit der InstallationSuperface OneSDKin Ihre Server-App:
Server/
npmi @superfaceai/one-sdkDann implementieren Sie einen Anwendungsfall. Wir werden verwendenGeokodierungAnwendungsfall mitNämlichAnbieter. Sie können aber natürlich auch einen anderen Anbieter nutzen. Kopieren Sie den Beispielcode in Ihrserver.jsDatei und nehmen Sie einige Änderungen vor, damit wir die Informationen, die wir vom Benutzer erhalten, senden können:
server/server.js
const { SuperfaceClient } = erfordern('@superfaceai/one-sdk');constSDK= neu SuperfaceClient();asynchron Funktion laufen(loc) { // Profil laden constProfil= erwartenSDK.getProfile('Adresse/Geokodierung@3.1.2'); // Profil verwenden constErgebnis= erwartenProfil.getUseCase('Geokodieren').ausführen( { Anfrage:loc, }, { Anbieter: 'nämlich', } ); // Behandeln Sie das Ergebnis versuchen { constDaten=Ergebnis.auspacken(); Konsole.Protokoll(Daten); } fangen (Fehler) { Konsole.Fehler(Fehler); }}laufen('Taj Mahal');Führen Sie diese Funktion aus und die Koordinaten werden zurückgegeben:
Server/
$Knotenserver.js{Breite:'27.1750123', Längengrad:'78.04209683661315' }Standortsuche hinzufügen
Der erste Schritt besteht darin, ein Eingabefeld zu erstellen, in das der Benutzer einen Standort eingeben kann. Nach der Übermittlung senden wir die Standortdaten über eine Abrufanforderung und verwenden sie, um die Koordinaten dieses Standorts zu ermitteln.
Zusätzlich werde ich verwendenSchriftart Superum unserem Projekt Symbole hinzuzufügen. Dadurch wird es optisch ansprechend und trägt zu seinem Gesamtdesign bei:
CD .. # Gehen Sie mit dem React-Projekt vom Server zum Hauptverzeichnis zurücknpm Installieren@fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/react-fontawesome@latestJetzt können wir die Symbole in unserem Projekt verwenden. Fügen Sie den folgenden Code einApp.jsDatei:
src/App.js
importieren './App.css';importieren { FontAwesomeIcon } aus '@fortawesome/react-fontawesome';importieren {faLocationDot} aus '@fortawesome/free-solid-svg-icons';importieren 'leaflet/dist/leaflet.css';importieren 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';importieren { MapContainer, TileLayer, Marker, Aufpoppen } aus 'react-flyer';importieren 'leaflet-defaulticon-compatibility';Funktion App() { constPosition= [51.505, -0,09]; zurückkehren ( <div Klassenname="App"> <form Klassenname="Eingabeblock"> <Eingang Typ="Text" Ausweis="Standort" Name="Standort" erforderlich Platzhalter="Ort eingeben" /> <Taste Typ="einreichen" Klassenname="addloc"> <FontAwesomeIcon Symbol={faLocationDot} Stil={{ Farbe: '#1EE2C7' }} /> Taste> form> <MapContainer Center={[51.505, -0,09]} Ausweis="Karten-ID" Zoomen={13}> <Marker Position={Position}> <Aufpoppen>Hallo WeltAufpoppen> Marker> <TileLayer URL="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> MapContainer> div> );}Export Standard App;Fügen Sie den folgenden CSS-Code einApp.css:
src/App.css
/* Standortformular */.inputBlock { Anzeige:biegen; Rechtfertigungsinhalt:Raum dazwischen; Position:absolut; Rechts: 2vw; Unterseite: 2vh; Polsterung: 10px; Z-Index: 500;}.addloc { Polsterung: 5px;}.inputBlockEingang { Grenze: 2pxsolideRGB(41, 38, 38); Schriftgröße: 1.2rem;}.inputBlockTaste { Hintergrundfarbe: #282c34; Schriftgröße: 1.5rem; Grenze: 2px Schwarzsolide;}
Um den eingegebenen Ort beizubehalten und auf der Karte als Punkt anzuzeigen, müssen wir seine Koordinaten mithilfe von abrufenbringenFunktion und speichern Sie sie mit deruseStateHaken.
Fügen Sie den folgenden Code einApp.jsDatei:
src/App.js
importieren './App.css';importieren {useState} aus 'reagieren';importieren { FontAwesomeIcon } aus '@fortawesome/react-fontawesome';importieren {faLocationDot} aus '@fortawesome/free-solid-svg-icons';importieren 'leaflet/dist/leaflet.css';importieren 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';importieren { MapContainer, TileLayer, Marker, Aufpoppen } aus 'react-flyer';importieren 'leaflet-defaulticon-compatibility';Funktion App() { const [Standortmarkierungen,setLocationMarkers] = useState([]); asynchron Funktion handleMarkerSubmit(Fall) {Fall.Standard verhindern(); constFormulardaten= neu Formulardaten(Fall.Ziel); constEingabeort=Formulardaten.erhalten('Standort'); constres= erwarten bringen( '/api/geocode?' + neu URLSearchParams({ Standort:Eingabeort}).toString() ); Wenn (!res.OK) { constirren= erwartenres.Text(); Alarm(`Etwas ist schiefgelaufen.\n${irren}`); } anders { constDaten= erwartenres.json(); lassenneuen Ort= { Adresse:Daten.Standort, lat:Daten.Koordinaten.Breite, lang:Daten.Koordinaten.Längengrad, }; setLocationMarkers((Standorte) => [...Standorte,neuen Ort]); } } zurückkehren ( <div Klassenname="App"> <form Klassenname="Eingabeblock" onSubmit={handleMarkerSubmit}> <Eingang Typ="Text" Ausweis="Standort" Name="Standort" erforderlich Platzhalter="Ort eingeben" /> <Taste Typ="einreichen" Klassenname="addloc"> <FontAwesomeIcon Symbol={faLocationDot} Stil={{ Farbe: '#1EE2C7' }} /> Taste> form> <MapContainer Center={[51.505, -0,09]} Ausweis="Karten-ID" Zoomen={13}> {Standortmarkierungen.Karte((loc,Taste) => { zurückkehren ( <Marker Taste={Taste} Position={[loc.lat,loc.lang]}> <Aufpoppen>{loc.Adresse}Aufpoppen> Marker> ); })} <TileLayer URL="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> MapContainer> div> );}Export Standard App;Und der folgende Code inserver.js:
server/server.js
constäußern= erfordern('äußern');constApp= äußern();const { SuperfaceClient } = erfordern('@superfaceai/one-sdk');constSDK= neu SuperfaceClient();const HAFEN = 5000;App.verwenden(äußern.json());asynchron Funktion geocodeLocation(loc) { // Profil laden constProfil= erwartenSDK.getProfile('Adresse/Geokodierung@3.1.2'); // Profil verwenden constErgebnis= erwartenProfil.getUseCase('Geokodieren').ausführen( { Anfrage:loc, }, { Anbieter: 'nämlich', } ); // Behandeln Sie das Ergebnis constDaten=Ergebnis.auspacken(); zurückkehrenDaten;}App.erhalten('/api/geocode', asynchron (erf,res) => { versuchen { const Standort =erf.Anfrage.Standort; constKoordinaten= erwarten geocodeLocation(Standort);res.json({ Standort,Koordinaten}); } fangen (Fehler) {res.Status(500).json(Fehler); }});App.Hören(HAFEN, () => { Konsole.Protokoll(`Server lauscht${HAFEN}`);});Jetzt müssen wir den Backend-Server starten.
CDServer/npmStartUm von unserer React-Anwendung aus auf den Backend-Server zuzugreifen, können wir verwendenfordert Proxying in Create React App an. Der Server läuft auf dem Port5000, also fügen wir oben die folgende Zeile hinzupackage.jsonDatei in unserem Projekt:
package.json
„Proxy“: „http://localhost:5000“Möglicherweise müssen Sie neu startenCreate-React-AppServer. Danach sollten Sie in der Lage sein, nach Standorten zu suchen und Markierungen in Ihrer App anzuzeigen.
Routing zwischen zwei Standorten
Routing-Maschine einrichten
Um mit Leaflet Routen zwischen zwei Standorten zu erstellen, verwenden wir aRouting-Plugin. Dieses Plugin ermöglicht es uns, Routen auf der Karte anzuzeigen.
Es gibt viele Plugins, die wir verwenden können. Ich werde mitgehenProspekt-Routing-Maschine.
Installieren Sie zunächst das Paket:
npm Installierenleaflet-routing-machine@3.2.12Ein ... kreierenRoutingMachine.jsDatei insrcOrdner und kopieren Sie den folgenden Code und fügen Sie ihn ein. Dadurch können wir eine Route zwischen den beiden verschiedenen Orten erstellen, zu denen wir gelangenWegpunkte
src/RoutingMachine.js
importieren L aus 'Flugblatt';importieren {createControlComponent} aus '@react-leaflet/core';importieren 'Flugblatt-Routing-Maschine';importieren 'flyt-routing-machine/dist/leaflet-routing-machine.css';const createRoutineMachineLayer = ({Wegpunkte}) => { constBeispiel= L.Routenführung.Kontrolle({ Wegpunkte:Wegpunkte.Karte(({Breite,Längengrad}) => L.latLng(Breite,Längengrad) ), ziehbare Wegpunkte: FALSCH, }); zurückkehrenBeispiel;};const RoutingMachine = createControlComponent(createRoutineMachineLayer);Export Standard RoutingMachine;Dann werden wir dies importierenRoutingMachine.jsKomponente in unsereApp.jsDatei und versehen Sie sie mit den Koordinaten von zwei verschiedenen Orten als Requisiten.
Kopieren Sie den folgenden Code und fügen Sie ihn einApp.jsDatei:
src/App.js
importieren './App.css';importieren {useState,useEffect} aus 'reagieren';importieren { FontAwesomeIcon } aus '@fortawesome/react-fontawesome';importieren {faLocationDot,faRoute} aus '@fortawesome/free-solid-svg-icons';importieren 'leaflet/dist/leaflet.css';importieren 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';importieren { MapContainer, TileLayer, Marker, Aufpoppen } aus 'react-flyer';importieren 'leaflet-defaulticon-compatibility';importieren RoutingMachine aus './RoutingMachine';Funktion App() { const [Standortmarkierungen,setLocationMarkers] = useState([]); constWegpunkte= [ { Breite: 51.505, Längengrad: -0,09, }, { Breite: 51.467, Längengrad: -0,458, }, ]; asynchron Funktion handleMarkerSubmit(Fall) {Fall.Standard verhindern(); constFormulardaten= neu Formulardaten(Fall.Ziel); constEingabeort=Formulardaten.erhalten('Standort'); constres= erwarten bringen( '/api/geocode?' + neu URLSearchParams({ Standort:Eingabeort}).toString() ); Wenn (!res.OK) { constirren= erwartenres.Text(); Alarm(`Etwas ist schiefgelaufen.\n${irren}`); } anders { constDaten= erwartenres.json(); lassenneuen Ort= { Adresse:Daten.Standort, lat:Daten.Koordinaten.Breite, lang:Daten.Koordinaten.Längengrad, }; setLocationMarkers((Standorte) => [...Standorte,neuen Ort]); } } zurückkehren ( <div Klassenname="App"> <form Klassenname="Eingabeblock" onSubmit={handleMarkerSubmit}> <Eingang Typ="Text" Ausweis="Standort" Name="Standort" erforderlich Platzhalter="Ort eingeben" /> <Taste Typ="einreichen" Klassenname="addloc"> <FontAwesomeIcon Symbol={faLocationDot} Stil={{ Farbe: '#1EE2C7' }} /> Taste> form> <MapContainer Center={[51.505, -0,09]} Ausweis="Karten-ID" Zoomen={13}> {Standortmarkierungen.Karte((loc,Taste) => { zurückkehren ( <Marker Taste={Taste} Position={[loc.lat,loc.lang]}> <Aufpoppen>{loc.Adresse}Aufpoppen> Marker> ); })} <TileLayer URL="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> {Wegpunkte? <RoutingMachine Wegpunkte={Wegpunkte} /> : ''} MapContainer> div> );}Export Standard App;
Routing-Eingänge
Wir werden Eingabefelder hinzufügen, damit der Benutzer zwei verschiedene Orte eingeben kann, den Startpunkt und das Endziel. Dann fragen wir den Server nach Koordinatenbringenund übergeben Sie sie als Eigenschaften an dieRoutingMachine.jsKomponente. Wir werden auch eine weitere Route erstellenserver.jsDatei zur Bearbeitung von Anfragen zur Berechnung der Route zwischen den beiden Standorten.
Kopieren Sie den Code und fügen Sie ihn einApp.js:
src/App.js
importieren './App.css';importieren {useState,useEffect} aus 'reagieren';importieren { FontAwesomeIcon } aus '@fortawesome/react-fontawesome';importieren {faLocationDot,faRoute} aus '@fortawesome/free-solid-svg-icons';importieren 'leaflet/dist/leaflet.css';importieren 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';importieren { MapContainer, TileLayer, Marker, Aufpoppen } aus 'react-flyer';importieren 'leaflet-defaulticon-compatibility';importieren RoutingMachine aus './RoutingMachine';Funktion App() { const [Standortmarkierungen,setLocationMarkers] = useState([]); const [Wegpunkte,setWaypoints] = useState(); const [showRoutingForm,setFormView] = useState(FALSCH); useEffect(() => {}, [Wegpunkte]); asynchron Funktion handleMarkerSubmit(Fall) {Fall.Standard verhindern(); constFormulardaten= neu Formulardaten(Fall.Ziel); constEingabeort=Formulardaten.erhalten('Standort'); constres= erwarten bringen( '/api/geocode?' + neu URLSearchParams({ Standort:Eingabeort}).toString() ); Wenn (!res.OK) { constirren= erwartenres.Text(); Alarm(`Etwas ist schiefgelaufen.\n${irren}`); } anders { constDaten= erwartenres.json(); lassenneuen Ort= { Adresse:Daten.Standort, lat:Daten.Koordinaten.Breite, lang:Daten.Koordinaten.Längengrad, }; setLocationMarkers((Standorte) => [...Standorte,neuen Ort]); } } asynchron Funktion handleRouteSubmit(Fall) {Fall.Standard verhindern(); // Vorherige Wegpunkte zurücksetzen Wenn (Wegpunkte) { setWaypoints(); } // Formular ausblenden setFormView(FALSCH); constFormulardaten= neu Formulardaten(Fall.Ziel); constStandorte=Formulardaten.Nimm alle('Standort'); constres= erwarten bringen('/api/route', { Methode: 'POST', Kopfzeilen: { Akzeptieren: 'application/json', 'Inhaltstyp': 'application/json;charset=UTF-8', }, Körper: JSON.stringifizieren({Standorte}), }); Wenn (!res.OK) { constirren= erwartenres.Text(); Alarm(`Etwas ist schiefgelaufen.\n${irren}`); } anders { constDaten= erwartenres.json(); setWaypoints(Daten.Wegpunkte); } } zurückkehren ( <div Klassenname="App"> <form Klassenname="Eingabeblock" onSubmit={handleMarkerSubmit}> <Eingang Typ="Text" Ausweis="Standort" Name="Standort" erforderlich Platzhalter="Ort eingeben" /> <Taste Typ="einreichen" Klassenname="addloc"> <FontAwesomeIcon Symbol={faLocationDot} Stil={{ Farbe: '#1EE2C7' }} /> Taste> form> <div Klassenname="routeBlock"> <div Klassenname="addRoutes"> {showRoutingForm&& ( <form onSubmit={handleRouteSubmit}> <div Klassenname="posOne"> <Eingang Typ="Text" Name="Standort" erforderlich Platzhalter="Ausgangspunkt" /> div> <div Klassenname="postTwo"> <Eingang Typ="Text" Name="Standort" erforderlich Platzhalter="Endpunkt" /> div> <Taste Klassenname="addloc">Pfad findenTaste> form> )} <FontAwesomeIcon Symbol={faRoute} Stil={{ Farbe: '#1EE2C7' }} onClick={() => { setFormView((showRoutingForm) => !showRoutingForm); }} /> div> div> <MapContainer Center={[31.505, 70.09]} Ausweis="Karten-ID" Zoomen={4}> {Standortmarkierungen.Karte((loc,Taste) => { zurückkehren ( <Marker Taste={Taste} Position={[loc.lat,loc.lang]}> <Aufpoppen>{loc.Adresse}Aufpoppen> Marker> ); })} <TileLayer URL="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> {Wegpunkte? <RoutingMachine Wegpunkte={Wegpunkte} /> : ''} MapContainer> div> );}Export Standard App;Fügen Sie den folgenden CSS-Code hinzuApp.css:
src/App.css
/* Routing-Formular */.routeBlock { Position:absolut; links: 0,5vw; Unterseite: 2vh; Z-Index: 500; Polsterung: 5px; Schriftgröße: 2rem; Grenze: 2pxsolideRGB(41, 38, 38); Hintergrundfarbe: #282c34;}.routeBlockEingang { Schriftgröße: 1rem;}Und hier ist die endgültige Version vonserver.jsDatei:
server/server.js
constäußern= erfordern('äußern');constApp= äußern();const { SuperfaceClient } = erfordern('@superfaceai/one-sdk');constSDK= neu SuperfaceClient();const HAFEN = 5000;App.verwenden(äußern.json());asynchron Funktion geocodeLocation(loc) { // Profil laden constProfil= erwartenSDK.getProfile('Adresse/Geokodierung@3.1.2'); // Profil verwenden constErgebnis= erwartenProfil.getUseCase('Geokodieren').ausführen( { Anfrage:loc, }, { Anbieter: 'nämlich', } ); // Behandeln Sie das Ergebnis constDaten=Ergebnis.auspacken(); zurückkehrenDaten;}App.erhalten('/api/geocode', asynchron (erf,res) => { versuchen { const Standort =erf.Anfrage.Standort; constKoordinaten= erwarten geocodeLocation(Standort);res.json({ Standort,Koordinaten}); } fangen (Fehler) {res.Status(500).json(Fehler); }});App.Post('/api/route', asynchron (erf,res) => { versuchen { constStandorte=erf.Körper.Standorte; Wenn (Standorte.Länge !== 2) {res.Status(422).json({ Fehler: „2 Wegpunkte erwartet“ }); zurückkehren; } constWegpunkte= erwarten Versprechen.alle(Standorte.Karte((Standort) => geocodeLocation(Standort)) );res.json({Wegpunkte}); } fangen (Fehler) {res.Status(500).json(Fehler); }});App.Hören(HAFEN, () => { Konsole.Protokoll(`Server lauscht${HAFEN}`);});Google-Maps-Klon├── package.json├── package-lock.json├── öffentlich│ └── index.html├── README.md├── Server│ ├── package.json│ ├── package-lock.json│ └── server.js└── src├── App.css├── App.js├── index.css├── index.js└── RoutingMachine.jsIn diesem Tutorial haben wir gelernt, wie man mit Leaflet und React eine Google Maps-ähnliche Anwendung erstellt. Wir haben die Geolocation-API verwendet, um Standortkoordinaten zu identifizieren und Markierungen zu platzieren sowie eine Route zwischen zwei verschiedenen Standorten zu erstellen. Das endgültige Projekt finden Sie hierauf GitHub.
Es gibt viele weitere Funktionen, die hinzugefügt werden können, um dieses Kartenprojekt zu verbessern. Zum Beispiel die Echtzeitverfolgung des Standorts des Benutzers, die Integration von Sprachunterstützung für die Routenplanung,Verwendung der IP-Geolokalisierungs-API, Anpassen von Markierungssymbolen und vieles mehr.
Wenn Sie Vorschläge haben, welche Funktionen hinzugefügt werden sollen, oder wenn Sie zeigen möchten, wie Sie dieses Tutorial verwendet haben, teilen Sie uns dies bitte mitunser Discord. Seien Sie nicht schüchtern!