I want to draw the location distance on the map. Then when the user moves the location pin will also move it. I have refer this page. The problem I face is the polyline some time have come out some time did not come out. The packages that I use is google_maps_flutter: ^2.0.3, lutter_polyline_points: ^0.2.6, and location: ^4.1.1. Anyone can help me? Thanks in advance. Here is my code:
const double CAMERA_ZOOM = 18;
const double CAMERA_TILT = 80;
const double CAMERA_BEARING = 30;
const LatLng SOURCE_LOCATION = LatLng(2.3896, 122.2501);
const LatLng DEST_LOCATION = LatLng(-2.2855, 122.2625);
class MapPage extends StatefulWidget {
@override
_MapPageState createState() => _MapPageState();
}
class _MapPageState extends State<MapPage> {
Completer<GoogleMapController> _controller = Completer();
Set<Marker> _markers = Set<Marker>();
Set<Polyline> _polylines = Set<Polyline>();
List<LatLng> polylineCoordinates = [];
PolylinePoints polylinePoints;
String googleAPIKey = 'MY GOOGLE API KEY';
BitmapDescriptor sourceIcon;
BitmapDescriptor destinationIcon;
LocationData currentLocation;
LocationData destinationLocation;
Location location;
@override
void initState() {
super.initState();
location = new Location();
polylinePoints = PolylinePoints();
location.onLocationChanged.listen((LocationData cLoc) {
currentLocation = cLoc;
updatePinOnMap();
});
setSourceAndDestinationIcons();
setInitialLocation();
}
void setSourceAndDestinationIcons() async {
sourceIcon = await BitmapDescriptor.fromAssetImage(
ImageConfiguration(devicePixelRatio: 2.5), 'assets/driving_pin.png');
destinationIcon = await BitmapDescriptor.fromAssetImage(
ImageConfiguration(devicePixelRatio: 2.5),
'assets/destination_map_marker.png');
}
void setInitialLocation() async {
currentLocation = await location.getLocation();
destinationLocation = LocationData.fromMap({
"latitude": DEST_LOCATION.latitude,
"longitude": DEST_LOCATION.longitude,
});
}
@override
Widget build(BuildContext context) {
CameraPosition initialCameraPosition = CameraPosition(
zoom: CAMERA_ZOOM,
tilt: CAMERA_TILT,
bearing: CAMERA_BEARING,
target: SOURCE_LOCATION);
if (currentLocation != null) {
initialCameraPosition = CameraPosition(
target: LatLng(currentLocation.latitude, currentLocation.longitude),
zoom: CAMERA_ZOOM,
tilt: CAMERA_TILT,
bearing: CAMERA_BEARING);
}
return Scaffold(
body: Stack(
children: <Widget>[
GoogleMap(
initialCameraPosition: initialCameraPosition,
myLocationEnabled: true,
compassEnabled: true,
tiltGesturesEnabled: false,
markers: _markers,
polylines: _polylines,
mapType: MapType.normal,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
showPinsOnMap();
},
)
],
),
);
}
void showPinsOnMap() {
//get a LatLng for the source location from the LocationData currentLocation object
var pinPosition =
LatLng(currentLocation.latitude, currentLocation.longitude);
var destPosition =
LatLng(destinationLocation.latitude, destinationLocation.longitude);
_markers.add(Marker(
markerId: MarkerId('sourcePin'),
position: pinPosition,
icon: sourceIcon));
_markers.add(Marker(
markerId: MarkerId('destPin'),
position: destPosition,
icon: destinationIcon));
setPolylines();
}
void setPolylines() async {
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
googleAPIKey,
PointLatLng(currentLocation.latitude, currentLocation.longitude),
PointLatLng(
destinationLocation.latitude, destinationLocation.longitude));
if (result.points.isNotEmpty) {
result.points.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude, point.longitude));
});
setState(() {
_polylines.add(Polyline(
width: 5,
polylineId: PolylineId("poly"),
color: Color.fromARGB(255, 40, 122, 198),
points: polylineCoordinates));
});
}
}
void updatePinOnMap() async {
CameraPosition cameraPosition = CameraPosition(
zoom: CAMERA_ZOOM,
tilt: CAMERA_TILT,
bearing: CAMERA_BEARING,
target: LatLng(currentLocation.latitude, currentLocation.longitude),
);
final GoogleMapController controller = await _controller.future;
controller.animateCamera(CameraUpdate.newCameraPosition(cameraPosition));
setState(() {
var pinPosition =
LatLng(currentLocation.latitude, currentLocation.longitude);
_markers.add(Marker(
markerId: MarkerId('sourcePin'),
position: pinPosition,
icon: sourceIcon));
});
}
}