如何修改google_maps_flutter中地图集群的外观（如颜色）？

你当前使用google_maps_flutter的多ClusterManager实现分组标记集群，但无法修改集群外观的问题，核心是没用到ClusterManager提供的自定义集群构造回调。官方文档对这部分说明较隐晦，以下是具体实现方案：

核心修改点 #

初始化ClusterManager时，通过clusterBuilder参数自定义集群标记的外观，而非仅依赖默认样式。你可以根据集群的数量、所属分组，生成不同样式的集群图标（比如带数字的圆形图标、不同颜色区分分组等）。

修改后的完整代码示例 #

clusterManagers.clear();
for (final group in groupList) {
  // 为每个分组的ClusterManager设置自定义集群样式
  clusterManagers.add(maps.ClusterManager(
    clusterManagerId: maps.ClusterManagerId(group["type_id"]),
    onClusterTap: ((val)=>0),
    // 自定义集群标记构造器
    clusterBuilder: (cluster) async {
      // 根据集群所属分组和标记数量生成对应图标
      final color = _getGroupColor(group["type_id"]);
      final icon = await _createClusterIcon(cluster.count, color);
      return maps.ClusterMarker(
        markerId: maps.MarkerId(cluster.id),
        position: cluster.position,
        icon: icon,
      );
    },
  ));
}

final List<maps.Marker> markers = [];

for (final group in groupList) {
  for (final item in group["data"]) {
    markers.add(
        maps.Marker(
          markerId: maps.MarkerId((item as Place).name),
          clusterManagerId: maps.ClusterManagerId(group["type_id"]),
          position: item.latLng,
          icon: maps.BitmapDescriptor.defaultMarker,
        )
    );
  }
}

return maps.GoogleMap(
  mapType: maps.MapType.normal,
  initialCameraPosition: maps.CameraPosition(
    target: position,
    zoom: 18,
  ),
  markers: markers.toSet(),
  clusterManagers: clusterManagers.toSet(),
);

辅助方法实现（自定义集群图标） #

通过Canvas绘制带数字的集群图标，示例如下：

// 根据分组ID返回对应颜色
Color _getGroupColor(String typeId) {
  switch(typeId) {
    case 'type1':
      return Colors.red;
    case 'type2':
      return Colors.blue;
    default:
      return Colors.grey;
  }
}

// 生成带数字的集群图标
Future<maps.BitmapDescriptor> _createClusterIcon(int count, Color color) async {
  final pictureRecorder = ui.PictureRecorder();
  final canvas = Canvas(pictureRecorder);
  final size = Size(50, 50);

  // 绘制圆形背景
  final paint = Paint()..color = color;
  canvas.drawCircle(size.center(Offset.zero), size.width/2, paint);

  // 绘制集群数量文本
  final textPainter = TextPainter(
    text: TextSpan(
      text: count.toString(),
      style: TextStyle(
        color: Colors.white,
        fontSize: 20,
        fontWeight: FontWeight.bold,
      ),
    ),
    textDirection: TextDirection.ltr,
  );
  textPainter.layout(minWidth: size.width, maxWidth: size.width);
  textPainter.paint(canvas, Offset(size.width/2 - textPainter.width/2, size.height/2 - textPainter.height/2));

  final picture = pictureRecorder.endRecording();
  final image = await picture.toImage(size.width.toInt(), size.height.toInt());
  final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
  return maps.BitmapDescriptor.fromBytes(byteData!.buffer.asUint8List());
}

说明 #

1. 每个ClusterManager可独立设置clusterBuilder，实现不同分组的集群样式差异化
2. 若无需动态绘制，也可提前准备好不同样式的本地图片，根据集群数量和分组直接返回对应的BitmapDescriptor
3. 需导入dart:ui包以使用Canvas相关API

内容的提问来源于stack exchange，提问作者Fabrício Gerhardt Jr