Flutter GoogleMaps - 自定义标记的动态着色

Posted 2023-02-23

【中文标题】Flutter GoogleMaps - 自定义标记的动态着色

【英文标题】：Flutter GoogleMaps - dynamic colouring of Custom Markers

【发布时间】：2020-07-09 09:13:58

【问题描述】：

Flutter Google Maps 允许在地图上使用标准/默认标记。您还可以通过编程方式将颜色应用于此标记，从而为您的应用添加各种颜色。

但是，我似乎无法使用相同的技术将颜色动态应用于自定义（白色）标记。与其制作 10 个具有不同颜色的自定义标记，我更喜欢使用纯白色的标记，并使用 Hue 或颜色混合对其进行动态着色。

默认标记

    bool bToggle = true; 

    _markers.add(Marker(
        markerId: MarkerId(markerid),
        position: newPos,
        onTap: () 
          ...
        ,
        infoWindow: InfoWindow(
          ...
        ),
        icon: BitmapDescriptor.defaultMarkerWithHue(
           (bToggle) ? BitmapDescriptor.hueYellow : BitmapDescriptor.hueRed
        ),        
      ));

自定义标记

    _markers.add(Marker(
        markerId: MarkerId(markerid),
        position: newPos,
        onTap: () 
          ...
        ,
        infoWindow: InfoWindow(
          ...
        ),
        icon: BitmapDescriptor.fromAssetImage(ImageConfiguration(devicePixelRatio: 2.5), 'assets/markers/pin-blue.png')
        ),        
      ));

非常感谢

【参考方案1】：

标记不将其颜色更改为 BitmapDescriptor 色调的原因是需要重建屏幕以检测 bToggle 上的值变化。你可以在这里做的是在价值变化时致电setState()。