Google używa technologii AI do tłumaczenia treści na Twój preferowany język. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

Konfigurowanie projektu Flutter

Zanim skonfigurujesz projekt Flutter, wykonaj czynności wstępne opisane w sekcji Zanim zaczniesz. Po włączeniu płatności i utworzeniu klucza interfejsu API możesz skonfigurować projekt Flutter, którego używasz do tworzenia aplikacji.

Krok 1. Zainstaluj wymagane oprogramowanie

Aby utworzyć projekt za pomocą pakietu Mapy Google we Flutterze, musisz zainstalować pakiet Flutter SDK i skonfigurować środowisko programistyczne dla platformy docelowej. Szczegółowe informacje znajdziesz w przewodniku po instalacji Fluttera.

Krok 2. Zainstaluj pakiet Map Google dla Flutter w nowym projekcie

Flutter oferuje pakiet Map Google dla Fluttera jako wtyczkę Fluttera.

utworzyć projekt Flutter i dodać wtyczkę Map,

Utwórz nowy projekt Flutter za pomocą polecenia `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!
```
Kod aplikacji znajduje się w katalogu google_maps_in_flutter/lib/main.dart. Aby uruchomić aplikację, wpisz:
```
  cd google_maps_in_flutter
  flutter run
```
Ta aplikacja jest przeznaczona na iOS, Androida i przeglądarki. Pakiet SDK Map Google nie obsługuje obecnie aplikacji komputerowych poza przeglądarką.

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 preferowanym środowisku IDE.

Zmień wartość android.defaultConfig.minSdkVersion na 21:

  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 podaj własny unikalny identyfikator ApplicationID.
Zsynchronizuj zmiany w projekcie z Gradle.

iOS

Ustaw minimalną wersję platformy iOS.

Otwórz plik konfiguracji ios/Podfile w preferowanym środowisku IDE.

Dodaj te wiersze na początku 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 wygenerowano klucz interfejsu API dla aplikacji. Teraz dodaj ten klucz do projektu Flutter. W przypadku Fluttera musisz dodać ten klucz interfejsu API do wszystkich platform docelowych: iOS, Androida i internetu.

W poniższych przykładach zastąp YOUR_API_KEY swoim kluczem interfejsu API.

Android

Aby uprościć to zadanie, zalecamy użycie wtyczki Gradle do obsługi obiektów tajnych na Androidzie.

Aby zainstalować wtyczkę Gradle obiektów tajnych dla Androida i zapisać klucz interfejsu API:

W Android Studio otwórz plik build.gradle.kts lub build.gradle najwyższego poziomu i dodaj ten kod do bloku plugins.

Kotlin

plugins {
    // ...
    id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin") version "2.0.1" apply false
}

Zakręcony

plugins {
    // ...
    id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin' version '2.0.1' apply false
}

Otwórz plik build.gradle.kts lub build.gradle na poziomie modułu i dodaj ten kod do elementu plugins.

Kotlin

plugins {
    id("com.android.application")
    // ...
    id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin")
}

Zakręcony

plugins {
    id 'com.android.application'
    // ...
    id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin'
}

Jeśli używasz Android Studio, zsynchronizuj projekt z Gradle.
Otwórz plik secrets.properties w katalogu najwyższego poziomu i dodaj podany niżej kod. Zastąp YOUR_API_KEY kluczem interfejsu API. Dodaj secrets.properties do pliku .gitignore (lub w inny sposób wyklucz go z systemu kontroli wersji), aby nie sprawdzać klucza interfejsu API w systemie kontroli wersji.
Uwaga: jeśli plik secrets.properties nie istnieje, utwórz go w tym samym folderze co plik local.properties.
```
MAPS_API_KEY=YOUR_API_KEY
```
Utwórz plik local.defaults.properties w katalogu najwyższego poziomu, czyli w tym samym folderze, w którym znajduje się plik secrets.properties, a następnie dodaj podany niżej kod.

