在 Mapbox Flutter 中获取方向路线 - Dart

本文将介绍如何在使用 Mapbox Flutter 插件时获取方向路线。

步骤 1: 导入依赖

首先，你需要在 pubspec.yaml 文件中添加 Mapbox Flutter 插件作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  mapbox_gl: ^latest_version

然后运行 flutter pub get 命令来获取依赖项。

步骤 2: 初始化 Mapbox

在你的 Dart 代码中导入 Mapbox 插件并初始化 Mapbox：

import 'package:mapbox_gl/mapbox_gl.dart';

MapboxMapController? mapController;

void main() {
  // 初始化 Mapbox
  MapboxGl.instance.accessToken = 'YOUR_ACCESS_TOKEN';
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mapbox Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mapbox Flutter Demo'),
        ),
        body: MapboxMap(
          onMapCreated: (controller) {
            mapController = controller;
          },
          initialCameraPosition: const CameraPosition(
            target: LatLng(37.7749, -122.4194),
            zoom: 11.0,
          ),
        ),
      ),
    );
  }
}

确保将 YOUR_ACCESS_TOKEN 替换为你的 Mapbox 访问令牌。

步骤 3: 获取方向路线

为了获取方向路线，我们首先需要在地图上选择起点和终点。在 onMapCreated 回调函数中，我们可以监听地图的点击事件并获取点击位置的经纬度。

class MyApp extends StatelessWidget {
  // ...

  void onMapClick(Point<double> point, LatLng latLng) {
    if (mapController != null) {
      // 在地图上添加标记点
      mapController!.addSymbol(
        SymbolOptions(
          geometry: latLng,
          iconImage: 'assets/images/marker.png',
          iconSize: 1.0,
        ),
      );

      // 根据起点和终点经纬度获取方向路线
      getDirections(
        LatLng(37.7749, -122.4194),  // 起点
        latLng,  // 终点
      );
    }
  }

  void getDirections(LatLng origin, LatLng destination) {
    // 发起方向路线请求
    // 实现你的方向路线请求逻辑，获取路线坐标或路线数据

    // 在地图上绘制路线
    mapController!.addLine(
      LineOptions(
        geometry: [
          origin,
          destination,
        ],
        lineColor: "#FF0000",
        lineWidth: 3.0,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mapbox Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mapbox Flutter Demo'),
        ),
        body: MapboxMap(
          onMapCreated: (controller) {
            mapController = controller;
            mapController!.onSymbolTapped.add((symbol) {
              // 获取点击位置的经纬度
              final latLng = symbol.options.geometry!;
              onMapClick(Point<double>(symbol.options.geometry!.latitude, symbol.options.geometry!.longitude), 
                LatLng(symbol.options.geometry!.latitude, symbol.options.geometry!.longitude));
            });
          },
          initialCameraPosition: const CameraPosition(
            target: LatLng(37.7749, -122.4194),
            zoom: 11.0,
          ),
        ),
      ),
    );
  }
}

以上就是如何使用 Mapbox Flutter 插件获取方向路线的基本步骤。你还可以进一步定制方向路线的样式、添加路线上的标记点等。

请参考 Mapbox Flutter 的文档以获得更详细的信息：Mapbox Flutter 插件文档

希望本文对你有所帮助！