You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter Google Maps中TileOverlay透明度参数不生效的问题排查求助

Flutter Google Maps中TileOverlay透明度参数不生效的问题排查求助

大家好,我最近在做Flutter项目时,想给Google Maps里的TileOverlay设置半透明效果,但遇到了个棘手的问题:明明在TileOverlay里设置了transparency: 0.5,但实际显示出来的TileOverlay还是完全不透明的,就像直接覆盖在底图上一样,想请各位帮忙看看哪里出问题了🥺

我的需求与问题现状

  • 目标:给Google Maps Flutter中的TileOverlay应用透明度,实现半透明效果
  • 实际结果:TileOverlay完全不透明,没有任何半透明的表现
  • 开发环境:
    • Flutter Framework 版本:1db45f7408(11天前更新,2025-05-29)
    • Flutter Engine 版本:308a517184(2周前更新,2025-05-23)
    • Dart 版本:3.9.0 (build 3.9.0-100.2.beta)
    • DevTools 版本:2.46.0
    • 依赖包:
      • google_maps_flutter: ^2.12.2
      • http: ^1.4.0

我已经尝试过的方法

  • 在TileOverlay里调整transparency参数(从0.0到1.0的所有数值都试过)
  • 执行了flutter upgrade把Flutter升级到了最新版本

我的代码实现

下面是我当前的完整代码,麻烦各位帮忙看看哪里可能出错了:

class _BlackMarbleState extends State<BlackMarble> {
  GoogleMapController? mapController;
  final LatLng _center = const LatLng(21.0, 78.0);

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(target: _center, zoom: 8.0),
        minMaxZoomPreference: MinMaxZoomPreference(1.0, 8.0),
        tileOverlays: {
          TileOverlay(
            tileOverlayId: TileOverlayId('VIIRS_Black_Marble'),
            tileProvider: BlackMarbleTileProvider(),
            zIndex: 1,
            transparency: 0.5,
          ),
        },
      ),
    );
  }
}

class BlackMarbleTileProvider extends TileProvider {
  BlackMarbleTileProvider();

  @override
  Future<Tile> getTile(int x, int y, int? zoom) async {
    Uint8List? tileBytes;
    try {
      final url = '//gibs.earthdata.nasa.gov/wmts/epsg3857/best/VIIRS_Black_Marble/default/default/GoogleMapsCompatible_Level8/$zoom/$y/$x.png';
      final response = await http.get(Uri.parse('https:$url'));
      if (response.statusCode == 200) {
        tileBytes = response.bodyBytes;
      }
    } catch (e) {
      log('Error fetching tile: $e');
    }
    return Tile(256, 256, tileBytes);
  }
}

我实在搞不懂为什么transparency参数完全不起作用,是我哪里用错了吗?有没有什么我没考虑到的细节?麻烦各位大佬帮我分析一下,谢谢!

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.08 08:09:35