Flutter地图导航插件mappls_direction_plugin的使用

Flutter地图导航插件mappls_direction_plugin的使用

简介

mappls_direction_plugin 是一个用于在 Flutter 应用中展示路线的地图导航组件。它支持多种功能，包括地点搜索、车辆类型选择等。

功能

• 支持 Mappls 地点搜索，用于搜索起点、终点和途经点。
• 可以使用数字地址（分号分隔）、Mappls 地图标记或 WGS 84 经纬度坐标。
• 可以设置车辆类型，如驾车、步行和骑行。
• 轻松设置交通信息和预计到达时间资源。

开始使用

添加依赖

首先，在 pubspec.yaml 文件中添加 mappls_direction_plugin 依赖：

dependencies:
  mappls_direction_plugin: ^1.0.0

然后在 Dart 代码中导入该包：

import 'package:mappls_direction_plugin/mappls_direction_plugin.dart';

添加 Mappls 密钥

必须通过 MapplsAccountManager 类提供您的密钥。

MapplsAccountManager.setMapSDKKey("YOUR_MAP_SDK_KEY");
MapplsAccountManager.setRestAPIKey("YOUR_REST_API_KEY");
MapplsAccountManager.setAtlasClientId("YOUR_ATLAS_CLIENT_ID");
MapplsAccountManager.setAtlasClientSecret("YOUR_ATLAS_CLIENT_SECRET");

使用 Direction Widget

打开 Direction Widget

使用 openDirectionWidget 方法打开 Direction Widget：

DirectionCallback directionCallback;

try {
  directionCallback = await openDirectionWidget(directionOptions: options);
} on PlatformException {
  directionCallback = DirectionCallback(null, null);
}

设置 Direction Options

可以使用 DirectionOptions 来设置组件的属性：

DirectionOptions options = DirectionOptions(
  showStartNavigation: true, // 是否显示开始导航按钮
  showAlternative: true, // 是否显示替代路线
  steps: true, // 是否返回每个路线段的步骤
  resource: DirectionsCriteria.RESOURCE_ROUTE, // 资源类型
  profile: DirectionsCriteria.PROFILE_DRIVING, // 车辆类型
  overview: DirectionsCriteria.OVERVIEW_FULL, // 概览类型
  excludes: [DirectionsCriteria.EXCLUDE_TOLL], // 避免的道路类型
  searchPlaceOption: PlaceOptions(), // 搜索选项
  destination: DirectionPoint(location: LatLng(28.5355, 77.3910)), // 目的地
);

完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 mappls_direction_plugin 插件：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:mappls_direction_plugin_example/DirectionSettings.dart';
import 'package:mappls_direction_plugin_example/settingWidget.dart';
import 'package:mappls_gl/mappls_gl.dart';
import 'package:mappls_direction_plugin/mappls_direction_plugin.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
    routes: <String, WidgetBuilder>{
      'SettingWidget': (BuildContext context) => SettingWidget(),
    },
  ));
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  static const String MAP_SDK_KEY = "YOUR_MAP_SDK_KEY";
  static const String REST_API_KEY = "YOUR_REST_API_KEY";
  static const String ATLAS_CLIENT_ID = "YOUR_ATLAS_CLIENT_ID";
  static const String ATLAS_CLIENT_SECRET = "YOUR_ATLAS_CLIENT_SECRET";

  DirectionCallback _directionCallback = DirectionCallback(null, null);

  [@override](/user/override)
  void initState() {
    super.initState();
    MapplsAccountManager.setMapSDKKey(MAP_SDK_KEY);
    MapplsAccountManager.setRestAPIKey(REST_API_KEY);
    MapplsAccountManager.setAtlasClientId(ATLAS_CLIENT_ID);
    MapplsAccountManager.setAtlasClientSecret(ATLAS_CLIENT_SECRET);
  }

  Future<void> openMapplsDirectionWidget() async {
    DirectionCallback directionCallback;
    DirectionSettings settings = DirectionSettings();
    PlaceOptions placeOptions = PlaceOptions(
      tokenizeAddress: settings.tokenizeAddress,
      saveHistory: settings.saveHistory,
      historyCount: settings.historyCount != null ? int.parse(settings.historyCount!) : null,
      backgroundColor: settings.backgroundColor,
      toolbarColor: settings.toolbarColor,
      toolbarTintColor: settings.toolbarTintColor,
      zoom: settings.zoom != null ? double.parse(settings.zoom!) : null,
      location: settings.longitude != null && settings.latitude != null
          ? LatLng(double.parse(settings.latitude!), double.parse(settings.longitude!))
          : null,
      filter: settings.filter != null ? settings.filter : null,
    );

    DirectionOptions options = DirectionOptions(
      showStartNavigation: settings.showStartNavigation,
      showAlternative: settings.showAlternative,
      steps: settings.showSteps,
      resource: settings.resource,
      profile: settings.profile,
      overview: settings.overView,
      excludes: settings.excludes.length == 0 ? null : settings.excludes,
      searchPlaceOption: placeOptions,
      destination: settings.mapplsPin != null
          ? DirectionPoint(settings.placeName!, settings.placeAddress!, mapplsPin: settings.mapplsPin)
          : settings.dLng != null && settings.dLat != null
              ? DirectionPoint(settings.placeName!, settings.placeAddress!, location: LatLng(double.parse(settings.dLat!), double.parse(settings.dLng!)))
              : null,
    );

    try {
      directionCallback = await openDirectionWidget(directionOptions: options);
    } on PlatformException {
      directionCallback = DirectionCallback(null, null);
    }
    print(json.encode(directionCallback.directionResponse?.toMap()));

    if (!mounted) return;

    setState(() {
      _directionCallback = directionCallback;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Direction Example'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.settings, color: Colors.white),
              onPressed: () {
                Navigator.pushNamed(context, 'SettingWidget');
              },
            )
          ],
        ),
        body: Center(
          child: Column(children: [
            SizedBox(height: 20),
            Text(_directionCallback.selectedIndex == null
                ? 'Selected Index: '
                : 'Selected Index: ${_directionCallback.selectedIndex}'),
            SizedBox(height: 20),
            Text(_directionCallback.directionResponse?.waypoints == null
                ? 'Distance: '
                : 'Distance: ${_directionCallback.directionResponse?.routes?[0].distance}'),
            SizedBox(height: 20),
            Text(_directionCallback.directionResponse?.waypoints == null
                ? 'Duration: '
                : 'Duration: ${_directionCallback.directionResponse?.routes?[0].duration}'),
            SizedBox(height: 20),
            TextButton(
              child: Text('Open Direction Widget'),
              onPressed: () => openMapplsDirectionWidget(),
            ),
          ]),
        ),
      ),
    );
  }
}