Geolocation API in React-Komponenten

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) fragt den Gerätestandort einmalig ab. Der Erfolgs-Callback erhält ein GeolocationPosition-Objekt. Das eignet sich, wenn Sie den Standort nur einmal benötigen, etwa um beim Klicken auf eine Schaltfläche das nächstgelegene Geschäft zu finden, statt eine laufende Bewegung zu verfolgen.

navigator.geolocation.watchPosition(successCallback, errorCallback, options) löst den Callback kontinuierlich aus, sobald sich die Geräteposition ändert. Die Methode gibt eine numerische watchId zurück. Das eignet sich für Echtzeitanwendungen wie die Sendungsverfolgung oder die Turn-by-Turn-Navigation, bei denen die Position aktuell bleiben muss.

Das GeolocationPosition-Objekt enthält eine coords-Eigenschaft mit latitude, longitude und accuracy (in Metern). Zu den zusätzlichen optionalen Feldern gehören altitude, altitudeAccuracy, heading und speed. Das Feld timestamp gibt an, wann die Position erfasst wurde.

Der Fehler-Callback erhält ein GeolocationPositionError-Objekt mit einer numerischen code-Eigenschaft. Code 1 steht für PERMISSION_DENIED (der Benutzer hat die Berechtigung verweigert), Code 2 für POSITION_UNAVAILABLE (Hardware- oder Netzwerkfehler) und Code 3 für TIMEOUT (die Anfrage hat zu lange gedauert). Behandeln Sie immer alle drei Fälle.

Ein watchPosition-Listener läuft unbegrenzt, bis Sie ihn beenden. Geben Sie in useEffect eine Cleanup-Funktion zurück, die navigator.geolocation.clearWatch(watchId) aufruft. Wenn Sie das Cleanup vergessen, läuft der Watcher nach dem Unmounten der Komponente weiter, verbraucht Akkuleistung und kann möglicherweise den Status einer nicht mehr eingebundenen Komponente aktualisieren.

Ein useGeolocation-Hook verwaltet einen Status mit vier möglichen Werten: idle (noch nicht angefordert), loading (Anfrage läuft), success (Position empfangen) und error (fehlgeschlagen). Außerdem speichert er position und errorMessage im Status. Komponenten erhalten dadurch eine klare und konsistente Schnittstelle.

Wenn der Benutzer die Geolokalisierung ablehnt, zeigen Sie eine hilfreiche Nachricht an, die erklärt, warum das Feature den Standortzugriff benötigt und wie er in den Browsereinstellungen wieder aktiviert werden kann. Zeigen Sie Benutzern niemals einen rohen Fehlercode. Bieten Sie als Fallback die manuelle Eingabe einer Adresse an, damit das Feature auch ohne Standortberechtigung nutzbar bleibt.

Wie die meisten leistungsfähigen Browser-APIs ist Geolocation auf sichere Kontexte beschränkt. navigator.geolocation ist auf einfachen HTTP-Seiten undefined. Während der Entwicklung funktioniert die API auf localhost auch ohne HTTPS. Stellen Sie in der Produktion immer sicher, dass Ihre App über HTTPS ausgeliefert wird, sonst werden Benutzer niemals zur Erteilung der Berechtigung aufgefordert.

Das optionale dritte Argument von getCurrentPosition und watchPosition akzeptiert ein Optionsobjekt. enableHighAccuracy: true fordert GPS-Genauigkeit an, verbraucht dafür aber mehr Energie. timeout legt die maximale Wartezeit in Millisekunden fest. maximumAge erlaubt die Verwendung einer zwischengespeicherten Position, wenn sie innerhalb der angegebenen Millisekunden erfasst wurde.

Geolocation ermöglicht Features wie „ein Geschäft in meiner Nähe finden“, die Verfolgung von Lieferfahrern auf einer Karte, wetterbezogene Informationen für die aktuelle Stadt, standortbezogene Beiträge und Entfernungsberechnungen zwischen dem Benutzer und einem Ziel. Informieren Sie Benutzer immer klar darüber, warum die App ihren Standort benötigt, bevor Sie die Berechtigung anfordern.

Mit den Chrome DevTools können Sie einen simulierten Gerätestandort festlegen. Öffnen Sie die DevTools, öffnen Sie das Dreipunktmenü und wählen Sie Weitere Tools und dann Sensoren. Sie können die Koordinaten für Breiten- und Längengrad eingeben, um jeden beliebigen Standort zu simulieren. Das ist deutlich schneller, als zum Testen standortabhängiger Features tatsächlich an verschiedene Orte zu fahren.

Was bedeutet ein GeolocationPositionError-Code von 1?

Verwenden Sie getCurrentPosition für eine einmalige Abfrage und watchPosition für eine kontinuierliche Verfolgung. Rufen Sie im Cleanup von useEffect immer clearWatch auf. Erstellen Sie einen useGeolocation-Hook mit den Statuswerten idle, loading, success und error. Behandeln Sie verweigerte Berechtigungen angemessen und denken Sie daran, dass Geolocation in der Produktion HTTPS erfordert.