首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Flutter中在Google地图上绘制多边形,并将所有POI放在其中?

在Flutter中,可以使用google_maps_flutter插件来在Google地图上绘制多边形并将POI(兴趣点)放在其中。

首先,确保已经在项目的pubspec.yaml文件中添加了google_maps_flutter插件的依赖。

代码语言:txt
复制
dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.10

然后,在需要使用Google地图的页面中导入google_maps_flutter插件。

代码语言:txt
复制
import 'package:google_maps_flutter/google_maps_flutter.dart';

接下来,创建一个Google地图的Widget,并在其中添加一个GoogleMap控件。

代码语言:txt
复制
GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14,
  ),
  onMapCreated: (GoogleMapController controller) {
    // 在地图创建后的回调中,可以进行一些初始化操作
    // 比如添加多边形和POI
    _addPolygon(controller);
    _addPOIs(controller);
  },
),

在onMapCreated回调中,可以调用GoogleMapController的方法来添加多边形和POI。

首先,创建一个多边形的坐标点列表。

代码语言:txt
复制
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方法来添加多边形。

代码语言:txt
复制
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。

代码语言:txt
复制
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。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券