Flutter地图项目中Polyline路径点不显示问题求助

问题场景 #

我正在实现带路线展示和实时定位的Flutter地图功能，已完成iOS、Android、Web多端的Google Maps API配置，导入了所需依赖。当前地图可正常显示，但Polyline路径点无法加载，持续抛出Error: XMLHttpRequest error。使用polyline_points包获取路线坐标，Web端已安装google_maps_flutter_web，但问题依旧。

相关代码 #

class MapSampleState extends State<MapSample> {
  final Completer<GoogleMapController> _controller =
  Completer<GoogleMapController>();

  @override
  void initState() {
    // getCurrentLocation();
     getPolyPoints();
    super.initState();
  }

  static const LatLng sourceLocation =
  LatLng(37.42796133580664, -122.085749655962);

  static const LatLng destination =
      LatLng(37.43296265331129, -122.08832357078792);

  List<LatLng> polylineCoordinates = [];

  @override
  Widget build(BuildContext context) {
   return   GoogleMap(
      initialCameraPosition: CameraPosition(
        target: sourceLocation,
        zoom: 14.4746,
      ),
      markers: {

        Marker(
            markerId: MarkerId('source'),
            position: sourceLocation
        ),
        Marker(
            markerId: MarkerId('destination'),
            position: destination
        ),
      },
      polylines: {
        Polyline(
          polylineId: const PolylineId('route'),
          points: polylineCoordinates,
          color: signUpPageBackgroundColor,

        )
      },
    );
  }

  void getPolyPoints() async {
    PolylinePoints polylinePoints = PolylinePoints();
    PolylineResult result = await polylinePoints
        .getRouteBetweenCoordinates(
      googleApiKey,
      PointLatLng(sourceLocation.latitude, sourceLocation.longitude),
      PointLatLng(destination.latitude, destination.longitude),
    );

    if(result.points.isNotEmpty){
      result.points
          .forEach((PointLatLng point)
      => polylineCoordinates.add(
          LatLng(point.latitude, point.longitude))
      );
      setState(() {});
    }else{
      print(result.errorMessage);
    }
    print(result.points);
  }
}

解决方案 #

1. 启用Directions API服务 #

polyline_points包依赖Google Maps Directions API获取路线坐标，若仅启用了Maps JavaScript API（用于地图显示），会导致路线请求失败：

• 登录Google Cloud控制台 → 进入目标项目 → 「API和服务」→ 「库」
• 搜索"Directions API" → 点击启用

2. 修正API密钥的Web端限制配置 #

Web端的API密钥需要正确配置允许的HTTP Referrers，否则会被Google拦截请求：

• 进入Google Cloud控制台 → 「API和服务」→ 「凭据」→ 选择你的API密钥
• 「应用限制」选择"HTTP referrers (web sites)"
• 添加允许的来源：本地调试可添加http://localhost:*、http://127.0.0.1:*；生产环境添加对应域名
• 测试阶段可暂时取消应用限制，确认是否是该问题导致

3. 优化异步逻辑与错误捕获 #

调整initState执行顺序，规范状态更新逻辑，并添加异常捕获以排查具体错误：

@override
void initState() {
  super.initState(); // 先执行父类初始化
  getPolyPoints();
}

void getPolyPoints() async {
  try {
    PolylinePoints polylinePoints = PolylinePoints();
    PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
      googleApiKey,
      PointLatLng(sourceLocation.latitude, sourceLocation.longitude),
      PointLatLng(destination.latitude, destination.longitude),
    );

    if (result.points.isNotEmpty) {
      setState(() {
        // 直接通过map转换赋值，更高效
        polylineCoordinates = result.points
            .map((point) => LatLng(point.latitude, point.longitude))
            .toList();
      });
    } else {
      print('路线获取失败: ${result.errorMessage}');
    }
  } catch (e) {
    print('请求异常详情: $e'); // 捕获并打印完整异常信息
  }
}

4. 确认依赖包版本兼容性 #

检查pubspec.yaml中的依赖版本，确保各包版本适配：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.5.0
  google_maps_flutter_web: ^0.5.0+1
  polyline_points: ^2.0.0

执行flutter pub get更新依赖。

5. 本地Web调试的跨域处理 #

若使用Chrome本地调试，可能因浏览器跨域限制导致请求失败：

• Windows：启动Chrome时添加参数：chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"
• Mac：启动Chrome时添加参数：open -a Google\ Chrome --args --disable-web-security --user-data-dir="/tmp/ChromeDevSession"
• 注意：仅用于本地调试，生产环境必须通过API密钥配置解决跨域问题

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