Flutter路线导航插件graphhopper_route_navigation的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter路线导航插件 graphhopper_route_navigation 的使用

graphhopper_route_navigation 是一个用于地图路线导航的新插件。它基于 Maplibre 地图作为基础层和样式，并使用 GraphHopper 提供的路线导航数据（包括折线、时间和距离等信息），结合 Getx 进行状态管理。

开始之前

简介

这个插件为 Flutter 应用提供了一个简单的方式来集成路线导航功能。它使用了 Maplibre 作为地图的基础层，GraphHopper 提供的 API 来获取路线数据，并通过 Getx 来管理应用的状态。

设置

Android 设置

在 AndroidManifest.xml 文件中添加以下权限以启用位置服务：

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

iOS 设置

该插件尚未在 iOS 设备上进行测试。

如何使用？

导入包

首先，在你的 Dart 文件中导入 graphhopper_route_navigation 包：

import 'package:graphhopper_route_navigation/graphhopper_route_navigation.dart';

示例代码

下面是一个简单的示例，展示如何使用该插件来实现从当前位置到指定目的地的导航功能：

MaterialButton(
    onPressed: () async {
        ApiRequest apiRequest = ApiRequest();

        DirectionRouteResponse directionRouteResponse = await apiRequest.getDrivingRouteUsingGraphHooper(
            source: userLocation!.position,
            destination: latLng,
            customBaseUrl: dotenv.env["CUSTOM_BASE_URL"],
            navigationType: NavigationProfile.car,
            graphHooperApiKey: dotenv.env["API_KEY"] ?? "Your GraphHooper API key"
        );

        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => NavigationWrapperScreen(
                    directionRouteResponse: directionRouteResponse),
            ));
    },
    child: Text('Navigate'),
)

在这个例子中，我们创建了一个按钮，当点击时会调用 getDrivingRouteUsingGraphHooper 方法获取路线数据，并跳转到一个新的页面显示导航详情。

完整示例 Demo

为了更好地理解整个流程，这里提供了一个完整的示例项目结构：

// main.dart
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'bindings/http_overrides.dart';
import 'map_dashboard_screen.dart';

Future<void> main() async {
  // 加载环境变量文件
  await dotenv.load(fileName: ".env");

  WidgetsFlutterBinding.ensureInitialized();
  HttpOverrides.global = MyHttpOverrides();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Graphhooper Map Route Navigation',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(brightness: Brightness.light),
      darkTheme: ThemeData(brightness: Brightness.dark),
      themeMode: ThemeMode.dark,
      home: const MapDashboardScreen(),
    );
  }
}

更多关于Flutter路线导航插件graphhopper_route_navigation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter路线导航插件graphhopper_route_navigation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用graphhopper_route_navigation插件进行路线导航的示例代码。这个插件允许你使用GraphHopper的路由服务来进行路线计算和导航。

首先，确保你已经在pubspec.yaml文件中添加了graphhopper_route_navigation依赖：

dependencies:
  flutter:
    sdk: flutter
  graphhopper_route_navigation: ^最新版本号  # 替换为实际最新版本号

然后，运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter应用中如下使用graphhopper_route_navigation插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter GraphHopper Navigation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NavigationScreen(),
    );
  }
}

class NavigationScreen extends StatefulWidget {
  @override
  _NavigationScreenState createState() => _NavigationScreenState();
}

class _NavigationScreenState extends State<NavigationScreen> {
  final GraphHopperNavigation _graphHopperNavigation = GraphHopperNavigation();
  
  // 起点和终点坐标
  final double startLat = 48.1372; // 替换为你的起点纬度
  final double startLng = 11.5756; // 替换为你的起点经度
  final double endLat = 48.7756;   // 替换为你的终点纬度
  final double endLng = 9.1829;    // 替换为你的终点经度

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter GraphHopper Navigation Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                // 计算路线
                RouteResult routeResult = await _graphHopperNavigation.calculateRoute(
                  PointLatLng(startLat, startLng),
                  PointLatLng(endLat, endLng),
                  key: '你的GraphHopper API Key', // 替换为你的GraphHopper API Key
                );

                if (routeResult != null && routeResult.isOk) {
                  // 开始导航
                  _graphHopperNavigation.startNavigation(
                    routeResult,
                    start: PointLatLng(startLat, startLng),
                    destination: PointLatLng(endLat, endLng),
                  );
                } else {
                  // 处理路线计算失败的情况
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('路线计算失败')),
                  );
                }
              },
              child: Text('开始导航'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 停止导航
    _graphHopperNavigation.stopNavigation();
    super.dispose();
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮。当用户点击按钮时，应用将使用GraphHopper的API来计算从起点到终点的路线，并开始导航。

请注意以下几点：

  1. 你需要替换示例中的起点和终点坐标为你实际想要导航的坐标。
  2. 你需要提供有效的GraphHopper API Key。
  3. 这个示例假设你已经设置好GraphHopper的API，并且API Key是有效的。

这个示例代码展示了如何使用graphhopper_route_navigation插件的基本功能，但实际应用中你可能需要处理更多的错误情况、用户交互和导航状态的更新。希望这个示例能帮助你快速上手Flutter中的路线导航功能。

回到顶部