Flutter地图路线绘制插件map_polyline_draw的使用

当然，以下是如何在Flutter应用中使用map_polyline_draw插件来绘制地图路线的示例代码。map_polyline_draw插件允许用户在地图上绘制和显示路线。

首先，确保你的Flutter项目中已经添加了map_polyline_draw依赖。在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  map_polyline_draw: ^latest_version  # 请替换为最新的版本号
  google_maps_flutter: ^2.0.6  # 确保也添加了Google Maps Flutter插件

然后运行flutter pub get来安装依赖。

接下来，在你的Flutter应用中，你可以按照以下步骤来绘制地图路线。

1. 导入必要的包：

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

1. 定义你的Flutter应用：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapScreen(),
    );
  }
}

1. 创建地图屏幕：

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

class _MapScreenState extends State<MapScreen> {
  GoogleMapController? _controller;
  Set<Polyline> _polylines = {};
  LatLng? _startPoint;
  LatLng? _endPoint;
  final Set<Marker> _markers = {};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map Polyline Draw Example'),
      ),
      body: Stack(
        children: <Widget>[
          GoogleMap(
            mapType: MapType.normal,
            initialCameraPosition: CameraPosition(
              target: LatLng(37.4219999, -122.0840575),
              zoom: 13.0,
            ),
            markers: _markers.toSet(),
            polylines: _polylines,
            onMapCreated: (GoogleMapController controller) {
              _controller = controller;
            },
            onLongPress: (LatLng point) {
              if (_startPoint == null) {
                setState(() {
                  _startPoint = point;
                  _markers.add(Marker(
                    markerId: MarkerId('start'),
                    position: point,
                    icon: BitmapDescriptor.defaultMarker,
                  ));
                });
              } else if (_endPoint == null) {
                setState(() {
                  _endPoint = point;
                  _markers.add(Marker(
                    markerId: MarkerId('end'),
                    position: point,
                    icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueAzure),
                  ));

                  // 使用PolylinePoints计算路线点
                  final polylinePoints = PolylinePoints()
                      .generatePoints(
                    coordinates: [
                      LatLng(
                        _startPoint!.latitude!,
                        _startPoint!.longitude!,
                      ),
                      LatLng(
                        _endPoint!.latitude!,
                        _endPoint!.longitude!,
                      ),
                    ],
                    width: 375,
                    height: 667,
                    points: 100,
                  );

                  Polyline polyline = Polyline(
                    polylineId: PolylineId('polyline'),
                    color: Colors.blue.withOpacity(0.8),
                    width: 4,
                    points: polylinePoints,
                  );

                  setState(() {
                    _polylines.add(polyline);
                  });

                  // 清空起点和终点，以便下次绘制
                  _startPoint = null;
                  _endPoint = null;
                  _markers.clear();
                });
              }
            },
          ),
        ],
      ),
    );
  }
}

在这个示例中，我们使用了google_maps_flutter插件来显示Google地图，并添加了map_polyline_draw的逻辑来绘制路线。我们定义了两个标记（起点和终点），当用户长按地图时，会在地图上添加标记，并计算起点和终点之间的路线。PolylinePoints用于生成路线上的点，这些点随后被用来创建Polyline对象，并将其添加到地图上。

请注意，PolylinePoints并不是map_polyline_draw包的一部分，而是flutter_polyline_points包（或类似库）提供的功能。你可能需要额外添加这个依赖来计算路线上的点。

确保在实际项目中处理错误和异常情况，并根据需要调整UI和逻辑。