Flutter Google Maps Polyline无法显示问题排查求助

当前功能与现象 #

• 用户点击地图可设置取车点、目的地标记，标记能正常显示且坐标已正确存储
• 调用Google Maps API获取路线数据后，Polyline始终无法在地图上渲染
• 预期效果：两点间显示清晰可见的Polyline路线

已排查项 #

• 确认取车点、目的地的经纬度坐标格式无误
• 验证Google Maps Directions API返回的路线数据正常（包含overview_polyline字段）
• 检查Polyline的颜色、宽度配置（已设置高对比度颜色，宽度≥3）
• 查阅GitHub相关Issue及工具分析，未定位到有效解决方向

相关代码片段 #

地图核心组件代码 #

GoogleMap(
  initialCameraPosition: CameraPosition(target: LatLng(37.7749, -122.4194), zoom: 12),
  markers: _markers,
  polylines: _polylines,
  onTap: (LatLng position) {
    _setPickupOrDestinationMarker(position);
  },
)

Polyline生成逻辑代码 #

void _buildRoutePolyline(String encodedPolyline) {
  final List<LatLng> routePoints = PolylinePoints()
      .decodePolyline(encodedPolyline);
  
  setState(() {
    _polylines.add(Polyline(
      polylineId: const PolylineId('route'),
      points: routePoints,
      color: Colors.red,
      width: 5,
    ));
  });
}

1. 确认Polyline集合的状态更新逻辑

   • 检查_polylines是否为Set<Polyline>类型（Google Maps组件要求该参数为Set）
   • 调用setState时需生成新的Set实例，避免直接修改原有Set后赋值，示例：

     setState(() {
       _polylines = Set<Polyline>.from(_polylines)..add(newRoutePolyline);
     });
     

2. 验证PolylineId的唯一性

   • 确保每次添加Polyline时使用唯一的PolylineId，重复ID会导致路线被覆盖或无法渲染

3. 检查API权限与配置

   • 确认Google Cloud控制台已启用Maps JavaScript API和Directions API
   • 验证API密钥已绑定正确的应用包名（Android）或Bundle ID（iOS）
   • 确认账户有可用计费额度，避免因配额耗尽导致API无有效响应

4. 校验Polyline数据解码结果

   • 打印routePoints列表，确认解码后的经纬度坐标与取车点、目的地匹配
   • 若使用polyline_points库，检查库版本与当前Flutter版本的兼容性

5. 排查渲染层级问题

   • 确保Polyline颜色与地图背景有足够对比度（如避免白色在浅色地图主题上）
   • 检查是否有其他Widget覆盖在GoogleMap组件之上，导致路线被遮挡

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