Reagieren Sie auf native Standortverfolgung | Komentor

Erstellen Sie eine Echtzeit-Standortverfolgungs-App mit React-Native- und React-Native-Karten


Verfolgt den Standort des Benutzers und zeichnet den Pfad, wenn sich der Standort ändert

Wenn Sie mit React Native gearbeitet haben, müssen Sie React-Native-Maps verwendet oder davon gehört haben. React native maps ist ein React Native-Paket, das die Google Maps-API für React Native bereitstellt. Die Verwendung von statischen Google Maps ist weit verbreitet, aber heute werden wir eine der weit verbreiteten Funktionen von Google Maps verwenden, die Standortverfolgung mit React Native.

Suchen Sie das Projekt-Repository hier

Einstieg

Erstellen Sie zunächst ein React Native-Projekt und benennen Sie es nach Belieben. Ich verwende das React-Native-Cli aber create-react-native-app sollte auch gut funktionieren.

react-native init locationTracking

React-Native-Maps installieren

Laden Sie zuerst die Bibliothek von npm herunter:

npm install react-native-maps --save

Die Installation von „react-native-maps“ erfordert das Hinzufügen von Code zu nativen iOS- und Android-Dateien. Folge dem Installation Anweisungen, die von den React-Native-Maps bereitgestellt werden. Stellen Sie nach der Installation sicher, dass das Projekt erfolgreich erstellt wird, bevor Sie fortfahren.

React-native-maps zu installieren ist keine einfache Aufgabe. Wenn Sie es zum ersten Mal tun, würde ich vorschlagen, die Installationsanweisungen sorgfältig durchzugehen. Glauben Sie mir, das wird die schwierigste Aufgabe dieses Tutorials sein. Verwenden Sie Google, wenn Sie auf Fehler stoßen. 😅

Verwendung von React-Native-Maps

Großartig, jetzt, wo Sie die React-Native-Maps erfolgreich installiert haben. Kommen wir zum saftigen Teil, wo die wahre Magie passiert. 😃

Lassen Sie uns zunächst einige Anfangszustände festlegen, die für dieses Projekt verwendet werden.

constructor(props) {
  super(props);

this.state = {
    latitude: LATITUDE,
    longitude: LONGITUDE,
    routeCoordinates: [],
    distanceTravelled: 0,
    prevLatLng: {},
    coordinate: new AnimatedRegion({
     latitude: LATITUDE,
     longitude: LONGITUDE
    })
  };
}

Wir werden diese Zustände später in der App verwenden, das einzige, was hier von Interesse ist, ist der new AnimatedRegion Dies hilft uns, unsere Markierungen zu animieren, wenn der Standort aktualisiert wird.

Achten Sie auf Standortänderungen

Jetzt müssen wir die Standortkoordinaten jedes Mal abrufen, wenn sich der Benutzer bewegt. Google Maps Geolocation API hat watchPosition Methode, die uns hilft, die Standortkoordinaten zu erhalten, wenn sie geändert werden.

