firebase 如何在谷歌Map中动态绘制多边形？

pxy2qtax 于 2023-02-05 发布在其他

关注(0)|答案(1)|浏览(140)

我尝试在googleMap上根据用户输入绘制多边形，但是我在网上看到的所有教程都是在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,
      ),

任何帮助将不胜感激!

firebase

来源：https://stackoverflow.com/questions/73999368/how-can-i-dynamically-draw-polygons-in-google-maps-flutter

1条答案

按热度按时间

6l7fqoea1#

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

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

赞(0）回复(0）举报 2023-02-05

我来回答

firebase 如何在谷歌Map中动态绘制多边形？

1条答案

相关问题

热门标签

最新问答