Uwaga: wpisz kod w wyświetlonej postaci. Nie zastępuj DEFAULT_API_KEY kluczem interfejsu API.
```
MAPS_API_KEY=DEFAULT_API_KEY
```
Ten plik służy do podania zapasowej lokalizacji klucza interfejsu API, jeśli nie uda się znaleźć pliku secrets.properties, aby nie doszło do niepowodzenia kompilacji. Może się tak zdarzyć, jeśli sklonujesz aplikację z systemu kontroli wersji, który pomija plik secrets.properties, i nie utworzysz jeszcze lokalnie pliku secrets.properties, aby podać klucz interfejsu API.
W pliku AndroidManifest.xml przejdź do com.google.android.geo.API_KEY i zaktualizuj atrybut android:value w ten sposób:
```
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" />
    
```
Uwaga: com.google.android.geo.API_KEY to zalecana nazwa metadanych klucza interfejsu API. Klucz o tej nazwie może służyć do uwierzytelniania w wielu interfejsach API opartych na Mapach Google na platformie Androida, w tym w pakiecie Flutter SDK. Ze względu na zgodność wsteczną interfejs API obsługuje też nazwę com.google.android.maps.v2.API_KEY. Ta starsza nazwa umożliwia uwierzytelnianie tylko w interfejsie API Map Google dla Androida w wersji 2. Aplikacja może określić tylko jedną z nazw metadanych klucza interfejsu API. Jeśli podasz oba, interfejs API zgłosi wyjątek.

W Android Studio otwórz plik build.gradle.kts lub build.gradle na poziomie modułu 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 na "secrets.properties", defaultPropertiesFileName na "local.defaults.properties" i skonfigurować inne 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 root directory (the same folder as the root 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"
}

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 root directory (the same folder as the root 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"
}

Uwaga: jak pokazano powyżej, com.google.android.geo.API_KEY to zalecana nazwa metadanych klucza interfejsu API. Klucz o tej nazwie może służyć do uwierzytelniania w wielu interfejsach API opartych na Mapach Google na platformie Androida, w tym w pakiecie Flutter SDK. Ze względu na zgodność wsteczną interfejs API obsługuje też nazwę com.google.android.maps.v2.API_KEY. Ta starsza nazwa umożliwia uwierzytelnianie tylko w interfejsie API Map Google na Androida w wersji 2. Aplikacja może określić tylko jedną z nazw metadanych klucza interfejsu API. Jeśli podasz oba, interfejs API zgłosi wyjątek.

iOS

Dodaj klucz interfejsu API do pliku AppDelegate.swift.

Otwórz plik ios/Runner/AppDelegate.swift w projekcie Flutter w wybranym środowisku IDE.
Dodaj poniższą instrukcję importu, aby dodać do aplikacji pakiet Map Google dla Fluttera:

import GoogleMaps

Dodaj interfejs API do metody application(_:didFinishLaunchingWithOptions:), zastępując YOUR_API_KEY kluczem interfejsu API:
```
GMSServices.provideAPIKey("YOUR_API_KEY")
```
Zapisz i zamknij plik AppDelegate.swift.

Uzupełniony 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)
  }
}

Sieć

Dodaj klucz interfejsu API do pliku aplikacji index.html.

Otwórz plik web/index.html w projekcie Flutter w wybranym środowisku IDE.

Dodaj ten tag skryptu wewnątrz tagu <head>, zastępując YOUR_API_KEY kluczem interfejsu API.

<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.

Kompletna sekcja head w pliku index.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ę

Poniższy kod pokazuje, jak dodać prostą mapę do nowej aplikacji we Flutterze.

Otwórz plik lib/main.dart w projekcie Flutter w wybranym środowisku IDE.

Dodaj lub zaktualizuj metody w domyślnej metodzie głównej 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 emulatory lub urządzenia, na których chcesz uruchomić aplikację.
Uruchom 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ć. Za każdym razem, gdy wywołasz flutter run, Flutter wyświetli te opcje. Jeśli w systemie programistycznym nie działa emulator ani nie jest podłączone urządzenie testowe, Flutter powinien otworzyć Chrome.

Na każdej platformie powinna wyświetlić się mapa wyśrodkowana na Sydney w Australii. Jeśli nie widzisz mapy, sprawdź, czy klucz interfejsu API został dodany do odpowiedniego projektu docelowego.

Dalsze kroki

Gdy masz już klucz interfejsu API i projekt Flutter, możesz tworzyć i uruchamiać aplikacje. Pakiet Map Google na Fluttera zawiera wiele samouczków i przykładowych aplikacji, które ułatwią Ci rozpoczęcie pracy. Więcej informacji znajdziesz w tych materiałach:

Samouczek Dodawanie mapy ze znacznikiem
Codelabs dotyczące Fluttera i Google Maps Platform
Przykładowe kody na GitHubie

Konfigurowanie projektu Flutter Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Krok 1. Zainstaluj wymagane oprogramowanie

Krok 2. Zainstaluj pakiet Map Google dla Flutter w nowym projekcie

Krok 3. Ustaw wersję platformy

Android

iOS

Krok 4. Dodaj klucz interfejsu API do projektu

Android

Kotlin

Zakręcony

Kotlin

Zakręcony

Kotlin

Zakręcony

iOS

Sieć

Krok 5. Dodaj mapę

Dalsze kroki

Konfigurowanie projektu Flutter