Flutter Google Maps中如何从文件导入自定义Polyline

最佳方案推荐 #

优先选择JSON格式，因为它的结构化特性更适合存储坐标数据，解析逻辑直观，后续扩展（比如给坐标添加额外属性）也更方便。CSV适合数据量极大或从第三方工具直接导出的场景，但需要严格保证格式一致性。

一、使用JSON文件的实现步骤 #

1. 准备JSON坐标文件 #

在项目根目录创建assets文件夹，新建polyline_coords.json文件，内容格式如下：

[
  {"lat": 37.7749, "lng": -122.4194},
  {"lat": 37.7750, "lng": -122.4195},
  {"lat": 37.7751, "lng": -122.4196}
]

2. 配置Pubspec.yaml #

在flutter节点下添加assets路径，确保文件能被Flutter识别：

flutter:
  assets:
    - assets/polyline_coords.json

3. 读取并解析JSON数据 #

导入必要的包，编写异步读取函数：

import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

Future<List<LatLng>> loadPolylineFromJson() async {
  // 读取assets中的JSON文件
  final String jsonString = await rootBundle.loadString('assets/polyline_coords.json');
  // 解码JSON为List
  final List<dynamic> jsonData = jsonDecode(jsonString);
  
  // 转换为LatLng列表，同时过滤无效坐标
  return jsonData.map((coord) {
    try {
      final double lat = coord['lat'] as double;
      final double lng = coord['lng'] as double;
      return LatLng(lat, lng);
    } catch (e) {
      print('跳过无效坐标：$coord，错误信息：$e');
      return null;
    }
  }).whereType<LatLng>().toList();
}

4. 在Google Maps中加载Polyline #

在StatefulWidget中处理异步数据，并渲染Polyline：

class MapScreen extends StatefulWidget {
  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  List<LatLng> _polylinePoints = [];

  @override
  void initState() {
    super.initState();
    _loadPolylineData();
  }

  // 加载坐标数据并更新UI
  void _loadPolylineData() async {
    _polylinePoints = await loadPolylineFromJson();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      initialCameraPosition: CameraPosition(target: LatLng(37.7749, -122.4194), zoom: 14),
      polylines: {
        if (_polylinePoints.isNotEmpty)
          Polyline(
            polylineId: PolylineId('custom_route'),
            points: _polylinePoints,
            color: Colors.blueAccent,
            width: 5,
          ),
      },
    );
  }
}

二、使用CSV文件的实现步骤 #

1. 准备CSV坐标文件 #

在assets文件夹下新建polyline_coords.csv，每行存储一组坐标（格式：纬度,经度）：

37.7749,-122.4194
37.7750,-122.4195
37.7751,-122.4196

2. 配置Pubspec.yaml #

同样在assets中添加CSV文件路径：

flutter:
  assets:
    - assets/polyline_coords.csv

3. 读取并解析CSV数据 #

编写CSV解析函数：

Future<List<LatLng>> loadPolylineFromCsv() async {
  final String csvString = await rootBundle.loadString('assets/polyline_coords.csv');
  // 按行分割数据，过滤空行
  final List<String> lines = csvString.split('\n').where((line) => line.trim().isNotEmpty).toList();
  
  return lines.map((line) {
    try {
      final List<String> coords = line.split(',');
      final double lat = double.parse(coords[0].trim());
      final double lng = double.parse(coords[1].trim());
      return LatLng(lat, lng);
    } catch (e) {
      print('跳过无效行：$line，错误信息：$e');
      return null;
    }
  }).whereType<LatLng>().toList();
}

4. 加载到Google Maps #

和JSON方案类似，调用loadPolylineFromCsv()函数替换即可，UI渲染逻辑完全一致。

关键注意事项 #

• 确保assets文件夹路径正确，Pubspec.yaml中的缩进严格使用空格（不要用Tab），否则会导致文件无法加载。
• 异步操作必须用async/await处理，避免UI阻塞；如果需要在Widget树中直接处理异步数据，也可以用FutureBuilder替代initState中的逻辑。
• 添加错误处理，避免因数据格式错误导致应用崩溃，同时打印日志便于调试。

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