Flutter Google Map mit Live-Standortverfolgung – Uber Style

In dieser Lektion lernen Sie, wie Sie Google Maps in Flutter mit einigen Anpassungen verwenden, z. B. das Einrichten benutzerdefinierter Bildmarkierungen und das Zeichnen von Polylinien für Routenrichtungen. Fügen Sie Echtzeit-Standortaktualisierungen zur Karte hinzu.

Inhaltsverzeichnis ::

Ersteinrichtung ⚙️

Google-Karte

Routenrichtung zeichnen 〰

Echtzeit-Standortaktualisierungen auf der Karte

Benutzerdefinierten Marker/Pin hinzufügen

Video-Tutorial

Vollständiger Quellcode

Hinweis: Dieser Beitrag geht davon aus, dass Sie die Karten bereits in Ihrem Projekt mit dem Google Maps Flutter-Paket und Ihrem eigenen Google Maps-API-Schlüssel eingerichtet haben. Wenn nicht, folgen Sie diesem Link , um zu erfahren, wie Sie Ihr Flutter-Projekt für die Arbeit mit Google Maps einrichten. Weitere Abhängigkeiten umfassen das Flutter Polyline Points -Paket und das Flutter Location Plugin .

Ersteinrichtung ⚙️

Stellen Sie sicher, dass Sie Ihre Umgebung entsprechend vorbereiten, um die Standortverfolgung sowohl auf IOS als auch auf Android zu aktivieren, indem Sie die Schritte in der README-Datei des Pakets in Bezug auf die Android-Manifestdatei und die iOS-Datei „Info.plist“ befolgen.

Einmal eingerichtet, sehen die Abhängigkeiten wie aus

....
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  flutter_polyline_points: ^1.0.0
  google_maps_flutter: ^2.1.7
  location: ^4.4.0
...

Google-Karte

Erstellen Sie ein StatefulWidget namens OrderTrackingPage mit der entsprechenden State-Klasse, in die ich die erforderlichen Pakete sowie einige hartcodierte Quell- und Zielspeicherorte importiert habe (für dieses Tutorial).

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class OrderTrackingPage extends StatefulWidget {
  const OrderTrackingPage({Key? key}) : super(key: key);
@override
  State<OrderTrackingPage> createState() => OrderTrackingPageState();
}
class OrderTrackingPageState extends State<OrderTrackingPage> {
  final Completer<GoogleMapController> _controller = Completer();
static const LatLng sourceLocation = LatLng(37.33500926, -122.03272188);
  static const LatLng destination = LatLng(37.33429383, -122.06600055);
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ... GoogleMap widget will be here ...,
    );
  }
}

Wir brauchen einen Marker/Pin, um den genauen Standort zu verstehen. Definieren Sie eine Markierung und legen Sie ihre Position auf die Quellposition fest. Fügen Sie für das Ziel einen weiteren Marker/Pin hinzu.

GoogleMap(
  initialCameraPosition: const CameraPosition(
    target: sourceLocation,
    zoom: 13.5,
  ),
  markers: {
    const Marker(
      markerId: MarkerId("source"),
      position: sourceLocation,
    ),
    const Marker(
      markerId: MarkerId("destination"),
      position: destination,
    ),
  },
  onMapCreated: (mapController) {
    _controller.complete(mapController);
  },
),

      

       Map preview with marker/pin
      

Als nächstes möchte ich eine Linie vom Ziel zur Quelle ziehen. Erstellen Sie eine leere Liste namens polylineCoordinates. Erstellen Sie eine Instanz von PolylinePoints und eine asynchrone Funktion namens getPolyPoints. Die Methode getRouteBetweenCoordinatesgibt die Liste der Polylinienpunkte zurück. Der Google-API-Schlüssel sowie Quell- und Zielspeicherorte waren erforderlich. Wenn die Punkte nicht leer sind, speichern wir sie in polylineCoordinates.

List<LatLng> polylineCoordinates = [];
void getPolyPoints() async {
  PolylinePoints polylinePoints = PolylinePoints();
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
    google_api_key, // Your Google Map Key
    PointLatLng(sourceLocation.latitude, sourceLocation.longitude),
    PointLatLng(destination.latitude, destination.longitude),
  );
if (result.points.isNotEmpty) {
    result.points.forEach(
      (PointLatLng point) => polylineCoordinates.add(
        LatLng(point.latitude, point.longitude),
      ),
    );
    setState(() {});
  }
}

@override
void initState() {
  getPolyPoints();
  super.initState();
}

GoogleMap(
...
polylines: {
    Polyline(
      polylineId: const PolylineId("route"),
      points: polylineCoordinates,
      color: const Color(0xFF7B61FF),
      width: 6,
    ),
  },
),

      

       Map with route
      

Kommen wir nun zum aufregendsten Teil, wir brauchen den Standort des Geräts. Erstellen Sie eine Nullable-Variable namens currentLocation. Dann getCurrentLocationerstellt eine Funktion namens Inside eine Instanz von Location. Sobald wir den Standort erhalten haben, setzen Sie den aktuellen Standort auf den Standort. Aktualisieren Sie bei einer Standortänderung den aktuellen Standort. Machen Sie es für die Karte mit dem Namen setState sichtbar.

