Konfigurowanie projektu Flutter

Zanim skonfigurujesz projekt Flutter, wykonaj czynności wstępne opisane w sekcji Zanim zaczniesz. Gdy włączysz płatności i utworzysz klucz interfejsu API, możesz skonfigurować projekt Flutter, którego będziesz używać do tworzenia aplikacji.

Krok 1. Zainstaluj wymagane oprogramowanie

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

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

Flutter oferuje pakiet Mapy Google dla Flutter jako wtyczkę Flutter.

Utwórz projekt Flutter i dodaj wtyczkę Mapy.

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 pliku 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 internet. Pakiet SDK Map Google nie obsługuje obecnie aplikacji na komputery poza przeglądarką.

Dodaj do tego projektu wtyczkę pakietu Mapy 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 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 określ własny, unikalny ApplicationID.
Zsynchronizuj zmiany w projekcie z Gradle.

iOS

Ustaw minimalną wersję platformy iOS.

Otwórz plik konfiguracyjny ios/Podfile w preferowanym 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 do projektu klucz interfejsu API

W sekcji Zanim zaczniesz wygenerujesz klucz interfejsu API dla swojej aplikacji. Teraz dodaj ten klucz do projektu Flutter. W przypadku Fluttera należy dodać ten klucz interfejsu API do wszystkich platform docelowych: iOS, Androida i internetu.

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

Android

Aby uprościć to zadanie, zalecamy używanie wtyczki Gradle obiektów tajnych na Androida .

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

W Androidzie Studio otwórz plik build.gradle na poziomie głównym i dodaj ten kod do elementu dependencies w sekcji buildscript.

Groovy

buildscript {
    dependencies {
        // ...
        classpath "com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1"
    }
}

Kotlin

buildscript {
    dependencies {
        // ...
        classpath("com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1")
    }
}

Otwórz plik build.gradle na poziomie aplikacji i dodaj ten kod do elementu plugins.

Groovy

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

Kotlin

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

Jeśli używasz Androida Studio, zsynchronizuj projekt z Gradle.
Otwórz plik local.properties w katalogu na poziomie projektu, a następnie dodaj ten kod. Zastąp YOUR_API_KEY swoim kluczem interfejsu API.
```
MAPS_API_KEY=YOUR_API_KEY
```
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 Android, w tym w pakiecie SDK Flutter. Aby zachować zgodność wsteczną, interfejs API obsługuje też nazwę com.google.android.maps.v2.API_KEY. Ta starsza nazwa umożliwia uwierzytelnianie tylko w interfejsie Android Maps API w wersji 2. Aplikacja może określać tylko jedną z nazw metadanych klucza interfejsu API. Jeśli określono obie nazwy, interfejs API zgłosi wyjątek.

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 Android, w tym w pakiecie SDK Flutter. Aby zachować 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ślać tylko jedną z nazw metadanych klucza interfejsu API. Jeśli określono obie nazwy, 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 preferowanym IDE.
Dodaj tę instrukcję importu, aby dodać do aplikacji pakiet Mapy Google dla Flutter:

import GoogleMaps

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

Ukończony plik AppDelegate.swift powinien wyglądać 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 preferowanym IDE.

Dodaj ten tag skryptu w tagu <head>, zastępując YOUR_API_KEY swoim 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.

Pełna sekcja head pliku index.html powinna wyglądać 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 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 wszystkie emulatory lub urządzenia, na których chcesz uruchomić aplikację.
Uruchom aplikację. Powinny się wyświetlić 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, na której chcesz uruchomić aplikację. Za każdym razem, gdy wywołasz polecenie flutter run, Flutter wyświetli te opcje. Jeśli w systemie programistycznym nie jest uruchomiony żaden emulator ani nie jest podłączone urządzenie testowe, Flutter powinien otworzyć Chrome.

Na każdej platformie powinna się wyświetlić 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

Teraz, gdy masz klucz interfejsu API i projekt Flutter, możesz tworzyć i uruchamiać aplikacje. Pakiet Mapy Google dla Flutter zawiera wiele samouczków i przykładowych aplikacji, które pomogą Ci zacząć. Więcej informacji znajdziesz w tych materiałach:

Samouczek Dodawanie mapy ze znacznikiem
Codelabs dla Fluttera z Google Maps Platform
Przykłady kodu w 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 Mapy Google dla Flutter w nowym projekcie

Krok 3. Ustaw wersję platformy

Android

iOS

Krok 4. Dodaj do projektu klucz interfejsu API

Android

Groovy

Kotlin

Groovy

Kotlin

iOS

Sieć

Krok 5. Dodaj mapę

Dalsze kroki

Konfigurowanie projektu Flutter