Yandex MapKit Lite for Flutter #

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

MapKit Lite 功能 #

使用 MapKit Lite 可以在 iOS 和 Android 上创建一个带有 Yandex 地图的应用。通过 MapKit 创建的地图会保持最新状态，展示新的建筑、新道路和立交桥、新开业的商家等。Yandex.Maps 上的所有更改也会出现在你的应用中。

• 访问带有最新更新的 Yandex 地图数据。
• 在地图上显示交通情况。
• 获取位置和组织的信息。
• 定制地图样式并包含各种元素，如多边形、地标等。

文档 #

你可以在我们的文档中找到更多关于 MapKit 的信息： https://yandex.ru/dev/mapkit/doc/en/

使用示例 #

以下是一个简单的示例，演示如何在 Flutter 应用程序中使用 yandex_maps_mapkit_lite 插件。

添加依赖 #

首先，在项目的 pubspec.yaml 文件中添加 yandex_maps_mapkit_lite 依赖：

dependencies:
  flutter:
    sdk: flutter
  yandex_maps_mapkit_lite: ^1.0.0

初始化 #

在应用程序的入口点（例如 main.dart）中初始化 YandexMapKit：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  final YandexMapController yandexMapController = YandexMapController();

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化 YandexMapKit
    YandexMapKit.init();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Yandex Maps Demo'),
      ),
      body: YandexMap(
        onMapCreated: (YandexMapController controller) async {
          yandexMapController.setMapStyle(
            style: MapStyle(
              backgroundColor: Colors.grey,
              foregroundColor: Colors.blue,
            ),
          );
        },
        initialCameraPosition: CameraPosition(
          target: Point(
            latitude: 55.7558,
            longitude: 37.6173,
          ),
          zoom: 10,
        ),
      ),
    );
  }
}

地图样式 #

可以使用 setMapStyle 方法来自定义地图样式：

yandexMapController.setMapStyle(
  style: MapStyle(
    backgroundColor: Colors.grey,
    foregroundColor: Colors.blue,
  ),
);

添加地标 #

使用 Placemark 添加地标：

YandexMap(
  onMapCreated: (YandexMapController controller) async {
    await controller.addPlacemark(
      Placemark(
        point: Point(
          latitude: 55.7558,
          longitude: 37.6173,
        ),
        icon: PlacemarkIcon.single(
          PlacemarkIconStyle(
            image: BitmapDescriptor.fromAssetImage(
              ImageConfiguration(size: Size(48, 48)),
              "assets/pin.png",
            ),
          ),
        ),
      ),
    );
  },
  initialCameraPosition: CameraPosition(
    target: Point(
      latitude: 55.7558,
      longitude: 37.6173,
    ),
    zoom: 10,
  ),
)

添加多边形 #

使用 Polygon 添加多边形：

YandexMap(
  onMapCreated: (YandexMapController controller) async {
    await controller.addPolygon(
      Polygon(
        points: [
          Point(latitude: 55.7558, longitude: 37.6173),
          Point(latitude: 55.7558, longitude: 37.6183),
          Point(latitude: 55.7568, longitude: 37.6183),
          Point(latitude: 55.7568, longitude: 37.6173),
        ],
        fillColor: Colors.red.withOpacity(0.5),
        strokeColor: Colors.red,
        strokeWidth: 2,
      ),
    );
  },
  initialCameraPosition: CameraPosition(
    target: Point(
      latitude: 55.7558,
      longitude: 37.6173,
    ),
    zoom: 10,
  ),
)

添加交通信息 #

使用 showTraffic 方法来显示交通信息：

YandexMap(
  onMapCreated: (YandexMapController controller) async {
    await controller.showTraffic(true);
  },
  initialCameraPosition: CameraPosition(
    target: Point(
      latitude: 55.7558,
      longitude: 37.6173,
    ),
    zoom: 10,
  ),
)