我对谷歌Map这种东西很模糊。虽然标记在Map上可用,但折线不会出现在屏幕上,我似乎无法在Widget构建之外放置标记。
class _MapScreenState extends State<MapScreen> {
late GoogleMapController mapController;
LatLng? currentLocation;
double? currentlat; double? currentlong;
LatLng destination = const LatLng(4.66968, 101.07338);
bool _isLoading = true;
Set<Marker> markers = {};
PolylinePoints polylinePoints = PolylinePoints();
Map<PolylineId, Polyline> polylines = {};
List<LatLng> polylineCoordinates = [];
@override
void initState() {
super.initState();
getLocation();
makeLines();
addPolyLine();
}
getLocation() async {
Position position = await Geolocator.getCurrentPosition(
desiredAccuracy: LocationAccuracy.high);
double lat = position.latitude;
double long = position.longitude;
LatLng location = LatLng(lat, long);
currentlat = lat;
currentlong = long;
setState(() {
currentLocation = location;
_isLoading = false;
});
print("Current Lat: $lat, Long: $long");
}
addPolyLine() {
PolylineId id = const PolylineId("poly");
Polyline polyline = Polyline(
polylineId: id,
color: Colors.blue,
points: polylineCoordinates,
width: 3,
);
polylines[id] = polyline;
}
void makeLines() async {
await polylinePoints
.getRouteBetweenCoordinates(
'API KEY',
PointLatLng(currentlat??0, currentlong??0),
PointLatLng(destination.latitude, destination.longitude), //End LATLANG
travelMode: TravelMode.transit,
)
.then((value) {
value.points.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude, point.longitude));
});
}).then((value) {
addPolyLine();
});
}
void _onMapCreated(GoogleMapController controller) {
mapController = controller;
}
@override
Widget build(BuildContext context) {
Marker destinationMarker = Marker(
markerId: const MarkerId('targetLocation'),
position: destination,
infoWindow: const InfoWindow(title: 'Destination'),
);
Marker currentLocationMarker = Marker(
icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
markerId: const MarkerId('currentLocation'),
position: LatLng(currentlat??0, currentlong??0),
infoWindow: const InfoWindow(title: 'Current Location'),
);
return Scaffold(
appBar: AppBar(
title: const Text('Map'),
),
body: _isLoading
? const Center(child: CircularProgressIndicator())
: Center(
child: Column(
children: [
Expanded(
child: GoogleMap(
myLocationEnabled: true,
onMapCreated: _onMapCreated,
markers: <Marker>{destinationMarker, currentLocationMarker},
polylines: Set<Polyline>.of(polylines.values),
initialCameraPosition: CameraPosition(
target: currentLocation!,
zoom: 16.0,
),
),
)
],
),
)
);
}
}
电流输出:https://i.stack.imgur.com/YYaJb.jpg
由于包含我的当前位置,位置的名称被隐藏。
如何将标记放置在小部件构建之外,然后使标记之间的折线可用?
2条答案
按热度按时间zyfwsgd61#
去Flutter校园看看有你想要的东西
5ktev3wc2#
发生问题的原因是贴图在屏幕上渲染,但仍未生成多段线。
你需要使用腕尺,它管理所有这些异步间隙,以获取当前位置并查找polyLines。
你可以参考下面的代码:
MapsCubit.dart:
MapsSate.dart:
和Maps.dart:
现在,cubit方法getCurrentLocation和getPolyLines将分别管理获取当前位置和生成polyLines的异步操作,并将发出一个状态,而block consumer将捕获它并显示谷歌Map。