嵌入式MAPBOX导航

Question

我正在为电动汽车的智能显示器制作一个扑朔迷离的应用程序。因此，想法是拥有2个材料应用程序：一个用于整个应用程序，另一个仅用于导航，以便我只能在负责导航的一部分内将不同的页面推到不同的页面（IE ProgreRide屏幕，HomeScreen，TurnbyTurnScreen .. 。）如您所见。因此，一切看起来都不错，我可以选择启动和端点地址，但问题是导航立即全屏幕，但是我需要将其留在屏幕的右侧。 mainscreen

任何人都有一个想法如何解决这个问题？

相关代码给出了波纹管（我没有放入“ 未来_ONROUTEEVENT（e）async {} ”功能，因为它是标准的，那里没什么特别的）。如您所见，我在地图加载时使用了SiziedBox作为圆形ProgressIndicator。我希望我的导航也可以适合或类似的盒子。

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

您是否正在使用Flutter_Mapbox_navigation： ^0.2.2？

如果是，我有2个视图，即出现的视图，当我单击一个按钮时，它将继续进行完整地图视图，

以便这是我的实现

返回（扩展了）（
孩子：mapboxNavigationView（
选项：_navigationOption，
OnRouteevent：_ONEMBEDDEDROUTEEVENT，
发出的：
（MapBoxNavigationViewControllloll Controller）async {
_controller =控制器;
Controller.Initialize（）;

                    if(!_isNavigating){
                      _BuildRoute();
                    }

                  }),
              );
            }),
        Padding(
          padding: const EdgeInsets.only(
              left: 20.0, right: 20, top: 20, bottom: 10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[

//单击按钮后，它将导航到全屏幕地图导航

          ElevatedButton(
          child: const Text("Start A to B"),
          onPressed: () async {
            var wayPoints = <WayPoint>[];
            wayPoints.add(_origin);
            wayPoints.add(_destination);
            var opt = MapBoxOptions.from(_navigationOption);
            opt.simulateRoute = true;
            opt.alternatives = true;
            opt.isOptimized = true;
            opt.allowsUTurnAtWayPoints = true;
            opt.enableRefresh = true;
            opt.animateBuildRoute = true;
            opt.mapStyleUrlDay = 'https://url_to_day_style';
            opt.voiceInstructionsEnabled = true;
            opt.bannerInstructionsEnabled = true;
            opt.showReportFeedbackButton = true;
            opt.showEndOfRouteFeedback = true;
            opt.units = VoiceUnits.metric;
            opt.language = "en";
            opt.tilt = 60;
            await MapBoxNavigation.instance.startNavigation(wayPoints: wayPoints, options: opt);
            //await MapBoxNavigation.instance.registerRouteEventListener((value) { });

          },
        ),

返回MAPBOX导航视图时构建路由的功能

void _BuildRoute(){

if (_routeBuilt) {
  _controller.clearRoute();
} else {
  var wayPoints = <WayPoint>[];
  wayPoints.add(_origin);
  wayPoints.add(_destination);
  _isMultipleStop = wayPoints.length > 2;
  _controller.buildRoute(
    wayPoints: wayPoints,
    options: _navigationOption,
  );
}

}

//