google_maps_flutter自定义PNG地图标记真机像素化问题排查

问题核心原因 #

1. 设备像素比（DPR）差异：物理设备（尤其是高分辨率手机）的DPR远高于模拟器，当前代码直接用固定数值（150/100）缩放图片，生成的图片像素密度不足，在高DPR屏幕上被拉伸后出现像素化。
2. BitmapDescriptor.fromAssetImage的优势：该方法会自动根据设备DPR和配置的显示尺寸，加载匹配分辨率的图片，因此不会像素化，但它无法直接精确控制最终显示大小。
3. 之前DPR方案无效的原因：你尝试的方案是将固定height乘以DPR，但原代码中传入的height（150/100）本身是放大后的数值，而非实际显示高度，导致目标像素高度计算错误，反而可能过度压缩或放大图片。

修复方案 #

1. 调整缩放逻辑，基于实际显示高度和设备DPR计算目标像素

修改图片解码逻辑，以实际显示高度为基准，乘以设备DPR得到足够的像素高度，确保生成的图片适配高分辨率屏幕：

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

Future<BitmapDescriptor> getBitmapDescriptorFromAsset(
  String path,
  double displayHeight,
) async {
  final dpr = ui.window.devicePixelRatio;
  // 计算适配设备的目标像素高度：显示高度 × 设备像素比
  final targetPixelHeight = (displayHeight * dpr).ceil();

  ByteData data = await rootBundle.load(path);
  ui.Codec codec = await ui.instantiateImageCodec(
    data.buffer.asUint8List(),
    targetHeight: targetPixelHeight,
  );
  ui.FrameInfo frameInfo = await codec.getNextFrame();
  // 直接从Image创建BitmapDescriptor，避免转字节的质量损失
  return BitmapDescriptor.fromImage(frameInfo.image);
}

2. 客户端调用时传入实际显示高度

将原代码中移动端的固定数值替换为Web端使用的实际显示高度，保持多端显示尺寸一致：

if (kIsWeb) {
  return BitmapDescriptor.fromAssetImage(
    createLocalImageConfiguration(
      context,
      size: selected ? const Size(50, 58.2035) : const Size(35, 40.7422),
    ),
    filePath,
  );
} else {
  // 传入实际显示高度，而非放大后的数值
  return getBitmapDescriptorFromAsset(
    filePath,
    selected ? 50.0 : 35.0,
  );
}

额外注意事项 #

• 原始图片分辨率：确保你的PNG原始图片分辨率足够高（建议至少为最大显示尺寸的3倍），否则即使按逻辑缩放，也会因原始像素不足导致模糊。
• 避免多次缩放：尽量减少图片在代码中的多次压缩/放大操作，一次到位的缩放能最大程度保留图片清晰度。

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