Flutter地图导航插件 navigation_with_mapbox 的使用

navigation_with_mapbox 是一个用于在Flutter应用中添加逐向导航功能的插件，它基于MapBox服务。以下是详细的配置和示例代码。

配置指南

Android 配置

1. 获取并设置Mapbox访问令牌：你需要从Mapbox账户页面获取一个访问令牌，并将其添加到android/app/src/main/res/values/strings.xml文件中，键名为mapbox_access_token。

   <resources>
       <string name="mapbox_access_token" translatable="false">ADD_MAPBOX_ACCESS_TOKEN_HERE</string>
   </resources>
   

2. 添加权限：在AndroidManifest.xml中添加以下权限：

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

3. 下载Mapbox二进制文件所需的令牌：将具有downloads:read作用域的MapBox下载令牌添加到你的gradle.properties文件中。

   MAPBOX_DOWNLOADS_TOKEN=sk.xxxxx
   

iOS 配置

1. 创建并设置下载令牌：在.netrc文件中添加具有DOWNLOADS:READ作用域的Mapbox API令牌。

2. 设置Mapbox访问令牌：在Info.plist中设置MBXAccessToken为你的访问令牌。

3. 设置位置使用描述：设置NSLocationWhenInUseUsageDescription以说明应用为何需要访问用户的位置信息。

4. 后台模式：启用“音频、AirPlay和画中画”以及“位置更新”的后台模式，或者在Info.plist中添加相应的UIBackgroundModes值。

示例代码

下面是一个完整的Flutter应用程序示例，展示了如何使用navigation_with_mapbox插件进行导航。

import 'package:flutter/material.dart';
import 'dart:io' as io;
import 'package:navigation_with_mapbox/navigation_with_mapbox.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  final _navigationWithMapboxPlugin = NavigationWithMapbox();
  MapboxOptions? _options;
  late Stream<int> listenEvents;
  late StreamSubscription _statusViewSubscription;
  bool _controlView = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
    listenEvents = MapboxNavigationView.getStateMapboxView;
  }

  Future<void> initPlatformState() async {
    if (!mounted) return;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            children: [
              Flexible(
                child: Stack(
                  children: [
                    Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          ElevatedButton(
                            onPressed: io.Platform.isAndroid
                                ? () async {
                                    await _navigationWithMapboxPlugin.startNavigation(
                                      origin: WayPoint(latitude: 4.809432, longitude: -75.700660),
                                      destination: WayPoint(latitude: 4.759335, longitude: -75.923914),
                                      setDestinationWithLongTap: true,
                                      simulateRoute: false,
                                      alternativeRoute: true,
                                      style: 'traffic_night',
                                      language: 'es',
                                      profile: 'driving',
                                      voiceUnits: 'imperial',
                                      msg: '¡Buen viaje, disfruta de tu recorrido!',
                                    );
                                  }
                                : null,
                            child: const Text('Start Navigation Android'),
                          ),
                          ElevatedButton(
                            onPressed: io.Platform.isIOS
                                ? () {
                                    var options = MapboxOptions(
                                      origin: WayPoint(latitude: 4.809432, longitude: -75.700660),
                                      destination: WayPoint(latitude: 4.759335, longitude: -75.923914),
                                      setDestinationWithLongTap: true,
                                      simulateRoute: false,
                                      language: 'es',
                                      profile: 'drivingWithTraffic',
                                      style: 'dark',
                                      voiceUnits: 'imperial',
                                    );
                                    setState(() {
                                      _options = options;
                                      _controlView = true;
                                    });
                                    _statusViewSubscription = listenEvents.listen(_statusView);
                                  }
                                : null,
                            child: const Text('Start Navigation Ios'),
                          ),
                        ],
                      ),
                    ),
                    if (_controlView)
                      MapboxNavigationView(mapboxOptions: _options!),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  _statusView(event) {
    if (event == 2) {
      setState(() {
        _controlView = false;
      });
      _statusViewSubscription.cancel();
    }
  }
}