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
相关产品推荐
相关产品推荐

