Flutter地图标记聚类插件markers_cluster_google_maps_flutter的使用

以下是关于 “Flutter 地图标记聚类插件 markers_cluster_google_maps_flutter 的使用” 的详细内容。该内容完全基于你提供的信息，并且提供了完整的示例代码。

markers_cluster_google_maps_flutter

包用于在 Flutter 应用程序中的 Google 地图上聚类标记。

安装

要使用此插件，在 pubspec.yaml 文件中添加 markers_cluster_google_maps_flutter 作为依赖项。

使用

1. 导入包：

   import 'package:markers_cluster_google_maps_flutter/markers_cluster_google_maps_flutter.dart';
   

2. 初始化 MarkersClusterManager：

   final clusterManager = MarkersClusterManager();
   

3. 使用以下方法添加标记：

   clusterManager.addMarker();
   

4. 在特定缩放级别更新集群：

   await clusterManager.updateClusters(zoomLevel: 12);
   

5. 使用以下方法获取聚类标记：

   final clusteredMarkers = clusterManager.getClusteredMarkers();
   

6. 在您的 GoogleMap 小部件中使用聚类标记：

   GoogleMap(
     mapType: MapType.normal,
     onMapCreated: (GoogleMapController controller) {
       // 完成控制器并更新集群
     },
     initialCameraPosition: CameraPosition(
       target: LatLng(33.6937, 73.0653),
       zoom: 10.0,
     ),
     onCameraMove: (CameraPosition position) {
       // 基于缩放级别更新集群
     },
     markers: Set<Marker>.of(clusteredMarkers),
   );
   

示例

class MarkersClusterExampleBasic extends StatefulWidget {
  const MarkersClusterExampleBasic({super.key});

  @override
  State<MarkersClusterExampleBasic> createState() => _MarkersClusterExampleBasicState();
}

class _MarkersClusterExampleBasicState extends State<MarkersClusterExampleBasic> {
  // 完成控制器以保存 GoogleMapController
  final Completer<GoogleMapController> _mapController = Completer<GoogleMapController>();
  // 自定义 MarkersClusterManager 的实例
  late MarkersClusterManager _clusterManager;
  // 地图的初始缩放级别
  double _currentZoom = 5.5;

  @override
  void initState() {
    super.initState();
    // 使用自定义设置初始化集群管理器
    _clusterManager = MarkersClusterManager(
      clusterMarkerSize: 35.0,
      clusterColor: Colors.blue,
      clusterBorderThickness: 4.0,
      clusterBorderColor: Colors.blue[900]!,
      clusterOpacity: 1.0,
      clusterTextStyle: TextStyle(fontSize: 15, color: Colors.white),
      onMarkerTap: (LatLng position) {
        _handleMarkerTap(position);
      },
    );
    // 向集群管理器添加初始标记
    _addMarkers();
  }

