Flutter中如何使用内置图标作为Google Maps标记？

一、使用Flutter内置图标作为Google Maps标记 #

要将Icons.camera_alt_outlined这类Material内置图标转为Google Maps可用的BitmapDescriptor，可以通过将图标绘制到画布再转为字节数据的方式实现，具体代码如下：

核心实现代码 #

import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

static Future<Uint8List> getBytesFromIcon({
  required IconData icon,
  required double size,
  required Color color,
}) async {
  final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
  final Canvas canvas = Canvas(pictureRecorder);
  
  // 初始化图标绘制器
  final IconPainter painter = IconPainter(
    icon,
    color: color,
    size: size,
  );
  
  // 将图标绘制到指定尺寸的画布上
  painter.paint(canvas, Rect.fromLTWH(0, 0, size, size));
  
  // 将画布内容转为图片并提取PNG字节数据
  final ui.Picture picture = pictureRecorder.endRecording();
  final ui.Image image = await picture.toImage(size.toInt(), size.toInt());
  final ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
  
  return byteData!.buffer.asUint8List();
}

使用方法 #

和你之前处理PNG图标的逻辑一致，生成字节数据后传入BitmapDescriptor.fromBytes即可：

// 生成内置图标对应的字节数据
final Uint8List iconBytes = await getBytesFromIcon(
  icon: Icons.camera_alt_outlined,
  size: 40,
  color: Colors.blue,
);
// 转为地图标记可用的BitmapDescriptor
final BitmapDescriptor markerIcon = BitmapDescriptor.fromBytes(iconBytes);

二、带图标针形标记的现成Flutter包 #

不需要自行操作Canvas开发，有几个成熟的Flutter包可以快速实现这类带图标针形标记：

• flutter_map_marker_cluster：支持带图标的针形标记，同时提供标记聚类功能，可自定义标记形状、内部图标样式。
• map_marker_generator：专注于生成自定义地图标记，支持在针形底座上添加图标、文字等元素，API简洁易上手。
• custom_marker_icon：可快速创建包含内置图标的针形标记，支持自定义图标颜色、底座颜色、整体尺寸等参数。

示例（以custom_marker_icon为例） #

安装依赖后，直接调用API生成标记：

final BitmapDescriptor pinMarker = await CustomMarkerIcon.createMarker(
  icon: Icons.camera_alt_outlined,
  iconColor: Colors.white,
  backgroundColor: Colors.blue,
  size: 50,
);

内容的提问来源于stack exchange，提问作者DeKekem