是否可以在颤振中的折线上添加箭头？

Question

我已经在颤振中实现了折线

Map<PolylineId, Polyline> _mapPolylines = {};
  int _polylineIdCounter = 1;

  void _add() {
    final String polylineIdVal = 'polyline_id_$_polylineIdCounter';
    _polylineIdCounter++;
    final PolylineId polylineId = PolylineId(polylineIdVal);

    final Polyline polyline = Polyline(
      polylineId: polylineId,
      consumeTapEvents: true,
      color: Colors.red,
      width: 5,
      jointType: JointType.round,
      points: points, //_createPoints(),
    );

    setState(() {
      _mapPolylines[polylineId] = polyline;
    });
  }

并将其显示在地图上

    return new GoogleMap(
        mapType: MapType.normal,
        markers: Set.from(Markers),
        initialCameraPosition: _kGooglePlex,
        polylines: Set<Polyline>.of(_mapPolylines.values),
        onMapCreated: (GoogleMapController controller) async {
          _controller.complete(controller);
        });

我正在使用 google_maps_flutter 包，我试图指示我的路线方向。

Answer 1

我找到了解决此问题的方法。可以在Polyline使用时显示方向箭头Marker。您可以根据您的要求以特定的时间间隔显示Marker图标。我在每三个点之间Polyline显示箭头，但我必须根据缩放级别更改它。您可以使用 自定义默认图标 为箭头图标。下面是一个虚拟图像。MarkerLatLngMarkerBitmapDescriptor

你可以这样做：

// directionMarkers is a Set of Marker
directionMarkers.add(
      Marker(
        markerId: MarkerId(currentPosition.toString()),
        position: currentPosition,
        icon: movementArrow,  // Custom arrow Marker
        // Rotate the arrow in direction of movement. Func is defined below
        rotation: calculateBearing(previousPosition, currentPosition) - 90, 
        anchor: const Offset(0.5, 0.5),
      ),
    );

您还可以使用一些数学方法沿方向旋转箭头Polyline。我生成了这段代码，使用 AI 工具旋转箭头。这里，startPoint是用户当前位置，endPoint是用户将移动的位置，我们必须显示从start到end点的方向箭头。

double calculateBearing(LatLng startPoint, LatLng endPoint) {
    final double startLat = toRadians(startPoint.latitude);
    final double startLng = toRadians(startPoint.longitude);
    final double endLat = toRadians(endPoint.latitude);
    final double endLng = toRadians(endPoint.longitude);

    final double deltaLng = endLng - startLng;

    final double y = Math.sin(deltaLng) * Math.cos(endLat);
    final double x = Math.cos(startLat) * Math.sin(endLat) -
        Math.sin(startLat) * Math.cos(endLat) * Math.cos(deltaLng);

    final double bearing = Math.atan2(y, x);

    return (toDegrees(bearing) + 360) % 360;
  }

  double toRadians(double degrees) {
    return degrees * (Math.pi / 180.0);
  }

  double toDegrees(double radians) {
    return radians * (180.0 / Math.pi);
  }

我可以帮助您解决这个问题，因为我做了一个功能来显示车辆的实时位置。所以，我对此进行了很好的探索:)