Flutter地图服务插件tencent_map_flutter的使用

Flutter地图服务插件tencent_map_flutter的使用

插件介绍

tencent_map_flutter 是一个为Flutter提供的插件，用于在应用中集成腾讯地图。它提供了TencentMap widget，支持Android 21+ 和iOS 12+。

使用方法

要使用此插件，请将 tencent_map_flutter 添加到您的 pubspec.yaml 文件中的依赖项中。

dependencies:
  tencent_map_flutter: ^x.x.x

登录和获取API密钥

登录腾讯地图服务控制台，在 https://lbs.qq.com/dev/console/application/mine 获取API密钥。

1. 前往 Tencent Map Service Console，展开“应用管理”菜单并选择“我的应用”。
2. 点击右侧的“创建应用”，如果已经创建了应用，则可以直接选择“添加密钥”。
3. 在面板中勾选“Map SDK”功能，并可选地在下方输入框中填写授权包名（密钥只能用于对应包名的应用）。

Android配置

1. 在 example/android/app/build.gradle 中设置 minSdkVersion：

   android {
       defaultConfig {
           minSdkVersion 21
       }
   }
   

   这意味着应用仅适用于运行Android SDK 21或更高版本的用户。

2. 在 example/android/app/src/main/AndroidManifest.xml 中指定你的API密钥：

   <manifest ...>
     <application ...>
       <meta-data
         android:name="TencentMapSDK"
         android:value="YOUR KEY HERE"/>
   </code></pre>
   

iOS配置

在 ios/Runner/AppDelegate.m 或 ios/Runner/AppDelegate.swift 中指定你的API密钥：

Objective-C代码示例：

#import "AppDelegate.h"
#import "GeneratedPluginRegistrant.h"
#import <QMapKit/QMapKit.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [QMapServices sharedServices].APIKey = @"YOUR KEY HERE";
    [GeneratedPluginRegistrant registerWithRegistry:self];
    return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

Swift代码示例：

import UIKit
import Flutter
import QMapKit

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    QMapServices.shared().apiKey = "YOUR KEY HERE"
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

示例代码

以下是一个完整的示例应用，展示了如何在Flutter应用中使用tencent_map_flutter插件。

class MapTypesPage extends StatefulWidget {
  const MapTypesPage({Key? key}) : super(key: key);

  static const title = 'tecenc_map_example';

  [@override](/user/override)
  State<MapTypesPage> createState() => _MapTypesPageState();
}

class _MapTypesPageState extends State<MapTypesPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(MapTypesPage.title),
      ),
      body: TencentMap(),
    );
  }
}

主程序

import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:tencent_map_flutter/tencent_map_flutter.dart';

import 'pages/add_remove_marker.dart';
import 'pages/camera_move.dart';
import 'pages/camera_region_move.dart';
import 'pages/flutter_marker.dart';
import 'pages/map_controls.dart';
import 'pages/map_controls_position.dart';
import 'pages/map_events.dart';
import 'pages/map_layers.dart';
import 'pages/map_location.dart';
import 'pages/map_logo_scale.dart';
import 'pages/map_restriction.dart';
import 'pages/map_types.dart';

void main() {
  runApp(const App());
}

/// 主程序
class App extends StatefulWidget {
  /// 主程序构造函数
  const App({Key? key}) : super(key: key);

  [@override](/user/override)
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  [@override](/user/override)
  void initState() {
    super.initState();
    TencentMap.init(agreePrivacy: true);
    requestLocationPermission();
  }

  Future<void> requestLocationPermission() async {
    var status = await Permission.location.status;
    if (status != PermissionStatus.granted) {
      await Permission.location.request();
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      child: MaterialApp(
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: const ColorScheme.light(),
        ),
        darkTheme: ThemeData(
          useMaterial3: true,
          colorScheme: const ColorScheme.dark(),
        ),
        home: Scaffold(
          body: ListView(children: [
            Item(
              MapTypesPage.title,
              (_) => const MapTypesPage(),
            ),
            Item(
              CameraMovePage.title,
              (_) => const CameraMovePage(),
            ),
            Item(
              CameraRegionMovePage.title,
              (_) => const CameraRegionMovePage(),
            ),
            Item(
              MapRestrictionPage.title,
              (_) => const MapRestrictionPage(),
            ),
            Item(
              MapLayersPage.title,
              (_) => const MapLayersPage(),
            ),
            Item(
              MapControlsPage.title,
              (_) => const MapControlsPage(),
            ),
            Item(
              MapControlsPositionPage.title,
              (_) => const MapControlsPositionPage(),
            ),
            Item(
              MapLogoScalePage.title,
              (_) => const MapLogoScalePage(),
            ),
            Item(
              MapEventsPage.title,
              (_) => const MapEventsPage(),
            ),
            Item(
              UserLocationPage.title,
              (_) => const UserLocationPage(),
            ),
            Item(
              AddRemoveMarkerPage.title,
              (_) => const AddRemoveMarkerPage(),
            ),
            Item(
              FlutterMarkerPage.title,
              (_) => const FlutterMarkerPage(),
            ),
          ]),
        ),
      ),
    );
  }
}

/// 示例项目
class Item extends StatelessWidget {
  /// 示例标题
  final String title;

  /// 示例创建器
  final Widget Function(BuildContext) Function(BuildContext) builder;

  /// 示例项目构造函数
  const Item(this.title, this.builder, {Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title),
      onTap: () => Navigator.push(context, MaterialPageRoute(builder: builder)),
    );
  }
}