1. Einführung
Flutter ist das SDK von Google für mobile Apps, mit dem Sie in Rekordzeit hochwertige native Apps für iOS und Android erstellen können.
Mit dem Google Maps Flutter-Plug-in können Sie Ihrer Anwendung Karten hinzufügen, die auf Google Maps-Daten basieren. Das Plug-in steuert den Zugriff auf die Google Maps-Server, die Kartenanzeige und die Reaktion auf Nutzergesten wie Klicks und Ziehbewegungen automatisch. Sie können der Karte auch Markierungen hinzufügen. Diese Objekte liefern zusätzliche Informationen zu Standorten auf der Karte und ermöglichen dem Nutzer, mit der Karte zu interagieren.
Inhalt
In diesem Codelab erstellen Sie mithilfe des Flutter SDK eine mobile App mit einer Google Maps-Karte. Mit der Anwendung können Sie Folgendes tun:
|
|
Was ist Flutter?
Flutter hat drei Hauptfunktionen.
- Schnelle Entwicklung: Mit Stateful Hot Refresh können Sie Ihre Android- und iOS-Apps in Millisekunden entwickeln.
- Ausdrucksstark und flexibel: Funktionen schnell bereitstellen, wobei der Schwerpunkt auf nativen Endnutzern liegt.
- Native Leistung unter iOS und Android: Die Widgets von Flutter beinhalten alle wichtigen Plattformunterschiede, z. B. Scrollen, Navigation, Symbole und Schriftarten, um eine volle native Leistung zu bieten.
Google Maps bietet:
- 99% weltweite Abdeckung: Sie können Karten mit zuverlässigen, umfassenden Daten für mehr als 200 Länder und Gebiete erstellen.
- 25 Millionen Aktualisierungen täglich: Sie können sich auf genaue Standortinformationen in Echtzeit verlassen.
- 1 Milliarde monatlich aktive Nutzer: Zuverlässige Skalierung mit der und Infrastruktur.
In diesem Codelab erfahren Sie, wie Sie Google Maps in einer Flutter-App für iOS und Android erstellen.
Aufgaben in diesem Lab
- Hier erfahren Sie, wie Sie eine neue Flutter-Anwendung erstellen.
- Google Maps Flutter-Plug-in konfigurieren
- So fügen Sie einer Karte mithilfe von Standortdaten aus einem Webdienst Markierungen hinzu.
In diesem Codelab erfahren Sie, wie Sie einer Flutter-App eine Google-Karte hinzufügen. Irrelevante Konzepte und Codeblöcke werden nicht berücksichtigt und können einfach kopiert und eingefügt werden.
Was möchten Sie in diesem Codelab lernen?
<ph type="x-smartling-placeholder">2. Flutter-Umgebung einrichten
Für dieses Lab benötigen Sie zwei Softwareprogramme: das Flutter SDK und einen Editor. In diesem Codelab wird Android Studio vorausgesetzt. Sie können aber Ihren bevorzugten Editor verwenden.
Sie können dieses Codelab auf einem der folgenden Geräte ausführen:
- Ein physisches Gerät (Android oder iOS), das mit Ihrem Computer verbunden ist und sich im Entwicklermodus befindet.
- Der iOS-Simulator Dafür ist die Installation von Xcode-Tools erforderlich.
- Der Android-Emulator Hierfür ist eine Einrichtung in Android Studio erforderlich.
3. Erste Schritte
Erste Schritte mit Flutter
Die einfachste Möglichkeit, Flutter zu nutzen, ist die Verwendung des Befehlszeilentools von Flutter, um den gesamten erforderlichen Code für einen einfachen Einstieg zu erstellen.
$ flutter create google_maps_in_flutter --platforms android,ios,web Creating project google_maps_in_flutter... Resolving dependencies in `google_maps_in_flutter`... Downloading packages... Got dependencies in `google_maps_in_flutter`. Wrote 81 files. All done! You can find general documentation for Flutter at: https://docs.flutter.dev/ Detailed API documentation is available at: https://api.flutter.dev/ If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev In order to run your application, type: $ cd google_maps_in_flutter $ flutter run Your application code is in google_maps_in_flutter/lib/main.dart.
Google Maps Flutter-Plug-in als Abhängigkeit hinzufügen
Mithilfe von Pub-Paketen können Sie einer Flutter-App ganz einfach zusätzliche Funktionen hinzufügen. In diesem Codelab stellen Sie das Google Maps Flutter-Plug-in vor. Dazu führen Sie den folgenden Befehl im Projektverzeichnis aus.
$ cd google_maps_in_flutter $ flutter pub add google_maps_flutter Resolving dependencies... Downloading packages... + csslib 1.0.0 + flutter_plugin_android_lifecycle 2.0.19 + flutter_web_plugins 0.0.0 from sdk flutter + google_maps 7.1.0 + google_maps_flutter 2.6.1 + google_maps_flutter_android 2.8.0 + google_maps_flutter_ios 2.6.0 + google_maps_flutter_platform_interface 2.6.0 + google_maps_flutter_web 0.5.7 + html 0.15.4 + js 0.6.7 (0.7.1 available) + js_wrapping 0.7.4 leak_tracker 10.0.4 (10.0.5 available) leak_tracker_flutter_testing 3.0.3 (3.0.5 available) material_color_utilities 0.8.0 (0.11.1 available) meta 1.12.0 (1.14.0 available) + plugin_platform_interface 2.1.8 + sanitize_html 2.1.0 + stream_transform 2.1.0 test_api 0.7.0 (0.7.1 available) + web 0.5.1 Changed 16 dependencies! 6 packages have newer versions incompatible with dependency constraints. Try `flutter pub outdated` for more information.
iOS platform konfigurieren
Damit Sie die neueste Version des Google Maps SDK für iOS erhalten, muss als Plattform mindestens iOS 14 verwendet werden. Ändern Sie den Anfang der Konfigurationsdatei ios/Podfile wie folgt.
ios/Podfile
# Google Maps SDK requires platform version 14
# https://developers.google.com/maps/flutter-package/config#ios
platform :ios, '14.0'
# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
ENV['COCOAPODS_DISABLE_STATS'] = 'true'
Android minSDK wird konfiguriert
Wenn Sie das Google Maps SDK unter Android verwenden möchten, muss minSdk auf „21“ gesetzt sein. Ändern Sie die Konfigurationsdatei android/app/build.gradle so.
android/app/build.gradle
android {
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId = "com.example.google_maps_in_flutter"
// Minimum Android version for Google Maps SDK
// https://developers.google.com/maps/flutter-package/config#android
minSdk = 21
targetSdk = flutter.targetSdkVersion
versionCode = flutterVersionCode.toInteger()
versionName = flutterVersionName
}
}
4. Google Maps zur App hinzufügen
API-Schlüssel
Damit Sie Google Maps in Ihrer Flutter-App verwenden können, müssen Sie ein API-Projekt mit der Google Maps Platform konfigurieren. Folgen Sie dazu dem Maps SDK for Android-API-Schlüssel und Maps SDK for iOS Verwenden Sie den API-Schlüssel und die Verwendung des API-Schlüssels der Maps JavaScript API. Führen Sie mit den API-Schlüsseln die folgenden Schritte aus, um sowohl Android- als auch iOS-Apps zu konfigurieren.
API-Schlüssel für eine Android-App hinzufügen
Wenn Sie der Android-App einen API-Schlüssel hinzufügen möchten, bearbeiten Sie die Datei AndroidManifest.xml in android/app/src/main. Fügen Sie einen einzelnen meta-data-Eintrag mit dem im vorherigen Schritt erstellten API-Schlüssel im Knoten application hinzu.
android/app/src/main/AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application
android:label="google_maps_in_flutter"
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher">
<!-- TODO: Add your Google Maps API key here -->
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR-KEY-HERE"/>
<activity
android:name=".MainActivity"
android:exported="true"
android:launchMode="singleTop"
android:taskAffinity=""
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
<!-- Specifies an Android theme to apply to this Activity as soon as
the Android process has started. This theme is visible to the user
while the Flutter UI initializes. After that, this theme continues
to determine the Window background behind the Flutter UI. -->
<meta-data
android:name="io.flutter.embedding.android.NormalTheme"
android:resource="@style/NormalTheme"
/>
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<!-- Don't delete the meta-data below.
This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
<meta-data
android:name="flutterEmbedding"
android:value="2" />
</application>
<!-- Required to query activities that can process text, see:
https://developer.android.com/training/package-visibility and
https://developer.android.com/reference/android/content/Intent#ACTION_PROCESS_TEXT.
In particular, this is used by the Flutter engine in io.flutter.plugin.text.ProcessTextPlugin. -->
<queries>
<intent>
<action android:name="android.intent.action.PROCESS_TEXT"/>
<data android:mimeType="text/plain"/>
</intent>
</queries>
</manifest>
API-Schlüssel für eine iOS-App hinzufügen
Wenn Sie der iOS-App einen API-Schlüssel hinzufügen möchten, bearbeiten Sie die Datei AppDelegate.swift in ios/Runner. Im Gegensatz zu Android erfordert das Hinzufügen eines API-Schlüssels unter iOS Änderungen am Quellcode der Runner-App. AppDelegate ist das zentrale Singleton-Element, das Teil des Initialisierungsprozesses der App ist.
Nehmen Sie zwei Änderungen an dieser Datei vor. Fügen Sie zuerst eine #import-Anweisung hinzu, um die Google Maps-Header abzurufen, und rufen Sie dann die Methode provideAPIKey() des GMSServices-Singleton auf. Dieser API-Schlüssel ermöglicht es Google Maps, Kartenkacheln korrekt bereitzustellen.
ios/Runner/AppDelegate.swift
import Flutter
import UIKit
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") // Add this line
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
API-Schlüssel für eine Web-App hinzufügen
Wenn Sie der Web-App einen API-Schlüssel hinzufügen möchten, bearbeiten Sie die Datei index.html in web. Fügen Sie im Abschnitt „head“ einen Verweis auf das Maps JavaScript-Script mit Ihrem API-Schlüssel hinzu.
web/index.html
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_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">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<!-- Add your Google Maps API key here -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE"></script>
<title>google_maps_in_flutter</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<script src="flutter_bootstrap.js" async></script>
</body>
</html>
Karten auf dem Bildschirm darstellen
Jetzt wird eine Karte auf dem Bildschirm angezeigt. Ersetzen Sie den Inhalt von lib/main.dart durch Folgendes.
lib/main.dart
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(45.521563, -122.677433);
void _onMapCreated(GoogleMapController controller) {
mapController = controller;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.green[700],
),
home: Scaffold(
appBar: AppBar(
title: const Text('Maps Sample App'),
elevation: 2,
),
body: GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 11.0,
),
),
),
);
}
}
Anwendung ausführen
Führen Sie die Flutter-App auf einem iOS- oder Android-Gerät aus, um eine einzelne Kartenansicht anzuzeigen, die auf Portland zentriert ist. Alternativ können Sie einen Android-Emulator oder einen iOS-Simulator ausführen. Sie können die Kartenmitte anpassen, um Ihre Heimatstadt oder einen Ort darzustellen, der Ihnen wichtig ist.
$ flutter run
|
|
5. Google auf der Karte platzieren
Google hat Niederlassungen in Nordamerika, Lateinamerika, Europa, Asiatisch-pazifischer Raum, Afrika und Naher Osten Das Schöne an diesen Karten ist, dass sie über einen einfach nutzbaren API-Endpunkt verfügen, über den die Standortinformationen des Büros im JSON-Format bereitgestellt werden können. In diesem Schritt fügen Sie die Standorte der Niederlassungen auf der Karte hinzu. In diesem Schritt parsen Sie mithilfe der Codegenerierung JSON.
So fügen Sie dem Projekt drei neue Flutter-Abhängigkeiten hinzu: Fügen Sie das Paket http zum einfachen Erstellen von HTTP-Anfragen, json_serializable und json_annotation zum Deklarieren der Objektstruktur zur Darstellung von JSON-Dokumenten und build_runner zur Unterstützung der Codegenerierung hinzu.
$ flutter pub add http json_annotation json_serializable dev:build_runner Resolving dependencies... Downloading packages... + _fe_analyzer_shared 67.0.0 (68.0.0 available) + analyzer 6.4.1 (6.5.0 available) + args 2.5.0 + build 2.4.1 + build_config 1.1.1 + build_daemon 4.0.1 + build_resolvers 2.4.2 + build_runner 2.4.9 + build_runner_core 7.3.0 + built_collection 5.1.1 + built_value 8.9.2 + checked_yaml 2.0.3 + code_builder 4.10.0 + convert 3.1.1 + crypto 3.0.3 + dart_style 2.3.6 + file 7.0.0 + fixnum 1.1.0 + frontend_server_client 4.0.0 + glob 2.1.2 + graphs 2.3.1 + http 1.2.1 + http_multi_server 3.2.1 + http_parser 4.0.2 + io 1.0.4 js 0.6.7 (0.7.1 available) + json_annotation 4.9.0 + json_serializable 6.8.0 leak_tracker 10.0.4 (10.0.5 available) leak_tracker_flutter_testing 3.0.3 (3.0.5 available) + logging 1.2.0 material_color_utilities 0.8.0 (0.11.1 available) meta 1.12.0 (1.14.0 available) + mime 1.0.5 + package_config 2.1.0 + pool 1.5.1 + pub_semver 2.1.4 + pubspec_parse 1.2.3 + shelf 1.4.1 + shelf_web_socket 1.0.4 + source_gen 1.5.0 + source_helper 1.3.4 test_api 0.7.0 (0.7.1 available) + timing 1.0.1 + typed_data 1.3.2 + watcher 1.1.0 + web_socket_channel 2.4.5 + yaml 3.1.2 Changed 42 dependencies! 8 packages have newer versions incompatible with dependency constraints. Try `flutter pub outdated` for more information.
JSON mit Codegenerierung parsen
Vielleicht haben Sie bemerkt, dass die vom API-Endpunkt zurückgegebenen JSON-Daten eine reguläre Struktur haben. Es wäre praktisch, den Code zu generieren, um diese Daten in Objekten zusammenzuführen, die Sie im Code verwenden können.
Erstellen Sie im Verzeichnis lib/src eine locations.dart-Datei und beschreiben Sie die Struktur der zurückgegebenen JSON-Daten so:
lib/src/locations.dart
import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:http/http.dart' as http;
import 'package:json_annotation/json_annotation.dart';
part 'locations.g.dart';
@JsonSerializable()
class LatLng {
LatLng({
required this.lat,
required this.lng,
});
factory LatLng.fromJson(Map<String, dynamic> json) => _$LatLngFromJson(json);
Map<String, dynamic> toJson() => _$LatLngToJson(this);
final double lat;
final double lng;
}
@JsonSerializable()
class Region {
Region({
required this.coords,
required this.id,
required this.name,
required this.zoom,
});
factory Region.fromJson(Map<String, dynamic> json) => _$RegionFromJson(json);
Map<String, dynamic> toJson() => _$RegionToJson(this);
final LatLng coords;
final String id;
final String name;
final double zoom;
}
@JsonSerializable()
class Office {
Office({
required this.address,
required this.id,
required this.image,
required this.lat,
required this.lng,
required this.name,
required this.phone,
required this.region,
});
factory Office.fromJson(Map<String, dynamic> json) => _$OfficeFromJson(json);
Map<String, dynamic> toJson() => _$OfficeToJson(this);
final String address;
final String id;
final String image;
final double lat;
final double lng;
final String name;
final String phone;
final String region;
}
@JsonSerializable()
class Locations {
Locations({
required this.offices,
required this.regions,
});
factory Locations.fromJson(Map<String, dynamic> json) =>
_$LocationsFromJson(json);
Map<String, dynamic> toJson() => _$LocationsToJson(this);
final List<Office> offices;
final List<Region> regions;
}
Future<Locations> getGoogleOffices() async {
const googleLocationsURL = 'https://about.google/static/data/locations.json';
// Retrieve the locations of Google offices
try {
final response = await http.get(Uri.parse(googleLocationsURL));
if (response.statusCode == 200) {
return Locations.fromJson(
json.decode(response.body) as Map<String, dynamic>);
}
} catch (e) {
if (kDebugMode) {
print(e);
}
}
// Fallback for when the above HTTP request fails.
return Locations.fromJson(
json.decode(
await rootBundle.loadString('assets/locations.json'),
) as Map<String, dynamic>,
);
}
Nachdem Sie diesen Code hinzugefügt haben, sollte Ihre IDE (falls Sie eine verwenden) einige rote Schnörkel anzeigen, da sie auf eine nicht vorhandene gleichgeordnete Datei verweist: locations.g.dart.. Diese generierte Datei wird in nicht typisierte JSON-Strukturen und benannte Objekte konvertiert. Führen Sie dazu build_runner so aus:
$ dart run build_runner build --delete-conflicting-outputs [INFO] Generating build script... [INFO] Generating build script completed, took 357ms [INFO] Creating build script snapshot...... [INFO] Creating build script snapshot... completed, took 10.5s [INFO] There was output on stdout while compiling the build script snapshot, run with `--verbose` to see it (you will need to run a `clean` first to re-snapshot). [INFO] Initializing inputs [INFO] Building new asset graph... [INFO] Building new asset graph completed, took 646ms [INFO] Checking for unexpected pre-existing outputs.... [INFO] Deleting 1 declared outputs which already existed on disk. [INFO] Checking for unexpected pre-existing outputs. completed, took 3ms [INFO] Running build... [INFO] Generating SDK summary... [INFO] 3.4s elapsed, 0/3 actions completed. [INFO] Generating SDK summary completed, took 3.4s [INFO] 4.7s elapsed, 2/3 actions completed. [INFO] Running build completed, took 4.7s [INFO] Caching finalized dependency graph... [INFO] Caching finalized dependency graph completed, took 36ms [INFO] Succeeded after 4.8s with 2 outputs (7 actions)
Der Code sollte jetzt wieder ordnungsgemäß analysiert werden. Als Nächstes fügen wir die in der getGoogleOffices-Funktion verwendete Fallback-Datei „locations.json“ hinzu. Einer der Gründe für die Verwendung dieses Fallbacks ist, dass die in dieser Funktion geladenen statischen Daten ohne CORS-Header bereitgestellt werden und daher in einem Webbrowser nicht geladen werden können. Die Android- und iOS-Flutter-Apps benötigen keine CORS-Header, aber der Zugriff auf mobile Daten kann unter Umständen mühsam sein.
Rufen Sie im Browser https://about.google/static/data/locations.json auf und speichern Sie den Inhalt im Asset-Verzeichnis. Alternativ können Sie die Befehlszeile wie folgt verwenden.
$ mkdir assets
$ cd assets
$ curl -o locations.json https://about.google/static/data/locations.json
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 30348 100 30348 0 0 75492 0 --:--:-- --:--:-- --:--:-- 75492
Nachdem Sie die Asset-Datei heruntergeladen haben, fügen Sie sie dem Flutter-Abschnitt der Datei pubspec.yaml hinzu.
pubspec.yaml
flutter:
uses-material-design: true
assets:
- assets/locations.json
Ändern Sie die Datei main.dart, um die Kartendaten anzufordern. Verwenden Sie dann die zurückgegebenen Informationen, um der Karte Niederlassungen hinzuzufügen:
lib/main.dart
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'src/locations.dart' as locations;
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final Map<String, Marker> _markers = {};
Future<void> _onMapCreated(GoogleMapController controller) async {
final googleOffices = await locations.getGoogleOffices();
setState(() {
_markers.clear();
for (final office in googleOffices.offices) {
final marker = Marker(
markerId: MarkerId(office.name),
position: LatLng(office.lat, office.lng),
infoWindow: InfoWindow(
title: office.name,
snippet: office.address,
),
);
_markers[office.name] = marker;
}
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.green[700],
),
home: Scaffold(
appBar: AppBar(
title: const Text('Google Office Locations'),
elevation: 2,
),
body: GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: const CameraPosition(
target: LatLng(0, 0),
zoom: 2,
),
markers: _markers.values.toSet(),
),
),
);
}
}
Dieser Code führt mehrere Vorgänge aus:
- In
_onMapCreatedwird der JSON-Parsing-Code aus dem vorherigen Schritt (awaiting) verwendet, bis er geladen ist. Anschließend werden die zurückgegebenen Daten verwendet, umMarkers innerhalb einessetState()-Callbacks zu erstellen. Sobald die App neue Markierungen erhält, wird durch setState das Flutter-Bild auf dem Bildschirm neu gestaltet, sodass die Bürostandorte angezeigt werden. - Die Markierungen werden in einem
Mapgespeichert, das demGoogleMap-Widget zugeordnet ist. Dadurch werden die Markierungen mit der richtigen Karte verknüpft. Natürlich könnten Sie auch mehrere Karten mit unterschiedlichen Markierungen verwenden.
Hier ist ein Screenshot dessen, was Sie erreicht haben. An dieser Stelle können viele interessante Ergänzungen vorgenommen werden. Sie könnten beispielsweise eine Listenansicht der Büros hinzufügen, die sich bewegt und die Karte zoomt, wenn der Nutzer auf ein Büro klickt. Diese Übung bleibt jedoch dem Leser überlassen.
6. Nächste Schritte
Glückwunsch!
Du hast das Codelab abgeschlossen und eine Flutter-App mit einer Google Maps-Karte erstellt. Sie haben außerdem mit einem JSON-Webdienst interagiert.
Weitere nächste Schritte
In diesem Codelab können Sie eine Reihe von Punkten auf einer Karte visualisieren. Es gibt eine Reihe von mobilen Apps, die auf dieser Funktion aufbauen und viele unterschiedliche Anforderungen von Nutzenden erfüllen. Hier finden Sie weitere Ressourcen, die Ihnen dabei helfen können:
- Build Mobile Apps With Flutter and Google Maps (Vortrag auf der Cloud Next '19)
- Das
google_maps_webservice-Paket von Hadrien Lejard macht die Google Maps-Webdienste wie die Directions API, die Distance Matrix API und die Places API wirklich nutzerfreundlich. - Wenn Sie sich verschiedene Optionen für die Verwendung einer API über JSON REST ansehen möchten, finden Sie im Medium-Beitrag von Andrew Brogdon eine Reihe von Optionen für die Arbeit mit JSON REST APIs.