如何在颤动中的谷歌地图折线上添加方向箭头

Question

示例图片

我有一个 flutter 应用程序，可以在谷歌地图上绘制折线，指示用户的路径。我想使用类似于谷歌地图图像中显示的方向箭头的方向箭头来显示折线的方向。我无法弄清楚。

我想在特定的缩放级别上显示这些箭头，并且还希望它们随着缩放级别的变化而增加或减少，这与谷歌地图中的情况完全一样。

Answer 1

在 pubspec.yaml 文件中添加包：

 dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.1.1
  flutter_polyline_points: ^1.0.0

获取折线点：使用 flutter_polyline_points 包从 Google Directions API 获取折线点。

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

Future<List<LatLng>> getPolylinePoints() async {
  PolylinePoints polylinePoints = PolylinePoints();
  PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
    'YOUR_GOOGLE_API_KEY',
    PointLatLng(startLat, startLng),
    PointLatLng(endLat, endLng),
  );

  if (result.points.isNotEmpty) {
    return result.points.map((point) => LatLng(point.latitude, point.longitude)).toList();
  }
  return [];
}

用箭头绘制折线：

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

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController _controller;
  Set<Polyline> _polylines = {};
  Set<Marker> _markers = {};

  @override
  void initState() {
    super.initState();
    _setPolylines();
  }

  void _setPolylines() async {
    List<LatLng> polylinePoints = await getPolylinePoints();
    List<LatLng> arrowPoints = _getArrowPoints(polylinePoints);

    setState(() {
      _polylines.add(Polyline(
        polylineId: PolylineId('route'),
        points: polylinePoints,
        color: Colors.blue,
        width: 5,
      ));

      for (LatLng point in arrowPoints) {
        _markers.add(Marker(
          markerId: MarkerId(point.toString()),
          position: point,
          icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
        ));
      }
    });
  }

  List<LatLng> _getArrowPoints(List<LatLng> polylinePoints) {
    // Logic to calculate arrow points based on polyline points
    // Add arrows at intervals or based on zoom level
    List<LatLng> arrowPoints = [];
    for (int i = 0; i < polylinePoints.length; i += 10) {
      arrowPoints.add(polylinePoints[i]);
    }
    return arrowPoints;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Polyline with Arrows')),
      body: GoogleMap(
        onMapCreated: (controller) => _controller = controller,
        initialCameraPosition: CameraPosition(
          target: LatLng(startLat, startLng),
          zoom: 14.0,
        ),
        polylines: _polylines,
        markers: _markers,
      ),
    );
  }
}

根据缩放级别调整箭头大小：

void _onCameraMove(CameraPosition position) {
  double zoom = position.zoom;
  // Adjust arrow size based on zoom level
  // Update markers with new size if necessary
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Polyline with Arrows')),
    body: GoogleMap(
      onMapCreated: (controller) => _controller = controller,
      onCameraMove: _onCameraMove,
      initialCameraPosition: CameraPosition(
        target: LatLng(startLat, startLng),
        zoom: 14.0,
      ),
      polylines: _polylines,
      markers: _markers,
    ),
  );
}

它可能对你有帮助，