Flutter地图展示插件google_maps_flutter的使用

Google Maps for Flutter

google_maps_flutter 是一个Flutter插件，提供了一个Google Maps小部件。

开始使用

获取API Key

在 Google Cloud Platform 获取API Key，并为每个平台启用Google Map SDK：

• 访问 Google Developers Console
• 选择或创建项目
• 导航菜单 -> “Google Maps”
• “APIs” 下选择需要启用的服务：
  • Android: 启用 “Maps SDK for Android”
  • iOS: 启用 “Maps SDK for iOS”
  • Web: 启用 “Maps JavaScript API”

确保所有已启用的API都在 “Enabled APIs” 列表中。更多详情请参阅 Google Maps Platform 入门

配置各平台

Android

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

   android {
       defaultConfig {
           minSdkVersion 20
       }
   }
   

2. 在应用清单文件 android/app/src/main/AndroidManifest.xml 中指定你的API Key:

   <manifest ...
     <application ...
       <meta-data android:name="com.google.android.geo.API_KEY"
                  android:value="YOUR KEY HERE"/>
   

iOS

在应用代理文件中指定API Key (ios/Runner/AppDelegate.m 或 ios/Runner/AppDelegate.swift):

• Objective-C代码：

  #include "AppDelegate.h"
  #include "GeneratedPluginRegistrant.h"
  #import "GoogleMaps/GoogleMaps.h"
  
  @implementation AppDelegate
  
  - (BOOL)application:(UIApplication *)application
      didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [GMSServices provideAPIKey:@"YOUR KEY HERE"];
    [GeneratedPluginRegistrant registerWithRegistry:self];
    return [super application:application didFinishLaunchingWithOptions:launchOptions];
  }
  @end
  

• Swift代码：

  import UIKit
  import Flutter
  import GoogleMaps
  
  @UIApplicationMain
  @objc class AppDelegate: FlutterAppDelegate {
    override func application(
      _ application: UIApplication,
      didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
      GMSServices.provideAPIKey("YOUR KEY HERE")
      GeneratedPluginRegistrant.register(with: self)
      return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
  }
  

Web

修改 web/index.html 文件以包含Google Maps JS SDK。详情见 google_maps_flutter_web README

使用示例

下面是一个简单的地图显示示例：

class MapSample extends StatefulWidget {
  const MapSample({super.key});

  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  final Completer<GoogleMapController> _controller = Completer();

  static const CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  static const CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(37.43296265331129, -122.08832357078792),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: _kGooglePlex,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _goToTheLake,
        label: const Text('To the lake!'),
        icon: const Icon(Icons.directions_boat),
      ),
    );
  }

  Future<void> _goToTheLake() async {
    final GoogleMapController controller = await _controller.future;
    await controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
  }
}

这个例子展示了如何创建一个基本的地图视图，并添加了一个浮动按钮用于切换到另一个位置（湖泊）。通过 _controller 可以控制地图的各种属性和行为。