Flutter地图点聚合插件clustering_google_maps的使用

clustering_google_maps 是一个用于在 Flutter 中使用 Google Maps 进行点聚合的插件。它可以帮助你在大量标记点的情况下，将相近的点聚合在一起，以提高地图的可读性和性能。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 clustering_google_maps 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  clustering_google_maps: ^1.0.0

然后运行 flutter pub get 来安装插件。

基本使用

1. 导入插件：

   在你的 Dart 文件中导入 clustering_google_maps 插件：

   import 'package:clustering_google_maps/clustering_google_maps.dart';
   

2. 创建地图：

   使用 GoogleMap 组件来创建地图，并设置 markers 属性来显示标记点。

   import 'package:flutter/material.dart';
   import 'package:google_maps_flutter/google_maps_flutter.dart';
   import 'package:clustering_google_maps/clustering_google_maps.dart';
   
   class MapScreen extends StatefulWidget {
     [@override](/user/override)
     _MapScreenState createState() => _MapScreenState();
   }
   
   class _MapScreenState extends State<MapScreen> {
     late GoogleMapController mapController;
     final Set<Marker> markers = {};
   
     [@override](/user/override)
     void initState() {
       super.initState();
       _loadMarkers();
     }
   
     void _loadMarkers() async {
       final List<ClusterItem> items = [
         ClusterItem(LatLng(37.7749, -122.4194), 'San Francisco'),
         ClusterItem(LatLng(34.0522, -118.2437), 'Los Angeles'),
         ClusterItem(LatLng(36.1699, -115.1398), 'Las Vegas'),
         // 添加更多标记点
       ];
   
       final clusterManager = ClusterManager<ClusterItem>(items, _updateMarkers);
       await clusterManager.setMap(mapController);
     }
   
     void _updateMarkers(Set<Marker> markers) {
       setState(() {
         this.markers.clear();
         this.markers.addAll(markers);
       });
     }
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         body: GoogleMap(
           onMapCreated: (GoogleMapController controller) {
             mapController = controller;
           },
           initialCameraPosition: CameraPosition(
             target: LatLng(37.7749, -122.4194),
             zoom: 10,
           ),
           markers: markers,
         ),
       );
     }
   }
   

3. 处理聚合：

   ClusterManager 负责处理标记点的聚合。你需要将标记点列表传递给 ClusterManager，并提供一个回调函数 _updateMarkers 来更新地图上的标记。

   final clusterManager = ClusterManager<ClusterItem>(items, _updateMarkers);
   await clusterManager.setMap(mapController);
   

4. 自定义聚合标记：

   你可以自定义聚合标记的外观。例如，可以设置聚合标记的颜色、大小和文本。

   final clusterManager = ClusterManager<ClusterItem>(
     items,
     _updateMarkers,
     markerBuilder: (Cluster<ClusterItem> cluster) {
       return Marker(
         markerId: MarkerId(cluster.getId()),
         position: cluster.location,
         icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
         infoWindow: InfoWindow(title: 'Cluster ${cluster.size}'),
       );
     },
   );
   

完整示例

以下是一个完整的示例，展示了如何使用 clustering_google_maps 插件在 Google Maps 上进行点聚合：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:clustering_google_maps/clustering_google_maps.dart';

class MapScreen extends StatefulWidget {
  [@override](/user/override)
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  late GoogleMapController mapController;
  final Set<Marker> markers = {};

  [@override](/user/override)
  void initState() {
    super.initState();
    _loadMarkers();
  }

  void _loadMarkers() async {
    final List<ClusterItem> items = [
      ClusterItem(LatLng(37.7749, -122.4194), 'San Francisco'),
      ClusterItem(LatLng(34.0522, -118.2437), 'Los Angeles'),
      ClusterItem(LatLng(36.1699, -115.1398), 'Las Vegas'),
      // 添加更多标记点
    ];

    final clusterManager = ClusterManager<ClusterItem>(
      items,
      _updateMarkers,
      markerBuilder: (Cluster<ClusterItem> cluster) {
        return Marker(
          markerId: MarkerId(cluster.getId()),
          position: cluster.location,
          icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
          infoWindow: InfoWindow(title: 'Cluster ${cluster.size}'),
        );
      },
    );

    await clusterManager.setMap(mapController);
  }

  void _updateMarkers(Set<Marker> markers) {
    setState(() {
      this.markers.clear();
      this.markers.addAll(markers);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        onMapCreated: (GoogleMapController controller) {
          mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(37.7749, -122.4194),
          zoom: 10,
        ),
        markers: markers,
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MapScreen(),
  ));
}