Flutter地图展示插件yjy_google_maps_flutter的使用

A Flutter插件，用于在应用中展示Google Maps。

使用说明

要使用此插件，在您的pubspec.yaml文件中添加yjy_google_maps_flutter作为依赖项。

dependencies:
  yjy_google_maps_flutter: ^版本号

入门指南

获取API密钥

1. 在Google Cloud Console中获取API密钥。
2. 启用Google Maps SDK以支持各个平台：
   • 选择您要启用Google Maps的项目。
   • 在菜单中选择"Google Maps"，然后选择"APIs"。
   • 对于Android，选择"Maps SDK for Android"并启用。
   • 对于iOS，选择"Maps SDK for iOS"并启用。
   • 对于Web，启用"Maps JavaScript API"。

更多详情请参阅Google Maps Platform入门指南。

Android配置

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

android {
    defaultConfig {
        minSdkVersion 20
    }
}

1. 在android/app/src/main/AndroidManifest.xml中指定API密钥：

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

iOS配置

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

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：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

添加地图到Widget树

现在可以在Widget树中添加GoogleMap小部件。确保将其放在具有限定大小的Widget中，否则会导致Flutter异常。

示例代码

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

import 'package:flutter/material.dart';
import 'package:yjy_google_maps_flutter_platform_interface/google_maps_flutter_platform_interface.dart';

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

  [@override](/user/override)
  State<MapSample> createState() => MapSampleState();
}

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

  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](/user/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));
  }
}

void main() {
  runApp(const MaterialApp(home: MapSample()));
}