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

Question

我在flutter中实现了一条折线

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

图标。我在每三个

Marker

点之间显示箭头

LatLng

，但我必须根据缩放级别更改它。您可以使用

Marker

将

BitmapDescriptor

的默认图标自定义为箭头图标。下面是一个虚拟图像。

你可以这样做：

// directionMarkers is a Set of Marker
directionMarkers.add(
      Marker(
        markerId: MarkerId(position.toString()),
        position: position,
        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

方向旋转箭头。我生成了此代码以使用 ChatGPT 旋转箭头。

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);
  }

我希望这对您有帮助。如果有请点赞。如果您对此还有任何疑问，请告诉我。我可以帮助你，因为我做了一个功能来显示车辆的实时位置。所以，我对此进行了很好的探索:)