Flutter地图路线规划插件google_maps_routes的使用

google_maps_routes 是一个用于在 Google 地图上创建路线的 Flutter 插件。它通过 Google Directions API 来绘制路线，并依赖 flutter_polyline_points 包来实现。

截图

使用方法

1. 添加依赖

首先，确保在 pubspec.yaml 文件中添加对 google_maps_routes 的依赖：

dependencies:
  flutter:
    sdk: flutter
  google_maps_routes: ^latest_version

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

2. 导入包

在需要使用的地方导入包：

import 'package:google_maps_routes/google_maps_routes.dart';

3. 创建点列表

你需要一个包含多个 LatLng 点的列表，这些点将用于定义路线：

/// LatLng 是 google_maps_flutter 包中的类
List<LatLng> points = [
    LatLng(45.82917150748776, 14.63705454546316),
    LatLng(45.833828635680355, 14.636544256202207),
    LatLng(45.851254420031296, 14.624331708344428),
    LatLng(45.84794984187217, 14.605434384742317)
];

4. 初始化插件

实例化 MapsRoutes 对象：

MapsRoutes route = MapsRoutes();

5. 绘制路线

调用 drawRoute 方法来绘制路线：

await route.drawRoute(
    points,
    'Test routes',
    Color.fromRGBO(130, 78, 210, 1.0),
    'YOUR_GOOGLE_API_KEY',
    travelMode: TravelModes.walking
);

• routeName: 路线名称。
• color: 路线的颜色。
• googleApiKey: Google Directions API 的密钥。
• travelMode: 可选参数，指定出行方式（如：driving、bicycling、transit、walking）。

6. 显示路线

在 GoogleMap 小部件中添加 polylines 参数以显示路线：

GoogleMap(
    polylines: route.routes,
    initialCameraPosition: CameraPosition(
        target: LatLng(45.82917150748776, 14.63705454546316),
        zoom: 15.0,
    ),
    onMapCreated: (GoogleMapController controller) {
        _controller.complete(controller);
    },
)

7. 清除路线

如果你想清除路线，可以调用以下方法：

route.routes.clear();

8. 计算距离

你可以使用 DistanceCalculator 类来计算路线的距离：

DistanceCalculator distanceCalculator = DistanceCalculator();
String totalDistance = distanceCalculator.calculateRouteDistance(points, decimals: 1);

示例代码

下面是一个完整的示例应用，演示如何使用 google_maps_routes 包：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Maps Routes Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapsRoutesExample(title: 'GMR Demo Home'),
    );
  }
}

class MapsRoutesExample extends StatefulWidget {
  MapsRoutesExample({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MapsRoutesExampleState createState() => _MapsRoutesExampleState();
}

class _MapsRoutesExampleState extends State<MapsRoutesExample> {
  Completer<GoogleMapController> _controller = Completer();

  List<LatLng> points = [
    LatLng(45.82917150748776, 14.63705454546316),
    LatLng(45.833828635680355, 14.636544256202207),
    LatLng(45.851254420031296, 14.624331708344428),
    LatLng(45.84794984187217, 14.605434384742317)
  ];

  MapsRoutes route = MapsRoutes();
  DistanceCalculator distanceCalculator = DistanceCalculator();
  String googleApiKey = 'YOUR_GOOGLE_API_KEY';
  String totalDistance = 'No route';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Align(
            alignment: Alignment.center,
            child: GoogleMap(
              zoomControlsEnabled: false,
              polylines: route.routes,
              initialCameraPosition: const CameraPosition(
                zoom: 15.0,
                target: LatLng(45.82917150748776, 14.63705454546316),
              ),
              onMapCreated: (GoogleMapController controller) {
                _controller.complete(controller);
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                  width: 200,
                  height: 50,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(15.0)),
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(totalDistance, style: TextStyle(fontSize: 25.0)),
                  )),
            ),
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          await route.drawRoute(points, 'Test routes',
              Color.fromRGBO(130, 78, 210, 1.0), googleApiKey,
              travelMode: TravelModes.walking);
          setState(() {
            totalDistance =
                distanceCalculator.calculateRouteDistance(points, decimals: 1);
          });
        },
      ),
    );
  }
}

以上是关于 google_maps_routes 插件的基本使用方法和一个简单的示例应用。请根据自己的需求进行调整和扩展。