如何为MapMarker添加文本标签？MapViewPin存在抖动性能问题

由于MapViewPin依赖Flutter Widget层渲染，和地图原生渲染流程不同步，所以地图移动时会出现抖动；而MapMarker是地图原生渲染的元素，性能更稳定无延迟。要给MapMarker添加文本，可通过预先生成带文本的自定义图标实现，具体步骤如下：

1. 生成带文本的自定义图标 #

使用Flutter的Canvas绘制包含背景图标和文本的图片，将其转换为Uint8List格式：

import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:here_sdk/core.dart';
import 'package:here_sdk/mapview.dart';

Future<Uint8List> generateMarkerWithText(String text) async {
  // 定义标记整体尺寸
  const markerSize = Size(100, 100);
  final recorder = ui.PictureRecorder();
  final canvas = ui.Canvas(recorder);
  final bgPaint = Paint()..color = Colors.cyan;

  // 绘制圆形背景（可替换为自定义图标绘制逻辑）
  canvas.drawCircle(
    Offset(markerSize.width / 2, markerSize.height / 2),
    40,
    bgPaint,
  );

  // 绘制文本并居中
  final textPainter = TextPainter(
    text: TextSpan(
      text: text,
      style: const TextStyle(
        color: Colors.white,
        fontSize: 20,
        fontWeight: FontWeight.bold,
      ),
    ),
    textDirection: TextDirection.ltr,
  );
  textPainter.layout(minWidth: 0, maxWidth: markerSize.width);
  textPainter.paint(
    canvas,
    Offset(
      markerSize.width / 2 - textPainter.width / 2,
      markerSize.height / 2 - textPainter.height / 2,
    ),
  );

  // 将绘制内容转为PNG格式的二进制数据
  final picture = recorder.endRecording();
  final image = await picture.toImage(
    markerSize.width.toInt(),
    markerSize.height.toInt(),
  );
  final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
  return byteData!.buffer.asUint8List();
}

2. 创建并添加MapMarker #

用生成的带文本图标数据创建MapMarker，添加到地图场景中：

// 生成带指定文本的标记图片
final markerImageData = await generateMarkerWithText("你的文本");
// 创建MapMarker，替换为目标经纬度
final customMarker = MapMarker(
  GeoCoordinates(52.530932, 13.384915),
  MapImage.withPixelDataAndImageFormat(markerImageData, ImageFormat.png),
);
// 设置锚点，确保标记底部对准坐标点（可根据需求调整比例）
customMarker.anchorPoint = Anchor2D.withHorizontalAndVertical(0.5, 1.0);

// 将标记添加到地图
_mapController.mapScene.addMapMarker(customMarker);

额外提示 #

• 如果需要使用本地PNG图标而非绘制的纯色背景，可以先加载本地图片资源，再在Canvas上叠加文本。
• 若需创建大量带文本的标记，建议提前预生成图标并缓存，避免重复绘制消耗性能。

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