我使用了以下代码->
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));
});
}
}
我只看到在位置改变时移动的图钉,但没有路径,只有在地图上移动的图钉的动画。您能否告诉我,当引脚在屏幕上移动时,为了绘制出屏幕上跟踪的路径,监视的重要部分是什么?