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

Question

I'm trying to draw polygons on google maps based on user input, but all the tutorials i've seen online have done it inside an init method. I tried implementing it outside of the init state, but it doesn't seem to work. Please help! Thanks!

Here is the method to add the polygons to a set:

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);
  }

And this is my GoogleMap widget:

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

Any help would be greatly appreciated!

Answer 1

I developed the below methods to draw the polygon:

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();
  });
}
}