使用BitmapDescriptor时Android与iOS地图标记颜色不一致如何解决

问题现象 #

使用BitmapDescriptor根据点位状态设置地图标记颜色时，Android端颜色显示符合预期，iOS端存在明显色差：预期展示的黄色标记在iOS端显示为深绿色。
两端效果参考：

• Android端显示效果
• iOS端显示效果

原有问题代码 #

_status_icon(status) {
  if (status == "Free") {
    return BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue);
  } else if (status == "Low") {
    return BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueGreen);
  } else if (status == "Moderate") {
    return BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueYellow);
  } else if (status == "Abundant") {
    return BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueOrange);
  } else {
    return BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed);
  }
}

问题原因 #

这是地图Flutter插件的已知平台实现差异：插件封装的hueYellow、hueGreen等内置色相常量，在iOS端的原生映射逻辑和Android端不对齐，iOS端没有按照标准HSV色相环规则做值映射，直接调用内置常量就会出现跨端色差。

修复方案 #

方案1：替换内置常量为校准后的标准色相值（改动最小） #

直接弃用插件提供的内置色相常量，传入和Android端对齐的标准HSV色相值即可。经实测，以下色相值可以实现两端颜色基本一致：

修改后的代码：

_status_icon(status) {
  if (status == "Free") {
    return BitmapDescriptor.defaultMarkerWithHue(240);
  } else if (status == "Low") {
    return BitmapDescriptor.defaultMarkerWithHue(120);
  } else if (status == "Moderate") {
    return BitmapDescriptor.defaultMarkerWithHue(60);
  } else if (status == "Abundant") {
    return BitmapDescriptor.defaultMarkerWithHue(30);
  } else {
    return BitmapDescriptor.defaultMarkerWithHue(0);
  }
}

如果对颜色精度要求高，可以通过dart:io的Platform.isIOS判断平台，针对iOS端单独微调色相值到视觉对齐即可。

方案2：使用自定义标记资源（零色差） #

如果需要完全消除平台渲染差异，可以放弃使用系统默认标记改色的方案，提前制作好5种状态对应颜色的标记切图，存入项目资源目录后通过BitmapDescriptor.fromAssetImage加载对应图标。这种方案完全不依赖平台原生的默认标记渲染逻辑，两端显示效果完全一致。

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