LocationData? currentLocation;
void getCurrentLocation() async {
    Location location = Location();
location.getLocation().then(
      (location) {
        currentLocation = location;
      },
    );
GoogleMapController googleMapController = await _controller.future;
location.onLocationChanged.listen(
      (newLoc) {
        currentLocation = newLoc;
googleMapController.animateCamera(
          CameraUpdate.newCameraPosition(
            CameraPosition(
              zoom: 13.5,
              target: LatLng(
                newLoc.latitude!,
                newLoc.longitude!,
              ),
            ),
          ),
        );
setState(() {});
      },
    );
  }

void initState() {
  getPolyPoints();
  getCurrentLocation();
  super.initState();
}

Ganzkörper

body: currentLocation == null
  ? const Center(child: Text("Loading"))
  : GoogleMap(
      initialCameraPosition: CameraPosition(
        target: LatLng(
            currentLocation!.latitude!, currentLocation!.longitude!),
        zoom: 13.5,
      ),
      markers: {
        Marker(
          markerId: const MarkerId("currentLocation"),
          position: LatLng(
              currentLocation!.latitude!, currentLocation!.longitude!),
        ),
        const Marker(
          markerId: MarkerId("source"),
          position: sourceLocation,
        ),
        const Marker(
          markerId: MarkerId("destination"),
          position: destination,
        ),
      },
      onMapCreated: (mapController) {
        _controller.complete(mapController);
      },
      polylines: {
        Polyline(
          polylineId: const PolylineId("route"),
          points: polylineCoordinates,
          color: const Color(0xFF7B61FF),
          width: 6,
        ),
      },
    ),

      

       Live location tracking — 8X
      

Für iOS ::

Gehen Sie zu Funktionen , bewegen Sie den Mauszeiger über locationund wählen Sie aus Freeway drive. Ich verwende den Quell- und Zielort gemäß dieser Autobahnfahrt.

Für Android ::

Wenn Sie Windows verwenden oder einen Android-Simulator verwenden, klicken Sie auf die unteren drei Punkte und vergewissern Sie sich, dass Sie sich vor Ort befinden. Nehmen wir an, der Quellstandort ist Google Plex, ändern Sie das sourceLocationin diese Koordinate und der Zielstandort ist der Microsoft Silicon Valley Campus. Ändern Sie die destinationmit diesem Ort. Klicken Sie nun auf die Registerkarte „ Routen “ und suchen Sie nach Microsoft Silicon Valley und Google Plex als Ausgangspunkt. Speichern Sie die Route, legen Sie eine Wiedergabegeschwindigkeit fest und klicken Sie auf die Wiedergaberoute. Der jetzige Standort zieht um, das wollen wir.

static const LatLng sourceLocation = your chosen location
static const LatLng destination = your chosen location

Die Symbole für Quelle, Ziel und aktuellen Standort sind identisch. Lassen Sie uns einen benutzerdefinierten Marker / Pin für sie verwenden.

BitmapDescriptor sourceIcon = BitmapDescriptor.defaultMarker;
BitmapDescriptor destinationIcon = BitmapDescriptor.defaultMarker;
BitmapDescriptor currentLocationIcon = BitmapDescriptor.defaultMarker;
void setCustomMarkerIcon() {
  BitmapDescriptor.fromAssetImage(
          ImageConfiguration.empty, "assets/Pin_source.png")
      .then(
    (icon) {
      sourceIcon = icon;
    },
  );
  BitmapDescriptor.fromAssetImage(
          ImageConfiguration.empty, "assets/Pin_destination.png")
      .then(
    (icon) {
      destinationIcon = icon;
    },
  );
  BitmapDescriptor.fromAssetImage(
          ImageConfiguration.empty, "assets/Badge.png")
      .then(
    (icon) {
      currentLocationIcon = icon;
    },
  );
}

void initState() {
  getPolyPoints();
  getCurrentLocation();
  setCustomMarkerIcon();
  super.initState();
}

GoogleMap(
....
markers: {
      Marker(
        markerId: const MarkerId("currentLocation"),
        icon: currentLocationIcon,
        position: LatLng(
            currentLocation!.latitude!, currentLocation!.longitude!),
      ),
        Marker(
        markerId: const MarkerId("source"),
        icon: sourceIcon,
        position: sourceLocation,
      ),
        Marker(
        markerId: MarkerId("destination"),
        icon: destinationIcon,
        position: destination,
      ),
    },
  ),

      

       Preview with custom marker/pin — 13x
      

Vollständiger Quellcode

Bonus Shop-UI-Kit

❤ ❤ Vielen Dank für das Lesen dieses Artikels ❤❤

Wenn ich etwas falsch mache? Lass es mich in den Kommentaren wissen. Ich würde mich gerne verbessern.

Klatsch Wenn dir dieser Artikel weiterhilft.