[英]How can I dynamically draw polygons in google maps flutter?
我正在嘗試根據用戶輸入在谷歌地圖上繪制多邊形,但我在網上看到的所有教程都是在 init 方法中完成的。 我嘗試在 init state 之外實現它,但它似乎不起作用。 請幫忙! 謝謝!
下面是將多邊形添加到集合中的方法:
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,
),
任何幫助將不勝感激!
我開發了以下方法來繪制多邊形:
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();
});
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.