Flutter地图展示插件yandex_maps_mapkit_lite的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

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,
  ),
)

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

1 回复

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


Yandex Maps MapKit Lite 是一个用于在 Flutter 应用中展示 Yandex 地图的插件。它提供了基本的地图展示功能,适用于需要简单地图展示的应用场景。

以下是如何在 Flutter 项目中使用 yandex_maps_mapkit_lite 插件的步骤:

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 yandex_maps_mapkit_lite 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  yandex_maps_mapkit_lite: ^0.10.0  # 请使用最新版本

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

2. 获取 API 密钥

在使用 Yandex Maps MapKit 之前,你需要在 Yandex Cloud 上注册并获取 API 密钥。

3. 配置 API 密钥

AndroidManifest.xml 文件中配置 API 密钥:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <application>
        <meta-data
            android:name="com.yandex.mapkit.MapKitFactory.API_KEY"
            android:value="YOUR_API_KEY" />
    </application>
</manifest>

4. 在 Flutter 中展示地图

在 Flutter 代码中使用 YandexMap 组件来展示地图。

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

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

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

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

class _MapScreenState extends State<MapScreen> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Yandex MapKit Lite'),
      ),
      body: YandexMap(),
    );
  }
}

5. 运行应用

确保你已经配置好 Android 或 iOS 环境,然后运行应用。你应该能够在应用中看到 Yandex 地图。

6. 其他功能

yandex_maps_mapkit_lite 插件还支持一些其他功能,例如:

  • 设置地图中心点:通过 MapObjectCollectionMapObject 来设置地图的中心点。
  • 添加标记:可以使用 PlacemarkMapObject 来在地图上添加标记。
  • 监听地图事件:可以通过 YandexMapController 来监听地图的点击、移动等事件。

示例代码:添加标记

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Yandex MapKit Lite'),
      ),
      body: YandexMap(
        onMapCreated: (controller) {
          _controller = controller;
          _addPlacemark();
        },
      ),
    );
  }

  void _addPlacemark() async {
    if (_controller == null) return;

    final point = Point(latitude: 55.751244, longitude: 37.618423);
    final placemark = PlacemarkMapObject(
      mapId: MapObjectId('placemark'),
      point: point,
      opacity: 1,
      icon: PlacemarkIcon.single(PlacemarkIconStyle(
        image: BitmapDescriptor.fromAssetImage('assets/marker.png'),
        scale: 1,
      )),
    );

    await _controller!.mapObjects.addPlacemark(placemark);
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!