Neste tutorial, aprenderemos como desenhar trilhas de polilinha atrás do marcador enquanto o movemos de um local para outro no Google Map no Flutter. Esse recurso é um fator importante se você estiver criando qualquer aplicativo de rastreamento GPS ou de veículos.
Primeiro, declare a variável da lista de polilinhas:
Set<Polyline> polylines={};
Nossa localização inicial:
LatLng loc1 = LatLng(27.6602292, 85.308027);
Agora, declare duas variáveis de posição para a posição inicial e final das polilinhas:
late LatLng pos1; //positions for polylines
late LatLng pos2;
Agora,
pos1 = loc1;
pos2 = loc1;
Ao mover o marcador:
pos1 = pos2;
pos2 = LatLng(new latitude, new longitude);
Agora, a cada movimento adicionaremos uma nova polilinha à lista:
polylines.add(Polyline(
polylineId: PolylineId(pos2.toString()),
visible: true,
width: 5, //width of polyline
points: [
pos1,
pos2,
],
color: Colors.deepPurpleAccent, //color of polyline
));
Agora, mostre as polilinhas no Google Map:
GoogleMap(
polylines: polylines, //polylines list
)
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;
});
},
)
);
}
}
Dessa forma, você pode desenhar trilhas de polilinha atrás do marcador enquanto move o marcador de um local para outro no Google Map.