Flutter中如何绘制Google Maps多地点间的导航路线？

核心思路 #

Google Maps Directions API仅支持两点间路线查询，所以要把多城市连续路线拆成两两相邻城市的路段，分别获取每段路线的Polyline数据后合并，最终在地图上绘制完整路线。

具体实现步骤 #

• 拆分城市路径段
  把服务器返回的城市经纬度列表按顺序拆成多组相邻城市对，比如[A,B,C,D,E]拆成(A,B)、(B,C)、(C,D)、(D,E)。循环处理每一组，调用Directions API获取对应路段的路线点数据。
  示例代码：

  List<LatLng> cityCoords = [/* 服务器返回的城市经纬度集合 */];
  List<List<LatLng>> routeSegments = [];
  
  for (int i = 0; i < cityCoords.length - 1; i++) {
    final start = cityCoords[i];
    final end = cityCoords[i+1];
    // 调用封装的Directions API请求方法
    final segmentPoints = await fetchRoutePoints(start, end);
    routeSegments.add(segmentPoints);
  }
  

• 合并Polyline数据
  将各路段的路线点拼接成完整列表，注意移除相邻路段重复的端点（比如B点在第一段结尾和第二段开头是同一个，仅保留一次）。
  示例代码：

  List<LatLng> fullRoutePoints = [];
  for (final segment in routeSegments) {
    if (fullRoutePoints.isNotEmpty) {
      // 移除重复的起始端点
      segment.removeAt(0);
    }
    fullRoutePoints.addAll(segment);
  }
  

• 绘制连续路线
  将合并后的完整路线点转换成Polyline，添加到Google Map组件中。如果需要区分不同路段，也可以给每个路段单独创建Polyline并设置不同颜色。
  示例代码：

  final fullRoutePolyline = Polyline(
    polylineId: const PolylineId("continuous_route"),
    points: fullRoutePoints,
    color: Colors.blueAccent,
    width: 6,
  );
  
  // 在GoogleMap组件中加载该Polyline
  GoogleMap(
    polylines: {fullRoutePolyline},
    initialCameraPosition: CameraPosition(target: cityCoords[0], zoom: 10),
    // 其他地图配置项...
  )
  

注意事项 #

• API调用限制：多次调用Directions API可能触发请求频率限制，建议添加请求延迟或使用批量请求策略，必要时提升API密钥的配额。
• 错误处理：需处理单个路段API请求失败的情况，比如跳过失败路段或提示用户重新获取路线。
• 性能优化：城市数量过多时，合并后的路线点会非常多，可对路线点进行抽稀处理，减少地图绘制压力。

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