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

简介

flutter_map_marker_cluster 是一个用于Flutter应用程序的Dart实现，它为地图上的标记提供聚类功能。该插件基于流行的Leaflet.markercluster，并且是flutter_map包的一个扩展插件。

使用方法

添加依赖项

首先，在您的 pubspec.yaml 文件中添加 flutter_map 和 flutter_map_marker_cluster 依赖项：

dependencies:
  flutter_map: any
  flutter_map_marker_cluster: any # 或者使用Pub上最新的版本

然后运行 flutter pub get 来安装这些包。

实现代码

在您的 Dart 文件中，通过以下方式来创建一个带有聚类功能的地图：

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart';
import 'package:latlong2/latlong.dart';

class ClusteringManyMarkersPage extends StatelessWidget {
  static const String route = '/clustering-many-markers-page';

  // 示例数据：这里我们创建一些随机位置的标记
  final List<Marker> markers = [
    Marker(
      point: LatLng(51.5, -0.09),
      builder: (ctx) => const Icon(Icons.location_on, color: Colors.red),
    ),
    Marker(
      point: LatLng(51.51, -0.08),
      builder: (ctx) => const Icon(Icons.location_on, color: Colors.red),
    ),
    Marker(
      point: LatLng(51.49, -0.1),
      builder: (ctx) => const Icon(Icons.location_on, color: Colors.red),
    ),
    // ...更多标记...
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Clustering Many Markers Page')),
      body: FlutterMap(
        options: MapOptions(
          center: LatLng((51.5 + 51.49) / 2, (-0.09 + -0.1) / 2), // 中心点计算
          zoom: 13,
          maxZoom: 15,
        ),
        children: <Widget>[
          TileLayer(
            urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            subdomains: ['a', 'b', 'c'],
          ),
          MarkerClusterLayerWidget(
            options: MarkerClusterLayerOptions(
              maxClusterRadius: 120, // 聚类的最大半径
              size: const Size(40, 40), // 单个聚类项的大小
              padding: const EdgeInsets.all(10), // 内边距
              maxZoom: 15, // 最大缩放级别
              markers: markers, // 标记列表
              builder: (context, markers) {
                return Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: Colors.blue,
                  ),
                  child: Center(
                    child: Text(
                      markers.length.toString(),
                      style: const TextStyle(color: Colors.white),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

上面的代码片段展示了如何设置一个包含多个标记的地图，并启用标记聚类功能。当用户缩放或平移地图时，靠近的标记会自动合并成一个聚类图标，显示附近有多少个标记。随着用户进一步放大地图，聚类将解散并展示单独的标记。

运行示例

为了更直观地了解这个插件的功能，您可以查看项目中的 example/ 文件夹，那里有一个完整的示例应用程序可以运行。克隆仓库后，只需导航到 example 目录并执行 flutter run 命令即可启动示例应用。

希望这份指南能够帮助您快速入门 flutter_map_marker_cluster 插件。如果您有任何问题或者需要更多的帮助，请随时查阅官方文档或访问GitHub页面获取更多信息。