Zanim skonfigurujesz projekt Flutter, sprawdź, czy spełniasz wymagania wstępne czynności opisane w sekcji Zanim zaczniesz. Po włączeniu płatności i utworzysz klucz interfejsu API, możesz skonfigurować projekt Flutter, którego będziesz używać do tworzyć aplikacje.
Krok 1. Zainstaluj wymagane oprogramowanie
Aby utworzyć projekt za pomocą pakietu Map Google dla Flutter, musisz zainstalować Flutter SDK i skonfiguruj środowisko programistyczne dla platformy docelowej. Sprawdź instalację Flutter .
Krok 2. Zainstaluj w nowym projekcie pakiet Map Google dla Flutter
Flutter oferuje pakiet Map Google dla Flutter jako wtyczkę Flutter.
Utwórz projekt Flutter i dodaj wtyczkę Map.
-
Utwórz nowy projekt Flutter za pomocą metody „flutter create”:
flutter create google_maps_in_flutter --platforms=android,ios,web
Creating project google_maps_in_flutter... [Listing of created files elided] Wrote 127 files. All done!google_maps_in_flutter/lib/main.dart
. Aby uruchomić aplikację, wpisz:cd google_maps_in_flutter
flutter run
-
Dodaj do tego projektu wtyczkę pakietu Map Google dla Flutter.
flutter pub add google_maps_flutter
Resolving dependencies... [Listing of dependencies elided] Changed 14 dependencies!
Krok 3. Ustaw wersję platformy
Android
Ustaw minimalną wersję pakietu SDK na Androida.
- Otwórz plik konfiguracyjny
android/app/build.gradle
w preferowanym IDE. - Zmień wartość
android.defaultConfig.minSdkVersion
na21
:android { //... defaultConfig { applicationId "com.example.google_maps_in_flutter" minSdkVersion 21 // Set to 21 targetSdkVersion flutter.targetSdkVersion versionCode flutterVersionCode.toInteger() versionName flutterVersionName } //... }
- Podczas konfigurowania
defaultConfig
określ własny unikalny identyfikator ApplicationID. - Zapisz plik i zsynchronizuj zmiany w projekcie przy użyciu Gradle.
iOS
Ustaw minimalną wersję platformy iOS.
- Otwórz plik konfiguracyjny
ios/Podfile
w preferowanym IDE. - Dodaj te wiersze na początku tego pliku Podfile:
# Set platform to 14.0 to enable latest Google Maps SDK platform :ios, '14.0'
Krok 4. Dodaj klucz interfejsu API do projektu
W sekcji Zanim zaczniesz udało Ci się wygenerować klucz interfejsu API dla swojej aplikacji. Teraz dodaj klucz do projektu Flutter. W przypadku Flutter ten klucz interfejsu API należy dodać do wszystkie platformy docelowe: iOS, Android i internet.
W poniższych przykładach zastąp YOUR_API_KEY
swoim kluczem interfejsu API.
Android
Aby usprawnić to zadanie, zalecamy skorzystanie z Wtyczka Gradle obiektów tajnych na Androida.
Aby zainstalować wtyczkę Gradle obiektów tajnych na Androida w projekcie Map Google:
-
W Android Studio otwórz
build.gradle.kts
lubbuild.gradle
najwyższego poziomu. i dodaj ten kod do elementudependencies
podbuildscript
Kotlin
buildscript { dependencies { classpath("com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1") } }
Zakręcony
buildscript { dependencies { classpath "com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1" } }
-
Otwórz plik
build.gradle.kts
lubbuild.gradle
na poziomie modułu i dodaj ten kod do elementuplugins
.Kotlin
plugins { // ... id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin") }
Zakręcony
plugins { // ... id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin' }
- W pliku
build.gradle.kts
lubbuild.gradle
na poziomie modułu sprawdź, że wartościtargetSdk
icompileSdk
są ustawione do 34. - Zapisz plik i zsynchronizować projekt z Gradle.
-
Otwórz plik
secrets.properties
w katalogu najwyższego poziomu, a następnie dodaj atrybut tego kodu. ZastąpYOUR_API_KEY
swoim kluczem interfejsu API. Przechowuj klucz w tym pliku ponieważsecrets.properties
nie jest sprawdzany w kontroli wersji systemu.MAPS_API_KEY=YOUR_API_KEY
- Zapisz plik.
-
Utwórz plik
local.defaults.properties
w katalogu najwyższego poziomu, tak samo jako pliksecrets.properties
, a potem dodaj podany niżej kod.MAPS_API_KEY=DEFAULT_API_KEY
Ten plik ma na celu udostępnienie zapasowej lokalizacji klucza interfejsu API, jeśli plik Nie znaleziono pliku
secrets.properties
, więc kompilacje nie zawierają błędów. Może się tak zdarzyć, jeśli sklonujesz aplikację z systemu kontroli wersji, który pomijasecrets.properties
oraz nie utworzyłeś jeszcze lokalnie plikusecrets.properties
, który umożliwi przesyłanie klucz interfejsu API. - Zapisz plik.
-
W pliku
AndroidManifest.xml
otwórzcom.google.android.geo.API_KEY
i zaktualizujandroid:value attribute
. Jeśli tag<meta-data>
nie istnieje, utwórz go jako element podrzędny tagu<application>
.<meta-data android:name="com.google.android.geo.API_KEY" android:value="${MAPS_API_KEY}" />
Note:
com.google.android.geo.API_KEY
is the recommended metadata name for the API key. A key with this name can be used to authenticate to multiple Google Maps-based APIs on the Android platform, including the Flutter SDK. For backwards compatibility, the API also supports the namecom.google.android.maps.v2.API_KEY
. This legacy name allows authentication to the Android Maps API v2 only. An application can specify only one of the API key metadata names. If both are specified, the API throws an exception. -
In Android Studio, open your module-level
build.gradle.kts
orbuild.gradle
file and edit thesecrets
property. If thesecrets
property does not exist, add it.Edit the properties of the plugin to set
propertiesFileName
tosecrets.properties
, setdefaultPropertiesFileName
tolocal.defaults.properties
, and set any other properties.Kotlin
secrets { // To add your Maps API key to this project: // 1. If the secrets.properties file does not exist, create it in the same folder as the local.properties file. // 2. Add this line, where YOUR_API_KEY is your API key: // MAPS_API_KEY=YOUR_API_KEY propertiesFileName = "secrets.properties" // A properties file containing default secret values. This file can be // checked in version control. defaultPropertiesFileName = "local.defaults.properties" // Configure which keys should be ignored by the plugin by providing regular expressions. // "sdk.dir" is ignored by default. ignoreList.add("keyToIgnore") // Ignore the key "keyToIgnore" ignoreList.add("sdk.*") // Ignore all keys matching the regexp "sdk.*" }
Zakręcony
secrets { // To add your Maps API key to this project: // 1. If the secrets.properties file does not exist, create it in the same folder as the local.properties file. // 2. Add this line, where YOUR_API_KEY is your API key: // MAPS_API_KEY=YOUR_API_KEY propertiesFileName = "secrets.properties" // A properties file containing default secret values. This file can be // checked in version control. defaultPropertiesFileName = "local.defaults.properties" // Configure which keys should be ignored by the plugin by providing regular expressions. // "sdk.dir" is ignored by default. ignoreList.add("keyToIgnore") // Ignore the key "keyToIgnore" ignoreList.add("sdk.*") // Ignore all keys matching the regexp "sdk.*" }
Uwaga: jak pokazano powyżej, Zalecana nazwa metadanych to
com.google.android.geo.API_KEY
dla klucza interfejsu API. Klucz o tej nazwie może być używany do uwierzytelniania w wielu Interfejsy API oparte na Mapach Google na platformie Android, w tym SDK Flutter. Aby zapewnić zgodność wsteczną, interfejs API obsługuje nazwęcom.google.android.maps.v2.API_KEY
. To dziedzictwo name umożliwia uwierzytelnianie tylko dla interfejsu Android Maps API v2. Aplikacja może określać tylko jedną z nazw metadanych klucza interfejsu API. Jeśli określono oba te parametry, zgłasza wyjątek.iOS
Dodaj klucz interfejsu API do pliku
AppDelegate.swift
.- Otwórz plik
ios/Runner/AppDelegate.swift
w projekcie Flutter w preferowanym IDE. - Aby dodać pakiet Map Google dla Flutter do swojej aplikacji, dodaj następujące oświadczenie dotyczące importu:
- Dodaj interfejs API do metody
application(_:didFinishLaunchingWithOptions:)
, zastępując klucz interfejsu API wartością YOUR_API_KEY:GMSServices.provideAPIKey("YOUR_API_KEY")
- Zapisz i zamknij plik
AppDelegate.swift
.
import GoogleMaps
Gotowy plik
AppDelegate.swift
powinien wyglądać mniej więcej tak:import UIKit import Flutter import GoogleMaps // Add this import @UIApplicationMain @objc class AppDelegate: FlutterAppDelegate { override func application( _ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? ) -> Bool { GeneratedPluginRegistrant.register(with: self) // TODO: Add your Google Maps API key GMSServices.provideAPIKey("YOUR_API_KEY") return super.application(application, didFinishLaunchingWithOptions: launchOptions) } }
Przeglądarka
Dodaj klucz interfejsu API do pliku aplikacji
index.html
.- Otwórz plik
web/index.html
w projekcie Flutter w preferowanym IDE. - Dodaj ten tag skryptu do tagu
<head>
, zastępując klucz interfejsu APIYOUR_API_KEY
.<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
- Zapisz i zamknij plik
index.html
.Pełna sekcja
head
elementuindex.html
powinna wyglądać mniej więcej tak:<head> <base href="/"> <meta charset="UTF-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="description" content="A new Flutter project."> <!-- iOS meta tags & icons --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="google_maps_in_flutter"> <link rel="apple-touch-icon" href="icons/Icon-192.png"> <script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script> <title>google_maps_in_flutter</title> <link rel="manifest" href="manifest.json"> </head>
Krok 5. Dodaj mapę
Ten kod pokazuje, jak dodać prostą mapę do nowej aplikacji Flutter.
- Otwórz plik
lib/main.dart
w projekcie Flutter w preferowanym IDE. - Dodaj lub zaktualizuj metody w domyślnej głównej metodzie aplikacji, aby utworzyć i zainicjować instancję
mapController
.import 'package:flutter/material.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; void main() => runApp(const MyApp()); class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { late GoogleMapController mapController; final LatLng _center = const LatLng(-33.86, 151.20); void _onMapCreated(GoogleMapController controller) { mapController = controller; } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('Maps Sample App'), backgroundColor: Colors.green[700], ), body: GoogleMap( onMapCreated: _onMapCreated, initialCameraPosition: CameraPosition( target: _center, zoom: 11.0, ), ), ), ); } }
- Uruchom dowolne emulatory lub urządzenia, na których chcesz uruchamiać aplikację.
- Uruchom swoją aplikację. Zostaną wyświetlone dane wyjściowe podobne do tych:
flutter run
Multiple devices found: Android phone (mobile) • emulator-5554 • android-arm64 • Android 13 (API 33) (emulator) iPhone (mobile) • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-2 (simulator) Chrome (web) • chrome • web-javascript • Google Chrome 108.0.5359.124 [1]: Android phone [2]: iPhone [3]: Chrome Please choose one (To quit, press "q/Q"):Wpisz numer platformy, którą chcesz uruchomić. Przy każdym wywołaniu funkcji
flutter run
Flutter wyświetli te opcje. Jeśli w Twoim systemie programistycznym nie ma uruchomionego emulatora ani połączonego urządzenia testowego, Flutter powinien otworzyć Chrome.Każda platforma powinna wyświetlać mapę wyśrodkowaną na Sydney w Australii. Jeśli nie widzisz mapy, sprawdź, czy klucz interfejsu API został dodany do odpowiedniego projektu docelowego.
Dalsze kroki
Po utworzeniu klucza interfejsu API i projektu Flutter możesz tworzyć i uruchamiać aplikacje. Pakiet Map Google dla Flutter zawiera wiele samouczków i przykładowych aplikacji, które może ułatwić Ci rozpoczęcie pracy. Więcej informacji znajdziesz w tych materiałach:
- Samouczek Dodawanie mapy za pomocą znacznika
- Ćwiczenia z programowania dla Flutter z Google Maps Platform
- Przykładowy kod w GitHubie
- Otwórz plik
O ile nie stwierdzono inaczej, treść tej strony jest objęta licencją Creative Commons – uznanie autorstwa 4.0, a fragmenty kodu są dostępne na licencji Apache 2.0. Szczegółowe informacje na ten temat zawierają zasady dotyczące witryny Google Developers. Java jest zastrzeżonym znakiem towarowym firmy Oracle i jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2024-09-05 UTC.