flutter_map_marker_cluster如何实现地图标记聚类

在使用flutter_map_marker_cluster时，如何实现地图标记的聚类功能？我尝试按照官方文档配置，但标记始终无法自动聚合，请问正确的实现步骤是什么？是否需要额外设置缩放级别或自定义聚合算法？能否提供完整的代码示例？

2 回复

使用flutter_map_marker_cluster插件，通过MarkerClusterLayerWidget实现地图标记聚类。添加插件依赖后，创建聚类图层并设置聚类选项，如聚类大小、样式等。最后将图层添加到地图即可自动聚类。

更多关于flutter_map_marker_cluster如何实现地图标记聚类的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter 中使用 flutter_map_marker_cluster 实现地图标记聚类的方法如下：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  flutter_map: ^5.0.0
  flutter_map_marker_cluster: ^2.0.0

2. 基本实现代码

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 ClusteredMap extends StatelessWidget {
  final List<Marker> markers = [
    Marker(
      point: LatLng(51.5, -0.09),
      builder: (ctx) => Icon(Icons.pin_drop, color: Colors.red),
    ),
    // 添加更多标记点...
  ];

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(
        center: LatLng(51.5, -0.09),
        zoom: 10,
        plugins: [MarkerClusterPlugin()],
      ),
      layers: [
        TileLayerOptions(
          urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: ['a', 'b', 'c'],
        ),
        MarkerClusterLayerOptions(
          maxClusterRadius: 120,
          size: Size(40, 40),
          fitBoundsOptions: FitBoundsOptions(padding: EdgeInsets.all(50)),
          markers: markers,
          polygonOptions: PolygonOptions(
              borderColor: Colors.blueAccent,
              color: Colors.black12,
              borderStrokeWidth: 3),
          builder: (context, markers) {
            return Container(
              decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(20)),
              child: Center(
                child: Text(
                  markers.length.toString(),
                  style: TextStyle(color: Colors.white),
                ),
              ),
            );
          },
        ),
      ],
    );
  }
}

3. 关键配置说明

  • maxClusterRadius：聚类半径（像素）
  • size：聚类图标尺寸
  • builder：自定义聚类图标样式
  • markers：原始标记点列表

4. 自定义功能

  • 点击聚类可展开/缩放地图
  • 支持动态更新标记点
  • 可自定义聚类算法参数

注意事项

  1. 确保添加了地图图层（如OpenStreetMap）
  2. 大量标记点时建议使用 MarkerClusterLayerWidget 以获得更好性能
  3. 可通过 ClusterManager 实现更复杂的聚类逻辑

这样即可实现基于密度的地图标记智能聚类，当缩放级别改变时会自动重新计算聚类。

回到顶部