在Flutter中,可以使用google_maps_flutter插件来在Google地图上绘制多边形并将POI(兴趣点)放在其中。
首先,确保已经在项目的pubspec.yaml文件中添加了google_maps_flutter插件的依赖。
dependencies:
flutter:
sdk: flutter
google_maps_flutter: ^2.0.10
然后,在需要使用Google地图的页面中导入google_maps_flutter插件。
import 'package:google_maps_flutter/google_maps_flutter.dart';
接下来,创建一个Google地图的Widget,并在其中添加一个GoogleMap控件。
GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(37.42796133580664, -122.085749655962),
zoom: 14,
),
onMapCreated: (GoogleMapController controller) {
// 在地图创建后的回调中,可以进行一些初始化操作
// 比如添加多边形和POI
_addPolygon(controller);
_addPOIs(controller);
},
),
在onMapCreated回调中,可以调用GoogleMapController的方法来添加多边形和POI。
首先,创建一个多边形的坐标点列表。
List<LatLng> polygonPoints = [
LatLng(37.43296265331129, -122.08832357078792),
LatLng(37.43006265331129, -122.08832357078792),
LatLng(37.43006265331129, -122.08332357078792),
LatLng(37.43296265331129, -122.08332357078792),
];
然后,使用GoogleMapController的addPolygon方法来添加多边形。
void _addPolygon(GoogleMapController controller) {
controller.addPolygon(
Polygon(
polygonId: PolygonId('polygon'),
points: polygonPoints,
fillColor: Colors.blue.withOpacity(0.5),
strokeColor: Colors.blue,
strokeWidth: 2,
),
);
}
接下来,可以使用Marker来添加POI。
void _addPOIs(GoogleMapController controller) {
List<Marker> markers = [
Marker(
markerId: MarkerId('poi1'),
position: LatLng(37.43196265331129, -122.08632357078792),
infoWindow: InfoWindow(title: 'POI 1'),
),
Marker(
markerId: MarkerId('poi2'),
position: LatLng(37.43196265331129, -122.08532357078792),
infoWindow: InfoWindow(title: 'POI 2'),
),
// 添加更多的POI
];
controller.addMarkers(markers);
}
以上代码会在Google地图上绘制一个蓝色的多边形,并在多边形内添加两个POI。
领取专属 10元无门槛券
手把手带您无忧上云