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”:
Kod Twojej aplikacji jest w języku: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: Ta aplikacja jest kierowana na iOS, Androida i internet. Obecnie pakiet SDK Map Google nie obsługuje aplikacji komputerowych innych niż przeglądarka.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 konfiguracji
android/app/build.gradle
w wybranym środowisku 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 Mapy 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 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}" />
Uwaga: 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. -
W Android Studio otwórz
build.gradle.kts
na poziomie modułu lubbuild.gradle
i edytuj właściwośćsecrets
. Jeśli Właściwośćsecrets
nie istnieje. Dodaj ją.Edytuj właściwości wtyczki, aby ustawić
propertiesFileName
nasecrets.properties
, ustawdefaultPropertiesFileName
nalocal.defaults.properties
i ustaw pozostałe właściwości.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 widać powyżej,com.google.android.geo.API_KEY
to zalecana nazwa metadanych dla klucza 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 na Twoim systemie deweloperskim nie ma uruchomionego emulatora ani podłą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. Aby dowiedzieć się więcej, zapoznaj się z tymi materiałami:
- Samouczek Dodawanie mapy za pomocą znacznika
- Codelab dla Fluttera z Google Maps Platform
- Przykładowy kod w GitHubie