Flutter 在 2 个标记之间绘制路线

Question

我通过给出 long 和 lat 在地图上显示 2 个标记，那里 2 个值基本上是开始和结束。我需要知道如何在这两个点之间绘制一条路线。我启用了 API 意味着我已经支付了 API。我只需要在这两个点之间画一条路线

这是我的代码

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

class TripRouteScreen extends StatefulWidget {
  final data;

  const TripRouteScreen({Key key, @required this.data}) : super(key: key);
  @override
  _TripRouteScreenState createState() => _TripRouteScreenState();
}

class _TripRouteScreenState extends State<TripRouteScreen> {
  var start_currentPostion;
  var end_currentPostion;
  BitmapDescriptor pinLocationIcon;
  PolylinePoints polylinePoints = PolylinePoints();
  Map<PolylineId, Polyline> polylines = {};
  List<LatLng> polylineCoordinates = [];

  Map<MarkerId, Marker> setmarkers = {};
  List listMarkerIds = List(); // For store data of your markers

  @override
  void initState() {
    super.initState();
    setCustomMapPin();
    working();
  }

  void setCustomMapPin() async {
    pinLocationIcon = await BitmapDescriptor.fromAssetImage(
        ImageConfiguration(devicePixelRatio: 2.5), 'images/pin.png');
  }

  addPolyLine() {
    PolylineId id = PolylineId("poly");
    Polyline polyline = Polyline(
        polylineId: id, color: Colors.red, points: polylineCoordinates);
    polylines[id] = polyline;
    setState(() {});
  }

  working() async {
    double start_latitude = widget.data['start']['lat'].toDouble();
    double start_longitude = widget.data['start']['lon'].toDouble();

    double end_latitude = widget.data['end']['lat'].toDouble();
    double end_longitude = widget.data['end']['lon'].toDouble();

    start_currentPostion = LatLng(start_latitude, start_longitude);
    end_currentPostion = LatLng(end_latitude, end_longitude);

    await polylinePoints
        .getRouteBetweenCoordinates(
      'AIzaSyBNM_nCEEzp-MyApi',
      PointLatLng(start_latitude, start_longitude), //Starting LATLANG
      PointLatLng(end_latitude, end_longitude), //End LATLANG
      travelMode: TravelMode.driving,
    )
        .then((value) {
      value.points.forEach((PointLatLng point) {
        polylineCoordinates.add(LatLng(point.latitude, point.longitude));
      });
    }).then((value) {
      addPolyLine();
    });

    setState(() {
      MarkerId markerId1 = MarkerId("1");
      MarkerId markerId2 = MarkerId("2");

      listMarkerIds.add(markerId1);
      listMarkerIds.add(markerId2);

      Marker marker1 = Marker(
        markerId: markerId1,
        position: LatLng(start_latitude, start_longitude),
        // ignore: deprecated_member_use
        icon: BitmapDescriptor.fromAsset("images/pin.png"),
      );

      Marker marker2 = Marker(
        markerId: markerId2,
        position: LatLng(end_latitude, end_longitude),
        // ignore: deprecated_member_use
        icon: BitmapDescriptor.fromAsset(
            "images/pin.png"), // you can change the color of marker
      );

      setmarkers[markerId1] =
          marker1; // I Just added here markers on the basis of marker id
      setmarkers[markerId2] = marker2;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          leading: GestureDetector(
              onTap: () {
                Navigator.pop(context);
              },
              child: Icon(Icons.arrow_back)),
          centerTitle: true,
          flexibleSpace: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('images/nav.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          backgroundColor: Colors.transparent,
          title: Text(
            'Route Location',
            style: TextStyle(fontFamily: 'UbuntuBold'),
          ),
          actions: [
            Padding(
              padding: const EdgeInsets.only(right: 15),
              child: Icon(
                Icons.notifications_none,
                size: 33,
              ),
            )
          ]),
      body: GoogleMap(
        mapType: MapType.normal,
        polylines: Set<Polyline>.of(polylines.values),

        initialCameraPosition: CameraPosition(
          target: start_currentPostion,
          zoom: 12,
        ),
        markers: Set.of(setmarkers.values), // YOUR MARKS IN MAP
      ),
    );
  }
}

像这样简单的事情

我在答案中添加了代码，但没有显示行。我使用的 API 与我用于我的地图的 API 相同。geo.API_KEY它是折线的不同键吗？或者我在代码中做错了什么？因为它没有显示任何错误。

另外，当我print(value.points);显示空数组 []'时还要添加一件事

Answer 1

假设你已经启用了必要的 API，绘制 Path 就非常简单了，

为此你需要 2 个插件。（我想你已经有了这些。）

1. google_maps_flutter（链接）
2. flutter_polyline_points (链接)

导入那2个

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

在您的小部件中声明这些。第一个将保存来自 Maps API 的 Poly-points。第二个将保存我们将要制作的折线集。第三个是保留解码后的折线坐标的。

PolylinePoints polylinePoints = PolylinePoints();
Map<PolylineId, Polyline> polylines = {};
List<LatLng> polylineCoordinates = [];

以下函数从多点生成多段线。

 addPolyLine() {
    PolylineId id = PolylineId("poly");
    Polyline polyline = Polyline(
        polylineId: id,
        color: Colors.red,
        points: polylineCoordinates
    );
    polylines[id] = polyline;
    setState((){});
 }

现在让我们从 Maps API 获取多点。您还可以将 TravelMode 设置为驾驶、步行等......这将是您需要调用的函数来在地图上创建折线。根据您的喜好更改“您的 API 密钥”和 LAT LANGS。

 void makeLines() async {
     await polylinePoints
          .getRouteBetweenCoordinates(
             'YOUR API KEY',
              PointLatLng(6.2514, 80.7642), //Starting LATLANG
              PointLatLng(6.9271, 79.8612), //End LATLANG
              travelMode: TravelMode.driving,
    ).then((value) {
        value.points.forEach((PointLatLng point) {
           polylineCoordinates.add(LatLng(point.latitude, point.longitude));
       });
   }).then((value) {
      addPolyLine();
   });
 }

最后在谷歌地图小部件中添加您的折线！

GoogleMap(
    ...
    polylines: Set<Polyline>.of(polylines.values),
    ....),