Flutter地图展示插件yandex_maps_mapkit的使用

Flutter地图展示插件yandex_maps_mapkit的使用

Yandex MapKit for Flutter简介

Yandex MapKit for Flutter允许你在Flutter应用程序中使用Yandex.Maps的功能，支持iOS和Android平台。通过Yandex MapKit，你可以创建一个包含Yandex地图的应用程序，能够搜索商家和地点名称、规划考虑实时交通状况的驾车和步行路线，并在地图上显示交通情况和全景图。

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

MapKit功能

• 访问带有最新更新的Yandex地图数据。
• 规划考虑交通状况的驾车路线。
• 规划步行或公共交通路线。
• 在地图上显示交通情况。
• 获取地点和组织的信息。

完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter项目中使用yandex_maps_mapkit插件来显示Yandex地图，并添加一些基本功能，如设置初始位置、缩放级别、添加标记等。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  yandex_maps_mapkit: ^2.0.0  # 请根据最新版本进行调整

2. 配置API密钥

你需要在项目的Android和iOS配置文件中添加Yandex Maps API密钥。

Android配置

在android/app/src/main/AndroidManifest.xml中添加以下内容：

<meta-data
    android:name="com.yandex.mapkit.api_key"
    android:value="YOUR_YANDEX_MAPS_API_KEY" />

iOS配置

在ios/Runner/Info.plist中添加以下内容：

<key>YMK_API_KEY</key>
<string>YOUR_YANDEX_MAPS_API_KEY</string>

3. 创建地图页面

接下来，创建一个Flutter页面来显示Yandex地图。以下是完整的示例代码：

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

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

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

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

class _MapScreenState extends State<MapScreen> {
  // 初始化Yandex地图控制器
  late YandexMapController mapController;

  // 设置初始位置（莫斯科）
  final Point _initialPosition = Point(latitude: 55.75396, longitude: 37.620393);

  // 设置初始缩放级别
  final double _initialZoom = 10;

  // 地图样式（普通地图、卫星地图等）
  final MapObjectTapListener _mapObjectTapListener = (MapObjectTapEvent event) {
    if (event.mapObject is PlacemarkMapObject) {
      final placemark = event.mapObject as PlacemarkMapObject;
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('点击了标记: ${placemark.data}')),
      );
    }
  };

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化地图控制器
    YandexMapkit.setApiKey("YOUR_YANDEX_MAPS_API_KEY");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Yandex Maps Demo'),
      ),
      body: YandexMap(
        onMapCreated: (YandexMapController controller) {
          mapController = controller;
          // 设置初始位置和缩放级别
          mapController.moveCamera(
            CameraUpdate.newCameraPosition(
              CameraPosition(
                target: _initialPosition,
                zoom: _initialZoom,
              ),
            ),
          );
        },
        onObjectTap: _mapObjectTapListener,
        mapObjects: [
          // 添加一个标记
          PlacemarkMapObject(
            mapId: MapObjectId("my_placemark"),
            point: Point(latitude: 55.75396, longitude: 37.620393),
            icon: PlacemarkIcon.single(
              PlacemarkIconStyle(
                image: BitmapDescriptor.fromAssetImage("assets/marker.png"),
                scale: 1.0,
              ),
            ),
            data: "莫斯科红场",
          ),
        ],
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {
              // 移动到莫斯科
              mapController.moveCamera(
                CameraUpdate.newCameraPosition(
                  CameraPosition(
                    target: Point(latitude: 55.75396, longitude: 37.620393),
                    zoom: 15,
                  ),
                ),
              );
            },
            child: Icon(Icons.location_on),
            tooltip: '莫斯科',
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              // 移动到圣彼得堡
              mapController.moveCamera(
                CameraUpdate.newCameraPosition(
                  CameraPosition(
                    target: Point(latitude: 59.934280, longitude: 30.335099),
                    zoom: 15,
                  ),
                ),
              );
            },
            child: Icon(Icons.location_city),
            tooltip: '圣彼得堡',
          ),
        ],
      ),
    );
  }
}