我正在将谷歌地图集成到 Flutter 应用程序中。我在应用程序中添加了多个标记。另外,我使用 flutter_polyline_points 在两个标记之间添加了方向。问题是我如何在折线点上放置一个小部件来显示我使用距离指标 API 计算的距离或估计的旅行时间。
谷歌地图
child: GoogleMap(
mapType: MapType.normal,
markers: Set<Marker>.of(markerData.values),
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 15.0,
),
// zoomControlsEnabled: false,
mapToolbarEnabled: true,
myLocationButtonEnabled: true,
myLocationEnabled: true,
polylines: Set<Polyline>.of(polylines.values),
),
标记
void initMarkers(markerDetails, markerId) async {
final markerIdVal = markerId;
final MarkerId markerIdData = MarkerId(markerIdVal);
final Marker marker = Marker(
markerId: markerIdData,
position: LatLng(markerDetails["latitude"], markerDetails["longitude"]),
icon: await BitmapDescriptor.fromAssetImage(
ImageConfiguration(devicePixelRatio: 2.5),
'assets/images/marker.png'),
infoWindow:
InfoWindow(title: markerDetails["title"], snippet: distanceToLocation),
onTap: () {
_handleMarkerTap(
LatLng(markerDetails["latitude"], markerDetails["longitude"]));
});
setState(() {
markerData[markerIdData] = marker;
});
}
折线点
//Get polyline
void _getPolyline(latitude, longitude) async {
List<LatLng> polylineCoordinates = [];
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
"MY_API_KEY",
PointLatLng(13.0323, 77.57),
PointLatLng(latitude, longitude),
travelMode: TravelMode.walking,
);
if (result.points.isNotEmpty) {
result.points.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude, point.longitude));
});
} else {
print(result.errorMessage);
}
_addPolyLine(polylineCoordinates);
}
//Add polylines to the map
_addPolyLine(List<LatLng> polylineCoordinates) {
PolylineId id = PolylineId("poly");
Polyline polyline = Polyline(
polylineId: id,
color: Colors.deepOrange,
points: polylineCoordinates,
width: 3,
patterns: [PatternItem.dash(15), PatternItem.gap(10)],
);
polylines[id] = polyline;
}