如何在谷歌地图中动态绘制多边形

Question

我正试图根据用户输入在谷歌地图上绘制多边形，但我在网上看到的所有教程都是在init方法中完成的。我尝试在init状态之外实现它，但它似乎不起作用。请帮忙！谢谢

以下是将多边形添加到集合的方法：

Set<Polygon> _polygons = HashSet<Polygon>();
Future<void> drawPolygonBoundary(String name, List points) async {
List<LatLng> boundaryPoints = [];
for (List point in points) {
boundaryPoints.add(LatLng(point[0], point[1]));
}
Set<Polygon> newPolygons = HashSet<Polygon>();
newPolygons.add(
Polygon(
polygonId: PolygonId(name),
points: boundaryPoints,
fillColor: Colors.green.withOpacity(0.3),
strokeColor: Colors.green,
geodesic: true,
strokeWidth: 4,
onTap: () {},
),
);
//update polygons
setState(() {
_polygons = newPolygons.toSet();
});
print(_polygons);
}

这是我的GoogleMap小部件：

GoogleMap(
onMapCreated: _onMapCreated,
polygons: _polygons,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 10.0,
),
myLocationEnabled: true,
myLocationButtonEnabled: false,
),

如有任何帮助，我们将不胜感激！

Answer 1

我开发了以下方法来绘制多边形：

void _onMapLongPress(LatLng latLng) {
setState(() {
// Check if a marker with the same markerId already exists
final id = (_markers.length + 1).toString();
final marker = Marker(
markerId: MarkerId(id),
position: latLng,
icon: BitmapDescriptor.defaultMarker,
draggable: true,
onDragEnd: (LatLng newPosition) {
_markers = Set.from(_markers.map((m) => m.markerId.value == id ? m.copyWith(positionParam: newPosition) : m));
_updatePolygon();
},
infoWindow: InfoWindow(
title: "Marker ${id}",
snippet: "Tap to delete",
onTap: () => _onDeletePress(latLng, id),
),
);
_markers.add(marker);
_updatePolygon();
});
}
void _onDeletePress(LatLng latLng, String markerId) {
setState(() {
_markers.removeWhere((m) => m.markerId.value == markerId);
});
_updatePolygon();
}
void _updatePolygon() {
_polygons.clear();
if (_markers.length >= 3) {
final test = Set.from(_markers.map((m) => m.position));
final origin = test.reduce((value, element) => LatLng(
(value.latitude + element.latitude) / 2,
(value.longitude + element.longitude) / 2));
final polarCoordinates =
test.map((c) => _toPolar(c, origin)).toList();
polarCoordinates.sort((a, b) =>
a.theta == b.theta ? a.r.compareTo(b.r) : a.theta.compareTo(b.theta));
final orderedCoordinates =
polarCoordinates.map((p) => _fromPolar(p, origin)).toList();
setState(() {
_polygons.clear();
_polygons.add(Polygon(
polygonId: PolygonId(test.length.toString()),
points: orderedCoordinates,
fillColor: Colors.green.withOpacity(0.5),
strokeWidth: 3,
strokeColor: Colors.green,
));
final waypoints = waypointsAlongPolygon(Polygon(points: orderedCoordinates), 10.0);
for (var i = 0; i < waypoints.length; i++) {
_markers.add(
Marker(
markerId: MarkerId(i.toString()),
position: waypoints[i],
icon: BitmapDescriptor.defaultMarker,
);
_waypointMarkers.add(waypointMarker);
}
});
} else {
setState(() {
_polygons.clear();
});
}
}