Flutter地图导航插件yandex_maps

Flutter地图导航插件yandex_maps_navikit的使用

标题

Yandex MapKit和NaviKit SDK for Flutter

内容

MapKit和NaviKit for Flutter允许您在Flutter应用程序中使用Yandex.Maps的功能，适用于iOS和Android。

地图功能

使用MapKit创建一个带有Yandex地图的应用程序。您的应用将能够搜索企业名称和地名、规划驾驶和步行路线（考虑实时交通状况）、并在地图上显示交通和全景图像。

您创建的地图将保持最新，以显示新的建筑、新道路和立交桥以及最近开业的企业。Yandex.Maps上的所有更改也会出现在您的应用中。

访问Yandex地图数据并获取最新的更新。
计划考虑实时交通的驾驶路线。
计划步行或公共交通路线。
显示地图上的交通情况。
获取位置和组织机构的信息。

文档

有关MapKit和NaviKit的更多信息，请参阅我们的文档：https://yandex.ru/dev/mapkit/doc/en/

示例代码

import 'package:flutter/material.dart';
import 'package:yandex_mapkit/yandex_mapkit.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Yandex Maps Navigation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  YandexMapKit yandexMapKit;

  [@override](/user/override)
  void initState() {
    super.initState();
    yandexMapKit = YandexMapKit(
      apiKey: 'your_api_key_here', // 替换为您的API密钥
      onMapCreated: (map) {
        setState(() {
          this.yandexMapKit = map;
        });
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Yandex Maps Navigation'),
      ),
      body: Column(
        children: [
          Expanded(
            child: YandexMapView(
              yandexMapKit: yandexMapKit,
              onRouteSelected: (route) {
                print('Selected route: $route');
              },
            ),
          ),
        ],
      ),
    );
  }
}

class YandexMapView extends StatelessWidget {
  final YandexMapKit yandexMapKit;
  final Function(String) onRouteSelected;

  YandexMapView({required this.yandexMapKit, required this.onRouteSelected});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return YandexMap(
      yandexMapKit: yandexMapKit,
      onRouteSelected: onRouteSelected,
    );
  }
}

更多关于Flutter地图导航插件yandex_maps_navikit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

ionicwang 1楼•6 天前

更多关于Flutter地图导航插件yandex_maps_navikit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用yandex_maps_navikit插件来实现地图导航功能的代码示例。yandex_maps_navikit是一个用于集成Yandex Maps和导航功能的Flutter插件。

首先，确保你已经在pubspec.yaml文件中添加了yandex_maps_navikit依赖：

dependencies:
  flutter:
    sdk: flutter
  yandex_maps_navikit: ^最新版本号  # 请替换为当前最新版本号

然后，运行flutter pub get来安装依赖。

接下来，我们编写Flutter代码来展示如何使用这个插件。以下是一个基本的示例，展示了如何初始化地图并启动导航。

主文件 `main.dart`

import 'package:flutter/material.dart';
import 'package:yandex_maps_navikit/yandex_maps_navikit.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Yandex Maps Navigation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  YandexMapsNavikitController? _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Yandex Maps Navigation'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: YandexMap(
              onMapCreated: (controller) {
                setState(() {
                  _controller = controller;
                });
              },
              apiKey: 'YOUR_YANDEX_MAPS_API_KEY', // 请替换为你的Yandex Maps API Key
            ),
          ),
          ElevatedButton(
            onPressed: () {
              _startNavigation();
            },
            child: Text('Start Navigation'),
          ),
        ],
      ),
    );
  }

  void _startNavigation() {
    if (_controller != null) {
      final startPoint = YandexMapPoint(latitude: 55.755826, longitude: 37.617300); // 起点坐标
      final endPoint = YandexMapPoint(latitude: 55.761400, longitude: 37.625500); // 终点坐标

      _controller!.buildRoute(
        startPoint: startPoint,
        endPoint: endPoint,
        routeParameters: RouteParameters(
          transportType: TransportType.car,
        ),
      ).then((route) {
        if (route != null) {
          _controller!.startNavigation(route: route);
        } else {
          print('Failed to build route');
        }
      }).catchError((error) {
        print('Error: $error');
      });
    }
  }
}

说明

依赖导入：确保在pubspec.yaml文件中添加了yandex_maps_navikit依赖。
YandexMap组件：使用YandexMap组件来显示地图。你需要提供你的Yandex Maps API Key。
控制器：通过onMapCreated回调获取YandexMapsNavikitController实例，以便控制地图和导航。
启动导航：在按钮点击事件中，通过_startNavigation方法构建并启动导航。你需要提供起点和终点的坐标，以及路由参数（如交通类型）。

注意事项

API Key：确保你已经从Yandex开发者平台获取了API Key，并将其替换到代码中的apiKey参数。
权限：在Android和iOS项目中，确保添加了必要的权限，例如访问网络权限和位置权限。

希望这个示例能帮你快速上手yandex_maps_navikit插件的使用。如果有更多问题，欢迎继续提问！

Flutter地图导航插件yandex_maps_navikit的使用