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

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

插件介绍

flutter_map_directions 是一个用于在Flutter应用中显示坐标之间路线的插件。它与 flutter_map 插件结合使用，可以动态地绘制从一个点到另一个点的路线。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 flutter_map_directions 插件：

dependencies:
  flutter_map_directions: any // 或最新版本

使用示例代码

下面是一个完整的示例代码，展示了如何在Flutter应用中使用 flutter_map_directions 插件来显示路线。

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_directions/flutter_map_directions.dart';
import 'package:latlong2/latlong.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Map Directions Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  String _message = 'Finding route...';

  List<DirectionCoordinate> _coordinates = [];
  final MapController _mapController = MapController();
  final DirectionController _directionController = DirectionController();

  [@override](/user/override)
  void initState() {
    _loadNewRoute();
    super.initState();
  }

  void _loadNewRoute() async {
    await Future.delayed(const Duration(seconds: 5));
    _coordinates = [
      DirectionCoordinate(1, (lat, lng) => LatLng(lat, lng)),
    ];
    final bounds = LatLngBounds.fromPoints(
      _coordinates.map((location) {
        return LatLng(location.latitude, location.longitude);
      }).toList()
    );
    _mapController.fitCamera(CameraFit.bounds(bounds: bounds, padding: EdgeInsets.all(50)));
    _directionController.updateDirection(_coordinates);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          FlutterMap(
            mapController: _mapController,
            options: const MapOptions(
              initialCenter: LatLng(1, (lat, lng) => LatLng(lat, lng)),
            ),
            children: [
              TileLayer(
                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
              ),
              MarkerLayer(
                markers: _coordinates.map((location) {
                  return Marker(
                    point: LatLng(location.latitude, location.longitude),
                    width: 35,
                    height: 35,
                    child: const Icon(
                      Icons.location_pin,
                    ),
                    alignment: Alignment.topCenter,
                  );
                }).toList()
              ),
              DirectionsLayer(
                coordinates: _coordinates,
                color: Colors.deepOrange,
                onCompleted: (routes) =&gt; _updateMessage(routes),
                controller: _directionController,
              ),
            ],
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 1),
              margin: const EdgeInsets.only(bottom: 20),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(40)
              ),
              child: Text(_message),
            ),
          ),
        ],
      )
    );
  }

  void _updateMessage(List&lt;OsrmRoute&gt; routes) {
    if (_coordinates.length &lt; 2) return;

    setState(() {
      _message = routes.isNotEmpty ? 'Found route' : 'No route found';
    });
  }
}