componentDidMount() {
  this.watchID = navigator.geolocation.watchPosition(
    position => {
      const { coordinate, routeCoordinates, distanceTravelled } = this.state;
      const { latitude, longitude } = position.coords;
      
      const newCoordinate = {
        latitude,
        longitude
      };

if (Platform.OS === "android") {
        if (this.marker) {
          this.marker._component.animateMarkerToCoordinate(
            newCoordinate,
            500
          );
         }
       } else {
         coordinate.timing(newCoordinate).start();
       }

this.setState({
         latitude,
         longitude,
         routeCoordinates: routeCoordinates.concat([newCoordinate]),
         distanceTravelled:
         distanceTravelled + this.calcDistance(newCoordinate),
         prevLatLng: newCoordinate
       });
     },
     error => console.log(error),
     { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
  );
}

Das watchPosition gibt uns die Informationen über den Standort des Benutzers, wenn dieser geändert wird. Wir verwenden dann ES6 Destrukturieren bekommen latitude & longitude von dem position.coords. Außerdem bekommen wir coordinate, routeCoordinates & distanceTravelled vom Ausgangszustand.

Wir werden dann erstellen newCoordinate Variable, die diese neuen aktualisierten Standortkoordinaten speichert, die wir von erhalten haben position.coords. Jetzt, da wir die aktualisierten Koordinaten haben, animieren wir den Marker zu diesen neuen Koordinaten. Sowohl Android als auch iOS haben unterschiedliche Möglichkeiten, damit umzugehen, also verwenden wir Platform Specific Code damit umzugehen.

if (Platform.OS === "android") {
  if (this.marker) {
  this.marker._component.animateMarkerToCoordinate(
    newCoordinate,
    500
   );
  }
} else {
  coordinate.timing(newCoordinate).start();
}

Jetzt ist es an der Zeit, unsere anfänglichen Zustände mit dem neuen zu aktualisieren.

this.setState({
  latitude,
  longitude,
  routeCoordinates: routeCoordinates.concat([newCoordinate]),
  distanceTravelled: distanceTravelled + this.calcDistance(newCoordinate),
  prevLatLng: newCoordinate
});

Zurückgelegte Strecke berechnen

Wir haben benutzt distanceTravelled Zustandsvariable zum Speichern der vom Benutzer zurückgelegten Strecke. Um diesen Abstand zu berechnen, erstellen wir eine neue Funktion calcDistance das wird dauern newLatLng als Parameter und prevLatLng als Zustandsvariable und gibt die Entfernung zurück.

calcDistance = newLatLng => {
  const { prevLatLng } = this.state;
  return haversine(prevLatLng, newLatLng) || 0;
};

Wenn Sie sich diese Funktion ansehen, fragen Sie sich vielleicht, wann die Entfernungsberechnung so komplex geworden ist. Anscheinend aufgrund der Erdkrümmung Entfernungsberechnung mit Hilfe von latitude und longitude ist nicht so einfach. Die Erde hat einige Kurven 😝.

Um die Entfernung zu berechnen, verwenden Sie latitude und longitude wir müssen verwenden Haversine-Formel. Wenn Sie wie ich mit Mathematik zu kämpfen haben 😅, gibt es eine Hoffnung in Form von a haversine npm-Paket, das uns bei der Entfernungsberechnung helfen kann latitude und longitude. Installieren haversine npm-Paket mit dem folgenden Befehl.

npm install haversine

Rendern MapView

Seit <MapView> Komponente benötigt region Stütze, die eine akzeptiert object mit Ortskoordinaten. Wir werden eine Funktion erstellen, die alle erforderlichen Informationen zurückgibt.

getMapRegion = () => ({
  latitude: this.state.latitude,
  longitude: this.state.longitude,
  latitudeDelta: LATITUDE_DELTA,
  longitudeDelta: LONGITUDE_DELTA
});

Jetzt haben wir alle Informationen, die zum Rendern der Karte erforderlich sind.

<MapView
  style={styles.map}
  showUserLocation
  followUserLocation
  loadingEnabled
  region={this.getMapRegion()}
>

<Polyline coordinates={this.state.routeCoordinates} strokeWidth={5} />
  <Marker.Animated
    ref={marker => {
      this.marker = marker;
    }}
    coordinate={this.state.coordinate}
  />
</MapView>

Wir haben auch Google Maps verwendet Polyline um den Pfad zu zeichnen, während sich der Benutzer bewegt. Polyline hat eincoordinate props, das ein Array von Koordinaten akzeptiert, die wir von unserem erhalten können routeCoordinates. Wir haben auch die eingestellt strokeWidth damit wir den Weg klar sehen können.

Weiter, um den animierten Marker anzuzeigen, den wir verwenden werden Marker.Animated Komponente, um die Markierung an der aktuellen Position des Benutzers anzuzeigen. Es hat coordinate Requisiten, die die bekommen coordinate Objekt vom Staat.

Zurückgelegte Entfernung anzeigen

Um schließlich die vom Benutzer zurückgelegte Entfernung anzuzeigen, richten wir a ein View mit dem richtigen Styling angewendet.

<View style={styles.buttonContainer}>
  <TouchableOpacity style={[styles.bubble, styles.button]}>
    <Text style={styles.bottomBarContent}>
      {parseFloat(this.state.distanceTravelled).toFixed(2)} km
    </Text>
  </TouchableOpacity>
</View>

Testen

Jetzt, da wir alle notwendigen Teile an Ort und Stelle haben, können wir endlich unsere App ausführen.

Um die App im iOS-Simulator zu testen, verwenden wir den Standortmodus, der in iOS-Simulatoren verfügbar ist. Gehen Sie nach dem Ausführen der App zu Debug > Location > Freeway Drive Einstellung im Simulator, um diese Funktion zu aktivieren. Dies sollte zu etwas Ähnlichem wie unten führen.

Für Android ist es nicht so einfach, da Android-Emulatoren keine eingebaute Funktion zum Testen der dynamischen Standortänderungen haben. Um es zu testen, können Sie entweder Ihre Position manuell ändern, indem Sie ein Stück weit gehen, oder Sie können gefälschte Standort-Apps von Drittanbietern verwenden. Ich konnte dies mit testen GPS-Joystick App auf Android.

Fazit

Wir haben erfolgreich eine React Native-App erstellt, die den Standort eines Benutzers verfolgt und den Pfad zeichnet. Es kann auch die vom Benutzer zurückgelegte Entfernung berechnen.

Ich habe die Stile und einige andere Boilerplate-Codes übersprungen, die für diese App benötigt werden, aber Sie finden sie im Github-Repo hier.


Ich hoffe, dies hilft Ihnen, die Google Maps-API zu verstehen. Vielleicht können Sie sich davon inspirieren lassen, um etwas Erstaunliches zu bauen. Bitte zögern Sie nicht, Feedback zu hinterlassen, ich bin immer auf der Suche nach besseren Lösungen!

Similar Posts

Leave a Reply

Your email address will not be published.