嵌入式MapBox导航

Question

我正在为我的电动汽车的智能显示屏制作一个 flutter 应用程序。因此，我们的想法是拥有 2 个 MaterialApp：一个用于整个应用程序，另一个仅用于导航，这样我就可以仅在负责导航的屏幕部分内推送不同的页面（即prepareRide 屏幕、homeScreen、turnByTurnScreen .. .）如下所示。所以，一切看起来都很好，我可以选择起始地址和端点地址，但问题是导航立即进入全屏，但我需要它保持嵌入屏幕的右侧部分。

有人知道如何解决这个问题吗？

相关代码如下（我没有在这里放置“Future _onRouteEvent(e) async {}”函数，因为它是标准的，没有什么特别的）。正如您所看到的，我在加载地图时使用了 SizedBox 作为 CircularProgressIndicator。我希望我的导航也能适合那个或类似的盒子。

import 'package:evo_app_nav/helpers/shared_prefs.dart';
import 'package:flutter/material.dart';

import 'package:mapbox_gl/mapbox_gl.dart';
import 'package:flutter_mapbox_navigation/library.dart';


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

  @override
  State<TurnByTurn> createState() => _TurnByTurnState();
}

class _TurnByTurnState extends State<TurnByTurn> {
  // Waypoints to mark trip start and end
  LatLng source = getTripLatLngFromSharedPrefs('source');
  LatLng destination = getTripLatLngFromSharedPrefs('destination');
  late WayPoint sourceWaypoint, destinationWaypoint;
  var waypoints = <WayPoint>[];

  // Config variables for Mapbox Navigation
  late MapBoxNavigation directions;
  late MapBoxOptions _options;
  late double distanceRemaining, durationRemaining;
  late MapBoxNavigationViewController _controller;

  final bool isMultipleStop = false;
  String instruction = "";
  bool arrived = false;
  bool routeBuilt = false;
  bool isNavigating = false;

  @override
  void initState() {
    super.initState();
    initialize();
  }

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

    // Setup directions and options
    directions = MapBoxNavigation(onRouteEvent: _onRouteEvent);
    _options = MapBoxOptions(
      zoom: 18,
      voiceInstructionsEnabled: true,
      bannerInstructionsEnabled: true,
      mode: MapBoxNavigationMode.drivingWithTraffic,
      isOptimized: true,
      units: VoiceUnits.metric,
      simulateRoute: true,
      language: 'en',
    );
    // Configure waypoints
    sourceWaypoint = WayPoint(
        name: "Source", latitude: source.latitude, longitude: source.longitude);
    destinationWaypoint = WayPoint(
        name: "Destination",
        latitude: destination.latitude,
        longitude: destination.longitude);
    waypoints.add(sourceWaypoint);
    waypoints.add(destinationWaypoint);
    // Start the trip
    await directions.startNavigation(wayPoints: waypoints, options: _options);
  }

  @override
  Widget build(BuildContext context) {
    //return const RateRide();
    return SizedBox(
        width: 300, height: 400, child: const CircularProgressIndicator());
  }

Answer 1

你找到解决办法了吗？ ，因为我也有同样的问题