You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter谷歌地图添加多途经点折线并优化为单次API调用咨询

解决方案

你当前的分段请求方案可以实现需求,但谷歌Directions API本身就支持一次性传入途经点获取完整合规路线,你使用的flutter_polyline_points库的getRouteBetweenCoordinates方法也提供了对应参数,无需拆分多次请求。

具体修改步骤

  • 整理全路径点列表,顺序按照「起点→途经点1→途经点2→……→终点」排列,统一转换为PointLatLng类型
  • 调用getRouteBetweenCoordinates时传入wayPoints参数,同时设置optimizeWaypoints: false,该参数设为false才能保证路线严格按照你指定的点顺序通行,不会被API自动调整顺序走最短路径
  • 直接解析返回的整条路线坐标点即可,无需手动拼接多段折线

修改后的核心代码示例

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart';

class Tour extends StatefulWidget {
  const Tour({Key? key}) : super(key: key);

  @override
  _TourState createState() => _TourState();
}

class _TourState extends State<Tour> {
  late GoogleMapController mapController;

  Set<Polyline> _polyLine = Set<Polyline>();
  List<LatLng> polylineCordinates = [];
  late PolylinePoints polylinePoints;

  static const _start =
      CameraPosition(target: LatLng(48.696985, -122.905595), zoom: 17.0);
  
  // 完整路径点列表:起点→途经点→终点
  final List<PointLatLng> fullRoutePoints = [
    PointLatLng(48.696985, -122.905595),
    PointLatLng(48.657421, -122.917412),
    PointLatLng(48.644983, -122.944760),
  ];

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    // 单次请求获取完整路线
    setFullPolyline(fullRoutePoints);
  }

  void setFullPolyline(List<PointLatLng> routePoints) async {
    if (routePoints.length < 2) return;
    final start = routePoints.first;
    final end = routePoints.last;
    // 提取中间的途经点
    final wayPoints = routePoints.sublist(1, routePoints.length - 1);

    PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
      "你的API密钥",
      start,
      end,
      // 传入途经点参数
      wayPoints: wayPoints,
      // 关闭路径优化,严格按照指定顺序通行
      optimizeWaypoints: false,
    );

    polylineCordinates.clear();
    if (result.status == 'OK') {
      for (var point in result.points) {
        polylineCordinates.add(LatLng(point.latitude, point.longitude));
      }
    }

    setState(() {
      _polyLine.add(Polyline(
          width: 10,
          polylineId: PolylineId("full_route"),
          color: Color(0xFF00BFA6),
          points: polylineCordinates));
    });
  }

  @override
  void initState() {
    polylinePoints = PolylinePoints();
    super.initState();
  }

  @override
  void dispose() {
    mapController.dispose();
    super.dispose();
  }

  modalSheet() {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return Column(
            children: [
              Container(
                height: 200,
                color: Colors.amber,
              ),
              Container(
                height: 100,
                color: Colors.blue,
              )
            ],
          );
        });
  }

  center() {
    mapController.animateCamera(CameraUpdate.newCameraPosition(_start));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
          polylines: _polyLine,
          myLocationButtonEnabled: false,
          zoomControlsEnabled: false,
          onMapCreated: _onMapCreated,
          initialCameraPosition: _start),
      floatingActionButton: FloatingActionButton(
          onPressed: () => center(), child: Icon(Icons.add)),
    );
  }
}

注意事项

  • 免费版谷歌Directions API最多支持传入10个途经点(包含起点终点合计12个点),如果需要更多点位需要升级为付费版
  • 如果你需要API自动规划途经点的最优通行顺序,可以将optimizeWaypoints设为true
  • 调用前请确认谷歌云控制台已开启Directions API访问权限,且使用的API密钥有对应调用权限

内容的提问来源于stack exchange,提问作者Marko

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.07 03:54:03