So zeichnen Sie Polylinienpfade von Moving Maker auf Google Map in Flutter

In diesem Tutorial lernen wir, wie man Polylinienpfade hinter der Markierung zeichnet, während man sie in Flutter von einem Ort zu einem anderen auf Google Map verschiebt. Diese Funktion ist ein wichtiger Faktor, wenn Sie eine GPS-Tracking- oder Fahrzeug-Tracking-App erstellen.

Deklarieren Sie zunächst die Polylinien-Listenvariable:

Set<Polyline> polylines={};

Unser erster Standort:

LatLng loc1 = LatLng(27.6602292, 85.308027); 

Deklarieren Sie nun zwei Positionsvariablen für die Start- und Endposition von Polylinien:

late LatLng pos1; //positions for polylines
late LatLng pos2;

Jetzt,

pos1 = loc1;
pos2 = loc1;

Beim Verschieben der Markierung:

pos1 = pos2;
pos2 = LatLng(new latitude, new longitude);

Jetzt fügen wir bei jeder Bewegung eine neue Polylinie zur Liste hinzu:

polylines.add(Polyline(
    polylineId: PolylineId(pos2.toString()),
    visible: true,
    width: 5, //width of polyline
    points: [
        pos1,
        pos2,
    ],
    color: Colors.deepPurpleAccent, //color of polyline
));

Zeigen Sie nun die Polylinien auf Google Map an:

GoogleMap( 
     polylines: polylines, //polylines list
)

Vollständiges App-Beispiel:

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  GoogleMapController? mapController; //contrller for Google map
  Set<Marker> markers = Set(); //markers for google map
  Set<Polyline> polylines={};

  LatLng loc1 = LatLng(27.6602292, 85.308027);  

  int numDeltas = 50; //number of delta to devide total distance
  int delay = 50; //milliseconds of delay to pass each delta
  var i = 0;
  double? deltaLat; 
  double? deltaLng;
  var position; //position variable while moving marker

  late LatLng pos1; //positions for polylines
  late LatLng pos2;

  @override
  void initState() {
    position = [loc1.latitude, loc1.longitude]; //initial position of moving marker
    pos1 = loc1;
    pos2 = loc1;
    addMarkers();
    super.initState();
  }

  addMarkers() async {
      markers.add(
        Marker( 
          markerId: MarkerId(loc1.toString()),
          position: loc1, 
          icon: BitmapDescriptor.defaultMarker
        )
      );

      setState(() {
          //refresh UI
      });
  }

  transition(result){
      i = 0;
      deltaLat = (result[0] - position[0])/numDeltas;
      deltaLng = (result[1] - position[1])/numDeltas;
      moveMarker();
  }

  moveMarker(){
      position[0] += deltaLat;
      position[1] += deltaLng;
      var latlng = LatLng(position[0], position[1]);
      
      markers = {
        Marker(
            markerId: MarkerId("movingmarker"),
            position: latlng,
            icon: BitmapDescriptor.defaultMarker,
        )
      };

        pos1 = pos2;
        pos2 = LatLng(position[0], position[1]);
        
        polylines.add(Polyline(
            polylineId: PolylineId(pos2.toString()),
            visible: true,
            width: 5, //width of polyline
            points: [
               pos1,
               pos2,
            ],
            color: Colors.deepPurpleAccent, //color of polyline
        ));

      setState(() {
         //refresh UI
      });
    

      if(i!=numDeltas){
          i++;
          Future.delayed(Duration(milliseconds: delay), (){
              moveMarker();
          });
      }
  }

  
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Move Marker Position on Google Map"),
             backgroundColor: Colors.deepPurpleAccent,
          ),
          floatingActionButton: FloatingActionButton(
             child: Text("Move"),
             onPressed: (){
                 var result = [27.661838, 85.308543];
                 //latitude and longitude of new position

                 transition(result);
                 //start moving marker
             },
          ),
          body: GoogleMap( //Map widget from google_maps_flutter package
                  zoomGesturesEnabled: true, //enable Zoom in, out on map
                  initialCameraPosition: CameraPosition( //innital position in map
                    target: loc1, //initial position
                    zoom: 14.0, //initial zoom level
                  ),
                  markers: markers, //markers to show on map
                  polylines: polylines, //polylines list
                  mapType: MapType.normal, //map type
                  onMapCreated: (controller) { //method called when map is created
                    setState(() {
                      mapController = controller; 
                    });
                  },
          )
       );
  }
}

Auf diese Weise können Sie Polylinienpfade hinter der Markierung zeichnen, während Sie die Markierung von einem Ort zu einem anderen auf Google Map verschieben.