#flutter #google-maps #polyline
#flutter #google-карты #полилиния
Вопрос:
Я использовал следующий код ->
const double CAMERA_ZOOM = 16;
const double CAMERA_TILT = 80;
const double CAMERA_BEARING = 30;
const LatLng SOURCE_LOCATION = LatLng(42.747932, -71.167889);
const LatLng DEST_LOCATION = LatLng(37.335685, -122.0605916);
class MapPage extends StatefulWidget {
@override
State<StatefulWidget> 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 = 'API_KEY';
BitmapDescriptor sourceIcon;
BitmapDescriptor destinationIcon;
LocationData currentLocation;
// ссылка на местоположение назначения
LocationData destinationLocation;
Location location;
double pinPillPosition = -100;
PinInformation currentlySelectedPin = PinInformation(
pinPath: '',
avatarPath: '',
location: LatLng(0, 0),
locationName: '',
labelColor: Colors.grey);
PinInformation sourcePinInfo;
PinInformation destinationPinInfo;
@override
void initState() {
super.initState();
// создание экземпляра местоположения
location = new Location();
polylinePoints = PolylinePoints();
location.onLocationChanged().listen((LocationData cLoc) {
currentLocation = cLoc;
updatePinOnMap();
});
setSourceAndDestinationIcons();
// установка начального местоположения
setInitialLocation();
}
void setSourceAndDestinationIcons() async {
BitmapDescriptor.fromAssetImage(
ImageConfiguration(devicePixelRatio: 2.0), 'assets/driving_pin.png')
.then((onValue) {
sourceIcon = onValue;
});
BitmapDescriptor.fromAssetImage(ImageConfiguration(devicePixelRatio: 2.0),
'assets/destination_map_marker.png')
.then((onValue) {
destinationIcon = onValue;
});
}
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(
myLocationEnabled: true,
compassEnabled: true,
tiltGesturesEnabled: false,
markers: _markers,
polylines: _polylines,
mapType: MapType.normal,
initialCameraPosition: initialCameraPosition,
onTap: (LatLng loc) {
pinPillPosition = -100;
},
onMapCreated: (GoogleMapController controller) {
controller.setMapStyle(Utils.mapStyles);
_controller.complete(controller);
// my map has completed being created;
// i'm ready to show the pins on the map
showPinsOnMap();
}),
MapPinPillComponent(
pinPillPosition: pinPillPosition,
currentlySelectedPin: currentlySelectedPin)
],
),
);
}
void showPinsOnMap() {
// get a LatLng for the source location
// from the LocationData currentLocation object
var pinPosition =
LatLng(currentLocation.latitude, currentLocation.longitude);
// get a LatLng out of the LocationData object
var destPosition =
LatLng(destinationLocation.latitude, destinationLocation.longitude);
sourcePinInfo = PinInformation(
locationName: "Start Location",
location: SOURCE_LOCATION,
pinPath: "assets/driving_pin.png",
avatarPath: "assets/friend1.jpg",
labelColor: Colors.blueAccent);
destinationPinInfo = PinInformation(
locationName: "End Location",
location: DEST_LOCATION,
pinPath: "assets/destination_map_marker.png",
avatarPath: "assets/friend2.jpg",
labelColor: Colors.purple);
_markers.add(Marker(
markerId: MarkerId('sourcePin'),
position: pinPosition,
onTap: () {
setState(() {
currentlySelectedPin = sourcePinInfo;
pinPillPosition = 0;
});
},
icon: sourceIcon));
// destination pin
_markers.add(Marker(
markerId: MarkerId('destPin'),
position: destPosition,
onTap: () {
setState(() {
currentlySelectedPin = destinationPinInfo;
pinPillPosition = 0;
});
},
icon: destinationIcon));
setPolylines();
}
void setPolylines() async {
List<PointLatLng> result = await polylinePoints.getRouteBetweenCoordinates(
googleAPIKey,
currentLocation.latitude,
currentLocation.longitude,
destinationLocation.latitude,
destinationLocation.longitude);
if (result.isNotEmpty) {
result.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude, point.longitude));
});
setState(() {
_polylines.add(Polyline(
width: 2, // set the width of the polylines
polylineId: PolylineId("poly"),
color: Color.fromARGB(255, 40, 122, 198),
points: polylineCoordinates));
});
}
}
void updatePinOnMap() async {
CameraPosition cPosition = CameraPosition(
zoom: CAMERA_ZOOM,
tilt: CAMERA_TILT,
bearing: CAMERA_BEARING,
target: LatLng(currentLocation.latitude, currentLocation.longitude),
);
final GoogleMapController controller = await _controller.future;
setState(() {
var pinPosition =
LatLng(currentLocation.latitude, currentLocation.longitude);
sourcePinInfo.location = pinPosition;
_markers.removeWhere((m) => m.markerId.value == 'sourcePin');
_markers.add(Marker(
markerId: MarkerId('sourcePin'),
onTap: () {
setState(() {
currentlySelectedPin = sourcePinInfo;
pinPillPosition = 0;
});
},
position: pinPosition, // updated position
icon: sourceIcon));
});
}
}
Я вижу только булавку, которая перемещается при изменении положения, но не путь, только анимацию булавки, которая перемещается по карте. Не могли бы вы сказать мне, что может быть важной частью для мониторинга, чтобы нарисовать путь, прослеженный на экране, пока контакты перемещаются по экрану?
Комментарии:
1. Я удалил ключ API из вашего кода, пожалуйста, не делитесь ключами API на общедоступных веб-сайтах