Flutter Google Maps缩放14级及以上道路显示黑色问题求助

问题现象 #

当Google Maps缩放级别为14及以上时，道路线条显示为黑色；缩放级别低于14时显示正常。

截图说明 #

• 缩放级别<14时的正常显示：
• 缩放级别≥14时的异常显示：

当前使用代码 #

@override
Widget build(BuildContext context) {
  return GoogleMap(
    onMapCreated: (controller) {
      _googleMapController = controller;
      // rootBundle.loadString('assets/map_style.txt').then((value) {
      //   mapStyle = value;
      //   _googleMapController.setMapStyle(mapStyle);
      // }).catchError((e) {
      //   log(e.toString());
      // });
    },
    zoomControlsEnabled: false,
    liteModeEnabled: false,
    minMaxZoomPreference: const MinMaxZoomPreference(1, 20),
    mapToolbarEnabled: false,
    trafficEnabled: false,
    initialCameraPosition: CameraPosition(
      target: widget.userLocation,
      zoom: 13,
    ),
    
    markers: {
      Marker(
        markerId: const MarkerId('userLocation'),
        position: widget.userLocation,
        icon: BitmapDescriptor.defaultMarkerWithHue(
          BitmapDescriptor.hueRed,
        ),
        
      ),
    },
  );
}

已尝试方案 #

设置地图样式、修改组件部分属性，但问题未解决。

解决方案建议 #

1. 清除残留的自定义地图样式 #

即使目前注释了样式加载代码，之前设置的自定义样式可能仍有残留影响，可主动清除：

onMapCreated: (controller) {
  _googleMapController = controller;
  // 清除可能残留的自定义样式
  _googleMapController.setMapStyle(null);
},

2. 升级Google Maps Flutter SDK版本 #

部分旧版本SDK存在特定缩放级别的渲染bug，尝试升级到最新稳定版：
在pubspec.yaml中更新依赖：

dependencies:
  google_maps_flutter: ^latest_version

执行flutter pub get完成更新。

3. 验证地图瓦片加载状态 #

高缩放级别下道路变黑可能是瓦片加载异常导致，可尝试：

• 检查设备网络稳定性，确保高分辨率瓦片能正常下载
• 临时切换地图类型（如从普通地图切换到卫星图再切回），触发瓦片重新加载

4. 自定义地图样式强制覆盖道路颜色 #

如果以上方法无效，可通过自定义样式针对不同缩放级别指定道路颜色：
创建assets/map_style.txt文件，添加以下内容（可根据需求调整颜色值）：

[
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      { "color": "#888888" }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "minZoom": 14,
    "stylers": [
      { "color": "#888888" }
    ]
  }
]

取消代码中样式加载的注释，确保样式生效：

onMapCreated: (controller) {
  _googleMapController = controller;
  rootBundle.loadString('assets/map_style.txt').then((value) {
    _googleMapController.setMapStyle(value);
  }).catchError((e) {
    log(e.toString());
  });
},

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