Question 76264 in Flutter Question posted in
The official Flutter documentation can be found here.

connected Polygon area from 2 circles in google maps using flutter (true for any programming language)

in the google maps plugin for flutter it is posable to draw a polygon shape using a list of points.
here is an example of creating a polygon in the shape of a circle around a given center with a radius of 1000 meters using 50 points:

  @override
  Widget build(BuildContext context) {
final List<LatLng> polygonCoordinates1 = <LatLng>[];
final int points = 50;
double degreesPerPoint = 360 / points;
final double radius = 1000;
final LatLng center1 = LatLng(37.422, -122.084);

  for (int i = 0; i < points; i++) {
      double radians = degreesPerPoint * i * Math.pi / 180;
      double lat1 = center1.latitude + radius / 111000 * Math.cos(radians);
      double lng1 = center1.longitude + radius / (111000 * Math.cos(center1.latitude * Math.pi / 180)) * Math.sin(radians);
      polygonCoordinates1.add(LatLng(lat1, lng1));
    }
 Polygon circle1 = Polygon(
      polygonId: PolygonId('myCircle1'),
      points: polygonCoordinates1,
      strokeColor: Colors.red,
      strokeWidth: 2,
      fillColor: Colors.blue.withOpacity(0.5),
    );

   return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: GoogleMap(
          polygons: <Polygon>{ circle1},
          initialCameraPosition: const CameraPosition(
            target: LatLng(37.422, -122.084),
            zoom: 15,
          ),
        ),
      ),
    );
}

my problem is when trying to create a single polygon using 2 or more centers. in other words as if trying to show an area a user covered while walking.

combining all points of both circles isn’t working. it is also drawing the overlapping points. how do I get a list of points in the right order that aren’t overlapping?

Tags:

2

Answers


  1. 0

    Try This One

    class CirclePolygon extends StatefulWidget {
  @override
  _CirclePolygonState createState() => _CirclePolygonState();
}

class _CirclePolygonState extends State<CirclePolygon> {
  LatLng _center = LatLng(37.4219999, -122.0840575); // initial center of the circle
  int _points = 50; // number of points to create the polygon
  double _radius = 1000.0; // radius of the circle in meters

  List<LatLng> _polygonPoints = <LatLng>[];

  @override
  void initState() {
    super.initState();
    _calculatePoints();
  }

  void _calculatePoints() {
    // clear existing polygon points
    _polygonPoints.clear();

    // calculate the angle between each point
    final double deltaAngle = 360.0 / _points;

    // add points to the polygon
    for (int i = 0; i < _points; i++) {
      double angle = deltaAngle * i;
      double lat = _center.latitude + (_radius / 111000) * math.cos(angle * math.pi / 180.0);
      double lng = _center.longitude + (_radius / (111000 * math.cos(_center.latitude * math.pi / 180.0))) * math.sin(angle * math.pi / 180.0);
      _polygonPoints.add(LatLng(lat, lng));
    }
  }

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      initialCameraPosition: CameraPosition(
        target: _center,
        zoom: 13.0,
      ),
      polygons: <Polygon>[
        Polygon(
          polygonId: PolygonId('circle'),
          points: _polygonPoints,
          strokeWidth: 2,
          strokeColor: Colors.red,
          fillColor: Colors.red.withOpacity(0.15),
        ),
      ],
    );
  }
}
    Login or Signup to reply.
  2. 0 
    class MyMap extends StatefulWidget {
      @override
      _MyMapState createState() => _MyMapState();
    }
    class _MyMapState extends State<MyMap> {
      GoogleMapController _controller;
    
      static const LatLng _center1 = const LatLng(37.422, -122.084);
      static const LatLng _center2 = const LatLng(37.45, -122.1);
    
      Set<Polygon> _polygons = {};
    
      void _onMapCreated(GoogleMapController controller) {
        _controller = controller;
    
        // Define the two sets of points for the circles
        List<LatLng> circle1Points = <LatLng>[];
        List<LatLng> circle2Points = <LatLng>[];
    
        double radius = 1000; // in meters
        int numberOfPoints = 50;
    
        for (int i = 0; i < numberOfPoints; i++) {
          double angle = (i * 360 / numberOfPoints) * (math.pi / 180);
          double lat1 = _center1.latitude + radius * math.sin(angle);
          double lng1 = _center1.longitude + radius * math.cos(angle);
          double lat2 = _center2.latitude + radius * math.sin(angle);
          double lng2 = _center2.longitude + radius * math.cos(angle);
          circle1Points.add(LatLng(lat1, lng1));
          circle2Points.add(LatLng(lat2, lng2));
        }
    
        // Create the two polygons for the circles
        Polygon circle1 = Polygon(
          polygonId: PolygonId('circle1'),
          points: circle1Points,
          strokeWidth: 2,
          strokeColor: Colors.red,
          fillColor: Colors.red.withOpacity(0.2),
        );
        Polygon circle2 = Polygon(
          polygonId: PolygonId('circle2'),
          points: circle2Points,
          strokeWidth: 2,
          strokeColor: Colors.blue,
          fillColor: Colors.blue.withOpacity(0.2),
        );
    
        // Add the polygons to the set
        setState(() {
          _polygons.add(circle1);
          _polygons.add(circle2);
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return GoogleMap(
          onMapCreated: _onMapCreated,
          initialCameraPosition: CameraPosition(
            target: _center1,
            zoom: 13.0,
          ),
          polygons: _polygons,
        );
      }
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search