  // 添加不同城市的标记的函数
  void _addMarkers() {
    // 伊斯坦布尔的坐标
    List<LatLng> islamabadCoordinates = [
      LatLng(33.6844, 73.0479),
      LatLng(33.7070, 73.0551),
      LatLng(33.7215, 73.0433),
      LatLng(33.7398, 73.0372),
      LatLng(33.7380, 73.0845),
      LatLng(33.7029, 73.0591),
      LatLng(33.7297, 73.0735),
      LatLng(33.6826, 73.0606),
      LatLng(33.6913, 73.0383),
      LatLng(33.6786, 73.0320)
    ];

    // 拉合尔的坐标
    List<LatLng> lahoreCoordinates = [
      LatLng(31.5497, 74.3436),
      LatLng(31.5525, 74.3587),
      LatLng(31.5603, 74.3263),
      LatLng(31.5204, 74.3587),
      LatLng(31.5331, 74.3440),
      LatLng(31.5783, 74.3673),
      LatLng(31.5615, 74.3106),
      LatLng(31.5733, 74.3644),
      LatLng(31.5094, 74.3536),
      LatLng(31.5150, 74.3437)
    ];

    // 卡拉奇的坐标
    List<LatLng> karachiCoordinates = [
      LatLng(24.8607, 67.0011),
      LatLng(24.8701, 67.0234),
      LatLng(24.8472, 67.0322),
      LatLng(24.8952, 67.0280),
      LatLng(24.8615, 67.0099),
      LatLng(24.8846, 67.0681),
      LatLng(24.8595, 67.0425),
      LatLng(24.8731, 67.0212),
      LatLng(24.8683, 67.0301),
      LatLng(24.8865, 67.0512)
    ];

    // 白沙瓦的坐标
    List<LatLng> peshawarCoordinates = [
      LatLng(34.0124, 71.5785),
      LatLng(34.0125, 71.5786),
      LatLng(34.0126, 71.5787),
      LatLng(34.0167, 71.5249),
      LatLng(34.0222, 71.5760),
      LatLng(34.0059, 71.5374),
      LatLng(34.0077, 71.5718),
      LatLng(34.0161, 71.5357),
      LatLng(34.0033, 71.5444),
      LatLng(34.0195, 71.5651)
    ];

    // 奎达的坐标
    List<LatLng> quettaCoordinates = [
      LatLng(30.1798, 66.9750),
      LatLng(30.1916, 66.9904),
      LatLng(30.1738, 67.0040),
      LatLng(30.1623, 67.0098),
      LatLng(30.1425, 66.9978),
      LatLng(30.1964, 66.9466),
      LatLng(30.2092, 66.9212),
      LatLng(30.2189, 66.8999),
      LatLng(30.2362, 66.8741),
      LatLng(30.2523, 66.9112)
    ];

    // 为伊斯坦布尔添加标记
    for (var i = 0; i < islamabadCoordinates.length; i++) {
      _clusterManager.addMarker(Marker(
          markerId: MarkerId('islamabad_$i'),
          position: islamabadCoordinates[i],
          infoWindow: InfoWindow(title: '伊斯兰堡标记 $i')));
    }

    // 为拉合尔添加标记
    for (var i = 0; i < lahoreCoordinates.length; i++) {
      _clusterManager.addMarker(Marker(
          markerId: MarkerId('lahore_$i'),
          position: lahoreCoordinates[i],
          infoWindow: InfoWindow(title: '拉合尔标记 $i')));
    }

    // 为卡拉奇添加标记
    for (var i = 0; i < karachiCoordinates.length; i++) {
      _clusterManager.addMarker(Marker(
          markerId: MarkerId('karachi_$i'),
          position: karachiCoordinates[i],
          infoWindow: InfoWindow(title: '卡拉奇标记 $i')));
    }

    // 为白沙瓦添加标记
    for (var i = 0; i < peshawarCoordinates.length; i++) {
      _clusterManager.addMarker(Marker(
          markerId: MarkerId('peshawar_$i'),
          position: peshawarCoordinates[i],
          infoWindow: InfoWindow(title: '白沙瓦标记 $i')));
    }

    // 为奎达添加标记
    for (var i = 0; i < quettaCoordinates.length; i++) {
      _clusterManager.addMarker(Marker(
          markerId: MarkerId('quetta_$i'),
          position: quettaCoordinates[i],
          infoWindow: InfoWindow(title: '奎达标记 $i')));
    }
  }

  // 处理标记点击事件
  void _handleMarkerTap(LatLng position) async {
    // 添加你的标记点击处理代码
  }

  // 根据当前缩放级别更新集群
  Future<void> _updateClusters() async {
    await _clusterManager.updateClusters(zoomLevel: _currentZoom);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("标记聚类")),
      body: Stack(children: [
        GoogleMap(
          mapType: MapType.normal,
          onMapCreated: (GoogleMapController controller) async {
            _mapController.complete(controller);
            // 当地图创建时更新集群
            await _updateClusters();
          },
          initialCameraPosition: CameraPosition(
            target: LatLng(30.3753, 69.3451),
            zoom: _currentZoom,
          ),
          onCameraMove: (CameraPosition position) async {
            _currentZoom = position.zoom;
            // 当相机移动时更新集群
            debugPrint("当前缩放级别: ${_currentZoom}");
            await _updateClusters();
          },
          myLocationEnabled: true,
          compassEnabled: true,
          myLocationButtonEnabled: false,
          zoomControlsEnabled: false,
          markers: Set<Marker>.of(_clusterManager.getClusteredMarkers()),
        ),
      ]),
    );
  }
}

支持和贡献

对于支持，请在 GitHub 存储库中点赞。欢迎贡献！请在 GitHub 存储库中提交问题和拉取请求。