有没有一种方法可以定义折线在谷歌地图中的连接顺序

问题描述 投票:0回答:0

绘制多段线时多段线是这样绘制的

但问题是额外的多段线也被绘制我想画的是这样的

即使我已经定义了路点,我也无法获得所需的输出需要一些帮助。

这是添加标记的代码

 void addMarkers({
    required List<LatLng> passedGeoCoordinate,
    required LatLng source,
  }) {
    markers.clear();
    try {
      // isLoadingMap(true);
      markers.add(Marker(
          markerId: MarkerId(source.toString()),
          position: source,
          icon:
              BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue)));
      for (var element in listLocations) {
        markers.add(Marker(
            markerId: MarkerId(element.toString()),
            position: element,
            onTap: () {}));
        getMultiplePolyLines();
      }
      isLoadingMap(false);
   
    } finally {
      isLoadingMap(false);
    }
  }

这是添加折线的代码

 LatLng? source;
  List<LatLng> listLocations = <LatLng>[];
  List<PolylineWayPoint> waypoints = <PolylineWayPoint>[];
 addDataToSource({required List<Geocoordinate> passedGeoCoordinate}) async {
    try {
      isLoadingMap(true);
      for (Geocoordinate value in passedGeoCoordinate) {
        source = LatLng(double.parse(passedGeoCoordinate.first.latitude ?? ""),
            double.parse(passedGeoCoordinate.first.longitude ?? ""));

        listLocations.add(LatLng(double.parse(value.latitude ?? ""),
            double.parse(value.longitude ?? "")));
        // String values = "${value.latitude}, ${value.longitude}";
        waypoints.add(PolylineWayPoint(
            location: "${value.latitude},${value.longitude}", stopOver: true));
        // update();
      }
      logger.i("This is waypoints length", "${waypoints.length} $waypoints");
      if (source != null && listLocations.isNotEmpty && waypoints.isNotEmpty) {
        addMarkers(
          passedGeoCoordinate: listLocations,
          source: source!,
        );
        update();
      }
    } catch (e) {
      isLoadingMap(false);
    }
  }

  getMultiplePolyLines() async {
    await Future.forEach(listLocations, (LatLng elem) async {
      await _getRoutePolyline(
        start: source!,
        finish: elem,
        color: Colors.blue,
        id: 'firstPolyline $elem',
        //id: DateTime.now().toIso8601String(),
        width: 4,
      );
    });

    update();
  }

  Future<Polyline> _getRoutePolyline({
    required LatLng start,
    required LatLng finish,
    required Color color,
    required String id,
    required int width,
  }) async {
    // Generates every polyline between start and finish
    final polylinePoints = PolylinePoints();
    // Holds each polyline coordinate as Lat and Lng pairs
    final List<LatLng> polylineCoordinates = [];

    final startPoint = PointLatLng(start.latitude, start.longitude);
    final finishPoint = PointLatLng(finish.latitude, finish.longitude);

    final result = await polylinePoints.getRouteBetweenCoordinates(
        Keys.googleApiKey, startPoint, finishPoint,
        travelMode: TravelMode.driving, wayPoints: waypoints);

    if (result.points.isNotEmpty) {
      // loop through all PointLatLng points and convert them
      // to a list of LatLng, required by the Polyline
      for (var point in result.points) {
        polylineCoordinates.add(
          LatLng(point.latitude, point.longitude),
        );
      }
    }

    final Polyline polyline = Polyline(
        polylineId: PolylineId(id),
        consumeTapEvents: true,
        points: polylineCoordinates,
        color: color,
        width: width,
        jointType: JointType.round,
        onTap: () {});
    polylin.add(polyline);
    polyLines[PolylineId(id)] = polyline;
    update();

    return polyline;
  }

这是我打印航点时的结果

[27.671690422260465,84.403260053203670, 27.677023212852635,84.406927312726400, 27.676814185326755,84.409158910582240, 27.677004210366814,84.410972083840110, 27.676415131666700,84.411068643362710]

定义航路点的方式一切都很好问题是多段线没有按照标记的顺序连接并且正在绘制额外的多段线需要一些指导。

flutter google-maps google-maps-markers polyline
© www.soinside.com 2019 - 2024. All rights reserved.