添加折线 "sub destinations" google 地图颤振，优化单个 API 调用

Question

我要创建的应用程序需要创建一条路线，该路线的目的地位于起点和终点之间，起点和终点之间，在 getRouteBetweenCoordinates 中提供，我需要一种方法来添加必须穿过的自定义 Latlong 对，而不是找到最快的路线，我需要它在我提供的所有点之间路由，同时仍然沿着道路（不仅仅是直线）。

我能想出的唯一方法是为构成总路线的每个路段调用 setPolyLines 函数。虽然此方法可以获得所需的结果，但它需要进行多次 API 调用，理想情况下，整个自定义路线将在第一个方向 API 调用时加载。

这是我正在使用的代码，对于我错过的这个问题，是否有更简单的解决方案？这可能非常明显，但我是 google 地图集成的新手，如果是这样的话，我很抱歉。

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';
//new polyline between each destination

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

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

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

  //poly line variables
  Set<Polyline> _polyLine = Set<Polyline>();

  List<LatLng> polylineCordinates = [];
  late PolylinePoints polylinePoints;

  //starting location
  static const _start =
      CameraPosition(target: LatLng(48.696985, -122.905595), zoom: 17.0);

  //METHODS
  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    //TODO: provide with start and end point for specific line, end of last ==
    //start of next
    setPolyLines(PointLatLng(48.696985, -122.905595),
        PointLatLng(48.657421, -122.917412));
    setPolyLines(PointLatLng(48.657421, -122.917412),
        PointLatLng(48.644983, -122.944760));
  }

  void setPolyLines(PointLatLng start, PointLatLng end) async {
    //polyline result DT is a collection of latlng following roads
    PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
        "MY API KEY IS HERE",
        //route start
        start,
        //route end
        end);
    //list of latlng pairs in order of exectecution
    //this is preparing the drawing of the line, the set state plots it out
    if (result.status == 'OK') {
      result.points.forEach((PointLatLng point) {
        polylineCordinates.add(LatLng(point.latitude, point.longitude));
      });
    }

    setState(() {
      _polyLine.add(Polyline(
          width: 10,
          //set id to
          polylineId: PolylineId("route"),
          color: Color(0xFF00BFA6),
          points: polylineCordinates));
    });
  }

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

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

  //upon call, modal sheet toggles from the bottom of screen
  modalSheet() {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return Column(
            children: [
              Container(
                height: 200,
                color: Colors.amber,
              ),
              Container(
                height: 100,
                color: Colors.blue,
              )
            ],
          );
        });
  }

  //adjusts camera position to the _start location
  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)),
    );
  }
}

Answer 1

您可以使用 getRouteBetweenCoordinates 方法的 wayPoints 参数，它接受 PolylineWayPoint (List<PolylineWayPoint>) 的列表。

PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
        googleAPiKey,
        PointLatLng(48.696985, -122.905595),
        PointLatLng(48.644983, -122.944760),
        wayPoints: [PolylineWayPoint(location: "48.657421,-122.917412")]);

使用您的示例代码查看下图的结果。

添加折线 "sub destinations" google 地图颤振，优化单个 API 调用

adding polyline "sub destinations" google maps flutter, optimize for a single API call

google-maps

flutter

google-maps-flutter