Flutter地图展示插件yandex_mapkit_community的使用

Flutter地图展示插件yandex_mapkit_community的使用

插件介绍

yandex_mapkit_community 是一个用于在iOS和Android上显示Yandex地图的Flutter插件。该插件是Yandex MapKit库的一个开发迭代版本，旨在通过活跃的社区贡献来修复现有错误并引入新功能。

支持情况

平台 Android iOS
支持 SDK 21+ iOS 12+

版权声明

此项目使用了Yandex Mapkit，属于Yandex所有。 使用Mapkit时，请参考这些条款。

开始使用

生成API密钥
  1. 前往 https://developer.tech.yandex.com
  2. 创建一个 MapKit mobile SDK 密钥
初始化iOS
  1. 在 ios/Runner/AppDelegate.swift 中添加 import YandexMapsMobile
  2. 在 func application 方法中添加 YMKMapKit.setApiKey("YOUR_API_KEY")
  3. 在应用委托方法中指定你的API密钥
  4. 在 ios/Podfile 中取消注释 platform :ios, '9.0' 并更改到 platform :ios, '12.0'
import UIKit
import Flutter
import YandexMapsMobile

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        YMKMapKit.setLocale("YOUR_LOCALE") // 您首选的语言。非必需，默认为系统语言
        YMKMapKit.setApiKey("YOUR_API_KEY") // 您生成的API密钥
        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}
初始化Android
  1. 在 android/app/build.gradle 中添加依赖 implementation 'com.yandex.android:maps.mobile:4.2.2-full'
  2. 在 android/app/src/main/AndroidManifest.xml 中添加权限 <uses-permission android:name="android.permission.INTERNET"/> 和 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  3. 在 android/app/src/main/.../MainActivity.java 或 android/app/src/main/.../MainActivity.kt 中添加 import com.yandex.mapkit.MapKitFactory;
  4. 在 onCreate 方法中添加 MapKitFactory.setApiKey("YOUR_API_KEY");
  5. 在应用委托方法中指定你的API密钥
dependencies {
    implementation 'com.yandex.android:maps.mobile:4.2.2-full'
}

import androidx.annotation.NonNull;

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.GeneratedPluginRegistrant;

import com.yandex.mapkit.MapKitFactory;

public class MainActivity extends FlutterActivity {
    @Override
    public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        MapKitFactory.setLocale("YOUR_LOCALE"); // 您首选的语言。非必需，默认为系统语言
        MapKitFactory.setApiKey("YOUR_API_KEY"); // 您生成的API密钥
        super.configureFlutterEngine(flutterEngine);
    }
}

import androidx.annotation.NonNull
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant
import com.yandex.mapkit.MapKitFactory

class MainActivity : FlutterActivity() {
    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        MapKitFactory.setLocale("YOUR_LOCALE") // 您首选的语言。非必需，默认为系统语言
        MapKitFactory.setApiKey("YOUR_API_KEY") // 您生成的API密钥
        super.configureFlutterEngine(flutterEngine)
    }
}
使用示例

有关使用示例，请参阅 示例 app

补充说明

YandexMapkit始终仅与一种语言一起工作。 由于原生限制，在应用程序启动后无法更改。

Android

混合组成 默认情况下，Android视图使用 Hybrid Composition 渲染。 要使用 YandexMap 控件在Android上渲染虚拟显示（旧组成），请设置 AndroidYandexMap.useAndroidViewSurface 为false。 将其放在任何代码之前，以使用 YandexMap 控件。

AndroidYandexMap.useAndroidViewSurface = false;

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

1 回复

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


当然，下面是一个关于如何在Flutter中使用yandex_mapkit_community插件来展示Yandex地图的代码示例。这个插件允许你在Flutter应用中集成Yandex地图服务。

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

dependencies:
  flutter:
    sdk: flutter
  yandex_mapkit_community: ^最新版本号  # 请替换为实际最新版本号

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

接下来，你需要在Yandex开发者控制台（https://developer.yandex.com/）创建一个项目并获取API密钥。

下面是一个完整的Flutter应用示例，展示如何使用yandex_mapkit_community插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: YandexMapScreen(),
    );
  }
}

class YandexMapScreen extends StatefulWidget {
  @override
  _YandexMapScreenState createState() => _YandexMapScreenState();
}

class _YandexMapScreenState extends State<YandexMapScreen> {
  late YandexMapController _yandexMapController;

  @override
  void initState() {
    super.initState();
    // 初始化YandexMapController
    _yandexMapController = YandexMapController(
      apiKey: '你的Yandex API密钥',  // 请替换为你的实际API密钥
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Yandex Map Example'),
      ),
      body: YandexMap(
        controller: _yandexMapController,
        options: YandexMapOptions(
          cameraPosition: YandexCameraPosition(
            target: YandexLatLng(55.755826, 37.617300),  // 莫斯科的中心坐标
            zoom: 14.0,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _yandexMapController.dispose();
    super.dispose();
  }
}

在这个示例中：

  1. 我们创建了一个Flutter应用，并在pubspec.yaml中添加了yandex_mapkit_community依赖。
  2. 在YandexMapScreen类中，我们初始化了一个YandexMapController对象，并传递了Yandex API密钥。
  3. 我们使用YandexMap小部件来显示地图，并通过YandexMapOptions设置初始的相机位置和缩放级别。
  4. 在dispose方法中，我们调用了_yandexMapController.dispose()来释放资源。

请确保你已经替换了你的Yandex API密钥为你在Yandex开发者控制台获取的实际API密钥。

这个示例展示了如何使用yandex_mapkit_community插件在Flutter应用中展示Yandex地图。你可以根据需要进一步自定义和扩展这个示例。

回到顶部