Flutter中如何将Google Polyline字符串转换为Set<Polyline>？

实现步骤 #

• 用google_polyline_algorithm解码编码字符串，得到经纬度数值列表
• 将数值列表转换为Google Maps组件可识别的LatLng列表
• 基于LatLng列表创建Polyline对象，最终封装为Set<Polyline>

完整代码示例 #

首先在pubspec.yaml中添加依赖：

dependencies:
  google_maps_flutter: ^最新版本号
  google_polyline_algorithm: ^最新版本号

然后编写转换逻辑及组件调用代码：

import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_polyline_algorithm/google_polyline_algorithm.dart';

// 解码并转换为Set<Polyline>的工具方法
Set<Polyline> convertEncodedPolyline(String encodedStr) {
  // 解码得到[纬度, 经度]的数值列表
  final decodedCoords = decodePolyline(encodedStr);
  
  // 转换为LatLng列表
  final latLngPoints = decodedCoords.map((coord) {
    return LatLng(coord[0].toDouble(), coord[1].toDouble());
  }).toList();
  
  // 创建Polyline并返回Set
  return {
    Polyline(
      polylineId: const PolylineId('target_route'), // 唯一标识，可按需修改
      points: latLngPoints,
      width: 6,
      color: const Color(0xFF0066CC),
    )
  };
}

// 在GoogleMap组件中使用
GoogleMap(
    mapType: MapType.normal,
    initialCameraPosition: initialPosition,
    polylines: convertEncodedPolyline("_p~iF~ps|U_ulLnnqC_mqNvxq`@"),
),

关键说明 #

• decodePolyline返回的List<List<num>>需要转成LatLng类型，这是Google Maps折线组件的必填格式
• 每个Polyline必须有唯一的PolylineId，多条折线时要设置不同ID避免冲突
• 可根据需求调整折线的宽度、颜色、透明度等样式参数

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