1. Vorbereitung
Zusammenfassung
In diesem Codelab erfahren Sie alles, was Sie brauchen, um die Google Maps Platform zum Erstellen von iOS-Apps in Objekt-C zu verwenden. Sie erfahren, wie Sie das Maps SDK for iOS einrichten, die erste Karte aufrufen, mit Markierungs- und Markierungsclustern arbeiten, auf der Karte zeichnen und mit Nutzerinteraktionen umgehen.
Aufgaben
In diesem Codelab erstellen Sie eine iOS-App, die folgende Funktionen umfasst:
- Lädt das Maps SDK for iOS und die Maps SDK for iOS-Dienstprogrammbibliothek
- Zeigt eine Karte in der Mitte von Sydney, Australien
- Zeigt benutzerdefinierte Markierungen für 100 Punkte um Sydney an
- Implementiert Markierungscluster
- Aktiviert die Nutzerinteraktion, die zentriert und einen Kreis auf der Karte zeichnet, wenn auf eine Markierung geklickt wird
Lerninhalte
- Erste Schritte mit der Google Maps Platform
- Maps SDK for iOS und die Dienstprogrammbibliothek von Google Maps SDK for iOS laden
- Karte wird geladen
- Markierungen, benutzerdefinierte Markierungen und Markierungscluster verwenden
- Arbeiten mit dem Maps SDK for iOS-Ereignissystem für die Nutzerinteraktion
- Karte programmatisch steuern
- Auf der Karte zeichnen
Vorbereitung
Für das Codelab müssen Sie sich mit den unten beschriebenen Elementen vertraut machen. Wenn Sie bereits mit der Google Maps Platform vertraut sind, fahren Sie mit dem Codelab fort.
Erforderliche Google Maps Platform-Produkte
In diesem Codelab nutzen Sie die folgenden Google Maps Platform-Produkte:
- Maps SDK for iOS
- Bibliothek für das Google Maps SDK for iOS-Dienstprogramm
Einführung in Google Maps Platform
Wenn du die Google Maps Platform noch nicht verwendet hast, folge der Einführung in die Google Maps Platform oder folge der Anleitung unter Erste Schritte mit der Google Maps Platform-Playlist.
- Erstellen Sie ein Rechnungskonto.
- Projekt erstellen
- Aktivieren Sie die im vorherigen Abschnitt aufgeführten Google Maps Platform APIs und SDKs.
- Generieren Sie den API-Schlüssel.
Sonstige Anforderungen für dieses Codelab
Für dieses Codelab benötigen Sie die folgenden Konten, Dienste und Tools:
- Google Cloud Platform-Konto mit aktivierter Abrechnung
- Einen Google Maps Platform API-Schlüssel mit aktiviertem Maps SDK for iOS
- Grundkenntnisse in Objective-C
- Xcode 12.0 mit einem Ziel-SDK von 12.0 oder höher
2. Einrichten
Zum Aktivieren des unten stehenden Schritts müssen Sie das Maps SDK for iOS aktivieren.
Google Maps Platform einrichten
Wenn Sie noch kein Google Cloud Platform-Konto und kein Projekt mit aktivierter Abrechnung haben, lesen Sie den Leitfaden Erste Schritte mit der Google Maps Platform, um ein Rechnungskonto und ein Projekt zu erstellen.
- Klicken Sie in der Cloud Console auf das Drop-down-Menü für Projekte und wählen Sie das Projekt aus, das Sie für dieses Codelab verwenden möchten.
- Aktivieren Sie im Google Cloud Marketplace die für dieses Codelab erforderlichen Google Maps Platform APIs und SDKs. Folgen Sie dazu der Anleitung in diesem Video oder dieser Dokumentation.
- Generieren Sie in der Cloud Console auf der Seite Anmeldedaten einen API-Schlüssel. Folgen Sie der Anleitung in diesem Video oder dieser Dokumentation. Für alle Anfragen an die Google Maps Platform ist ein API-Schlüssel erforderlich.
Projektstart-Vorlage einrichten
Bevor Sie mit diesem Codelab beginnen, müssen Sie Folgendes tun, um die Startprojektvorlage sowie den vollständigen Lösungscode herunterzuladen:
- Laden Sie das GitHub-Repository für dieses Codelab unter https://github.com/googlecodelabs/maps-platform-101-objc herunter oder erstellen Sie es.
Das StarterApp-Projekt befindet sich im Verzeichnis /starter und enthält die grundlegende Dateistruktur, die du für das Codelab brauchst. Alles, was du brauchst, findest du im Verzeichnis /starter/StarterApp.
Wenn Sie den vollständigen Lösungscode sehen möchten, können Sie die Einrichtung oben durchführen und sich die Lösung im Verzeichnis /solution/SolutionApp ansehen.
3. Maps SDK for iOS installieren
Der erste Schritt bei der Verwendung des Maps SDK for iOS besteht darin, die erforderlichen Abhängigkeiten zu installieren. Der Prozess besteht aus zwei Schritten: der Installation des Maps SDK for iOS und der Maps SDK for iOS-Dienstprogrammbibliothek aus dem CocoaPods-Abhängigkeitsmanager und die Bereitstellung deines API-Schlüssels für das SDK.
- Füge die Maps SDK for iOS- und Maps SDK for iOS-Dienstprogrammbibliothek
Podfilehinzu.
In diesem Codelab werden Sie das Maps SDK for iOS verwenden, das alle Hauptfunktionen von Google Maps bietet, sowie die Maps iOS-Dienstprogrammbibliothek, die eine Vielzahl von nützlichen Funktionen bietet, mit denen Sie Ihre Karte bereichern können.
Öffnen Sie zuerst in Xcode (oder Ihrem bevorzugten Texteditor) Pods > Podfile und aktualisieren Sie die Datei so, dass sie die Abhängigkeiten des Maps SDK for iOS und der Dienstprogrammbibliothek unter use_frameworks! einschließt:
pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'
- Installieren Sie die SDKs der Maps SDK for iOS- und Maps SDK for iOS-Dienstprogramm.
Führen Sie pod install im /starter-Verzeichnis über die Befehlszeile aus, um die Abhängigkeiten zu installieren. CocoaPods werden automatisch heruntergeladen und die StarterApp.xcworkspace wird erstellt. 3. Wenn die Abhängigkeiten installiert sind, öffne StarterApp.xcworkspace in Xcode und führe die App im iPhone-Simulator aus, indem du Command+R drückst. Wenn alles richtig eingerichtet ist, wird der Simulator gestartet und ein schwarzer Bildschirm angezeigt. Aber keine Sorge, du hast noch nichts gebaut! 4. Importieren Sie das SDK in AppDelegate.h.
Nachdem deine Abhängigkeiten installiert sind, musst du deinen API-Schlüssel an das SDK senden. Im ersten Schritt musst du das Maps SDK for iOS als Abhängigkeit importieren. Füge dazu Folgendes unter die Importanweisung #import "AppDelegate.h" ein:
@import GoogleMaps;
- Geben Sie unter dem Import des iOS SDK eine Konstante
NSStringmit dem entsprechenden Wert für den API-Schlüssel an:
static NSString *const kMapsAPIKey = @"YOUR API KEY";
- Übergeben Sie den API-Schlüssel an das iOS SDK, indem Sie
provideAPIKeyinGMSServicesinapplication: didFinishLaunchingWithOptions:aufrufen.
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[GMSServices provideAPIKey:kMapsAPIKey];
return YES;
}
Die aktualisierte AppDelegate.m-Datei sollte jetzt so aussehen:
#import "AppDelegate.h"
@import GoogleMaps;
static NSString *const kMapsAPIKey = @"YOUR API KEY";
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[GMSServices provideAPIKey:kMapsAPIKey];
return YES;
}
@end
Beispiel für Podfile:
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '11.0'
target 'StarterApp' do
use_frameworks!
pod 'GoogleMaps', '5.1.0.0'
pod 'Google-Maps-iOS-Utils', '3.4.0'
end
Nachdem deine Abhängigkeiten installiert und dein API-Schlüssel vorhanden ist, kannst du Aufrufe für das Maps SDK for iOS senden.
4. Karte anzeigen
Zeit, deine erste Karte anzuzeigen!
Der häufigste Bestandteil des Maps SDK for iOS ist die Klasse GMSMapView. Sie bietet viele der Methoden, mit denen du Karteninstanzen erstellen und bearbeiten kannst. Und so gehts.
- Öffnen Sie
ViewController.m.
Hier erledigen Sie alle verbleibenden Aufgaben für dieses Codelab. Die Lebenszyklusereignisse loadView und viewDidLoad für den Ansichts-Controller sind bereits gekürzt. 2. Importieren Sie oben in der Datei das Maps SDK for iOS, indem Sie Folgendes hinzufügen:
@import GoogleMaps;
- Deklarieren Sie eine
ViewController-Instanzvariable, umGMSMapViewzu speichern.
Die Instanz von GMSMapView ist das Hauptobjekt, mit dem Sie in diesem Codelab zusammenarbeiten. Sie verweisen darauf und verwenden verschiedene Lebenszyklusmethoden für den Controller. Aktualisieren Sie die Implementierung von ViewController, um eine Instanzvariable zu speichern, damit sie verfügbar ist:
@implementation ViewController {
GMSMapView *_mapView;
}
- Erstellen Sie in
loadVieweine Instanz vonGMSCameraPosition.
GMSCameraPosition gibt an, wo die Karte zentriert werden soll und welche Zoomstufe angezeigt wird. Dieser Code ruft die Methode cameraWithLatitude:longitude:zoom: auf, um die Karte in Sydney, Australien, mit einem Breitengrad von -33,86 und einem Längengrad von 151,20 mit einer Zoomstufe von 12 zu zentrieren:
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
- Erstelle in
loadVieweine Instanz vonGMSMapView, um die Karte zu instanziieren.
Rufe mapWithFrame:camera: auf, um eine neue Karteninstanz zu erstellen. Der Frame ist auf CGRectZero festgelegt. Dies ist eine globale Variable aus der iOS-CGGeometry-Bibliothek, die einen Frame mit 0 Breite (0 Höhe) angibt, der sich an einer Position (0,0) innerhalb des View Controllers befindet. Die Kamera ist auf die soeben erstellte Kameraposition eingestellt.
Als Nächstes musst du die Root-Ansicht des Ansichts-Controllers auf _mapview setzen, sodass die Karte im Vollbildmodus angezeigt wird.
_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;
- Legen Sie
GMSMapViewDelegateauf den Ansichts-Controller fest.
Wenn er implementiert ist, kann der Bevollmächtigte die Kartenansicht verwenden, um Ereignisse aus Nutzerinteraktionen in der GMSMapView-Instanz zu verarbeiten, die Sie später benötigen.
Aktualisiere zuerst die Schnittstelle von ViewController, damit sie dem Protokoll für GMSMapViewDelegate: entspricht
@interface ViewController ()<GMSMapViewDelegate>
Fügen Sie als Nächstes Folgendes hinzu, um GMSMapViewDelegate auf ViewController festzulegen.
_mapView.delegate = self;
Aktualisieren Sie die App im iOS-Simulator (Command+R). Die Karte sollte nun angezeigt werden.
Zur Erinnerung: In diesem Schritt haben Sie eine Instanz von GMSMapView erstellt, um eine Karte zu zeigen, auf der die Stadt Sydney (Australien) zentriert ist.
Die Datei ViewController.m sollte jetzt so aussehen:
#import "ViewController.h"
#import "LocationGenerator.h"
@import GoogleMaps;
@interface ViewController ()<GMSMapViewDelegate>
@end
@implementation ViewController {
GMSMapView *_mapView;
}
- (void)loadView {
[super loadView];
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;
_mapView.delegate = self;
}
5. Cloudbasierter Kartenstil (optional)
Sie können den Stil Ihrer Karte mit cloudbasierten Kartenstilen anpassen.
Karten-ID erstellen
Wenn Sie noch keine Karten-ID mit einem zugehörigen Kartenstil erstellt haben, finden Sie im Leitfaden zu Karten-IDs folgende Schritte:
- Erstellen Sie eine Karten-ID.
- Kartenkarte mit einem Kartenstil verknüpfen
Karten-ID zur App hinzufügen
Wenn du die Karten-ID verwenden möchtest, die du im vorherigen Schritt erstellt hast, öffne die Datei ViewController.m und erstelle in der loadView-Methode ein GMSMapID-Objekt und gib diese als Karten-ID an. Ändern Sie als Nächstes die Instanziierung von GMSMapView. Geben Sie dazu das Objekt GMSMapID als Parameter an.
ViewController.m
- (void)loadView {
GMSMapID *mapID = [[GMSMapID alloc] initWithIdentifier:@"YOUR_MAP_ID"];
_mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
// ...
}
Danach kannst du die App ausführen, um deine Karte im gewünschten Stil zu sehen.
6. Markierungen in die Karte einfügen
Es gibt viele Dinge, die Entwickler mit dem Maps SDK for iOS machen. Die Platzierung von Markierungen auf der Karte ist jedoch am beliebtesten. Mit Markierungen können Sie bestimmte Punkte auf der Karte anzeigen. Sie sind ein gängiges UI-Element für die Interaktion mit Nutzern. Wenn Sie Google Maps bereits verwendet haben, kennen Sie wahrscheinlich die Standardmarkierung, die so aussieht:
In diesem Schritt erfahren Sie, wie Sie die Klasse GMSMarker verwenden, um Markierungen auf der Karte zu platzieren.
Beachten Sie, dass Markierungen nicht auf der Karte platziert werden können, bis die Karte aus dem vorherigen Schritt im Lebenszyklusereignis der AnsichtloadView geladen wurde, sodass Sie diese Schritte im Lebenszyklusereignis viewDidLoad ausführen. Dieses Ereignis wird aufgerufen, nachdem die Ansicht (und Karte) geladen wurde.
- Definiere ein
CLLocationCoordinate2D-Objekt.
CLLocationCoordinate2D ist eine Struktur, die von der iOS-Bibliothek CoreLocation zur Verfügung gestellt wird. Sie definiert einen geografischen Standort mit einem festgelegten Breiten- und Längengrad. Um deine erste Markierung zu erstellen, definiere ein CLLocationCoordinate2D-Objekt und lege den Längen- und Breitengrad auf die Kartenmitte fest. Auf die Koordinaten der Kartenmitte kann über die Kartenansicht mit den Eigenschaften camera.target.latitude und camera.target.longitude zugegriffen werden.
CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
- Erstelle eine Instanz von
GMSMarker.
Das Maps SDK for iOS stellt die Klasse GMSMarker bereit. Jede Instanz von GMSMarker stellt eine einzelne Markierung auf der Karte dar. Sie wird erstellt, indem markerWithPosition: aufgerufen und ein CLLocationCoordinate2D-Objekt übergeben wird, um dem SDK mitzuteilen, wo die Markierung auf der Karte platziert werden soll..
GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
- Benutzerdefiniertes Markierungssymbol festlegen
Die rote Markierung in der Standardeinstellung für Google Maps ist toll, aber wir passen auch deine Karte an. Glücklicherweise ist die Verwendung einer benutzerdefinierten Markierung mit dem Maps SDK for iOS ganz einfach. Das StarterApp-Projekt enthält ein Bild namens „custom_pin.png'“. Sie können aber ein beliebiges Bild verwenden.
Setze die Property icon der Markierung auf eine Instanz von UIImage, um die benutzerdefinierte Markierung festzulegen.
marker.icon = [UIImage imageNamed:@"custom_pin.png"];
- Hiermit wird die Markierung auf der Karte gerendert.
Die Markierung wurde erstellt, ist aber auf der Karte zu sehen. Setze dazu die Property map der Instanz GMSMarker auf eine Instanz von GMSMapView.
marker.map = _mapView;
Aktualisieren Sie die App und sehen Sie sich Ihre erste Karte mit einer Markierung an.
Zur Erinnerung: In diesem Abschnitt haben Sie eine Instanz der Klasse „GMSMarker“ erstellt und auf die Kartenansicht angewendet, um eine Markierung auf der Karte anzuzeigen. Das aktualisierte view DidLoad-Lebenszyklus-Ereignis in ViewController.m sollte nun so aussehen:
- (void)viewDidLoad {
[super viewDidLoad];
CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
marker.icon = [UIImage imageNamed:@"custom_pin.png"];
marker.map = _mapView;
}
7. Markierungscluster aktivieren
Wenn Sie eine große Anzahl von Markierungen verwenden oder sich sehr dicht beieinander befinden, kann es zu Überschneidungen kommen oder die Markierungen zu überfüllt erscheinen. Dies beeinträchtigt die Nutzererfahrung. Wenn beispielsweise zwei Markierungen sehr dicht beieinander liegen, ergibt sich folgende Situation:
Hier kommen Markierungscluster zum Einsatz. Markierungscluster sind eine weitere häufig implementierte Funktion, mit der Markierungen in der Nähe in einem einzigen Symbol gruppiert werden, das sich je nach Zoomstufe so verändert:
Der Algorithmus für das Markierungs-Clustering teilt den sichtbaren Bereich der Karte in ein Raster auf und anschließend Cluster-Symbole, die sich in derselben Zelle befinden. Da sich das Team von Google Maps Platform nicht nur um die Google Maps SDK for iOS-Dienstprogrammbibliothek entwickelt hat, sondern über eine nützliche Open Source-Bibliothek verfügen, müssen Sie sich keine Gedanken machen. Diese Bibliothek verarbeitet unter anderem die Markierungscluster automatisch. Weitere Informationen zu Markierungsclustern findest du in der Google Maps Platform-Dokumentation. Du kannst dir die Quelle für die iOS-Dienstprogrammbibliothek auch auf GitHub ansehen.
- Der Karte viel mehr Markierungen hinzufügen
Um Markierungs-Clustering in Aktion zu sehen, musst du viele Markierungen auf der Karte haben. Deshalb bietet Ihnen das Starter-Projekt von LocationGenerator.m einen praktischen Markierungsgenerator.
Wenn du der Karte so viele Markierungen hinzufügen möchtest, wie du möchtest, rufe generateMarkersNear:count: einfach im Lebenszyklus der Ansicht viewDidLoad unter dem Code aus dem vorherigen Schritt auf. Die Methode erstellt die Anzahl der in count angegebenen Markierungen an zufälligen Positionen um die in einem CLLocationCoordinate2D-Objekt angegebenen Koordinaten. In diesem Fall kannst du einfach die zuvor erstellte Variable mapCenter übergeben. Die Markierungen werden in einem NSArray zurückgegeben.
NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];
- Importiere die Google Maps SDK for iOS-Dienstprogrammbibliothek.
Wenn du die Maps iOS-Dienstprogrammbibliothek als Abhängigkeit zu deinem Projekt hinzufügen möchtest, füge Folgendes in die Liste der Abhängigkeiten oben in ViewController.m ein:
@import GoogleMapsUtils;
- Markierungs-Cluster konfigurieren
Um den Markierungs-Cluster zu verwenden, müssen Sie drei Dinge angeben, um seine Funktionsweise zu konfigurieren: einen Clustering-Algorithmus, einen Symbolgenerator und einen Renderer. Der Algorithmus bestimmt, wie Markierungen geclustert werden, beispielsweise der Abstand zwischen Markierungen, die sich im selben Cluster befinden. Der Symbolgenerator stellt die Clustersymbole für verschiedene Zoomstufen bereit. Der Renderer verarbeitet das tatsächliche Rendering der Clustersymbole auf der Karte.
Wenn Sie möchten, können Sie alles von Grund auf selbst schreiben. Aber die Maps-iOS-Dienstprogrammbibliothek enthält Standardimplementierungen für den Prozess. Fügen Sie einfach Folgendes hinzu:
id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];
id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
- Erstelle eine Instanz von
GMUClusterManager.
GMUClusterManager ist die Klasse, die das Markierungs-Clustering mithilfe des von dir angegebenen Algorithmus, Symbolgenerators und Renderers implementiert. Wenn Sie den Renderer erstellen und für die Kartenansicht verfügbar machen möchten, müssen Sie der Implementierung von ViewController zuerst eine Instanzvariable hinzufügen, um die Clustermanager-Instanz zu speichern:
@implementation ViewController {
GMSMapView *_mapView;
GMUClusterManager *_clusterManager;
}
Erstellen Sie als Nächstes die Instanz von GMUClusterManager im Lebenszyklusereignis viewDidLoad:
_clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];
- Fügen Sie die Markierungen hinzu und führen Sie den Markierungs-Cluster aus.
Nachdem Sie die Markierungs-Cluster-Instanz konfiguriert haben, müssen Sie lediglich den Cluster-Manager an das Cluster-Markierungs-Array übergeben, indem Sie addItems: aufrufen. Anschließend führen Sie den Clusterer durch Aufrufen von cluster aus.
[_clusterManager addItems:markerArray];
[_clusterManager cluster];
Aktualisiere deine App. Du solltest jetzt eine Vielzahl von Markierungen sehen. Probieren Sie einfach verschiedene Zoomstufen aus und zoomen Sie auf der Karte heran- und herauszuzoomen.
Zur Zusammenfassung: In diesem Schritt haben Sie eine Instanz des Markierungs-Clusters aus der Dienstprogrammbibliothek von Google Maps SDK for iOS konfiguriert und anschließend verwendet, um 100 Markierungen auf der Karte zu gruppieren. Das viewDidLoad-Lebenszyklus-Ereignis in ViewController.m sollte jetzt so aussehen:
- (void)viewDidLoad {
[super viewDidLoad];
CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude,
_mapView.camera.target.longitude);
GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
marker.icon = [UIImage imageNamed:@"custom_pin.png"];
marker.map = _mapView;
NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];
id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];
id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
_clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];
[_clusterManager addItems:markerArray];
[_clusterManager cluster];
}
8. Nutzerinteraktion hinzufügen
Jetzt hast du eine tolle Karte, auf der Markierungen angezeigt und Markierungs-Clustering verwendet wird. In diesem Schritt fügen Sie mit GMSMapViewDelegate weitere Aktionen für Nutzerinteraktionen hinzu, die Sie zuvor auf den Ansichts-Controller festgelegt haben, um die Nutzerfreundlichkeit Ihrer Karte zu verbessern.
Das Maps SDK for iOS enthält ein umfassendes Ereignissystem, das über den Bevollmächtigten für die Karte implementiert wird. Er enthält Ereignis-Handler, mit denen Sie Code ausführen können, wenn verschiedene Nutzerinteraktionen auftreten. Der Bevollmächtigte für Karten enthält beispielsweise Methoden, mit denen Sie Code-Ausführungen für Interaktionen wie das Klicken auf eine Karte und die Markierung, das Schwenken der Karte und das Heran- und Herauszoomen auslösen können.
In diesem Schritt schwenken Sie die Karte programmatisch auf jede Markierung, die vom Nutzer angetippt wird.
- Implementiere den Tippen-Listener für Markierungen.
mapView:didTapMarker wird jedes Mal aufgerufen, wenn der Nutzer auf eine der zuvor erstellten Markierungen tippt, oder immer dann, wenn ein Nutzer auf einen Markierungscluster tippt. Intern werden Markierungscluster als Instanz von GMSMarker implementiert.
Zum Implementieren des Ereignis-Listeners musst du ihn zuerst am Ende von ViewController.m vor der Anweisung end verkürzen.
Sie sehen, dass die Methode NO zurückgibt. Dadurch wird dem iOS SDK aufgefordert, die standardmäßige GMSMarker-Funktion auszuführen, z. B. wird ein Infofenster angezeigt, sobald ein Ereignis-Handler-Code ausgeführt wurde.
- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
return NO;
}
- Bearbeiten Sie das Tippereignis und animieren Sie die Kamera, um die Karte neu zu zentrieren, wenn auf eine Markierung oder einen Markierungscluster getippt wird.
Beim Aufrufen übergibt mapView:didTapMarker die Instanz von GMSMarker, auf die getippt wurde, sodass du sie in deinem Code verarbeiten kannst. Du kannst mit dieser Instanz die Karte neu zentrieren, indem du in der Kartenansicht animateToLocation: aus dem Ereignis-Handler aufrufst und die Position der Markierungsinstanz übergibst, die in der position-Property verfügbar ist.
[_mapView animateToLocation:marker.position];
- Heranzoomen auf einem Markierungscluster, wenn darauf getippt wird
Oft wird das Heranzoomen auf Markierungsclustern herangezoomt. So können Nutzer die Markierungs-Cluster ansehen, da der Cluster bei niedrigeren Zoomstufen maximiert wird.
Wie bereits erwähnt, ist das Markierungsclustersymbol nur eine Implementierung von GMSMarker mit einem benutzerdefinierten Symbol. Wie können Sie feststellen, ob auf eine Markierung oder einen Markierungscluster getippt wurde? Wenn der Cluster-Manager für Markierungen einen neuen Cluster-Symbol erstellt, implementiert er die Instanz von GMSMarker, um einem Protokoll namens GMUCluster. zu entsprechen. Du kannst mit einer Bedingung prüfen, ob die an den Ereignis-Handler weitergegebene Markierung diesem Protokoll entspricht.
Sobald Sie programmatisch wissen, dass ein Cluster angetippt wurde, können Sie animateToZoom: in der Kartenansicht aufrufen und den Zoom auf die aktuelle Zoomstufe plus eine festlegen. Die aktuelle Zoomstufe ist in der Kartenansicht im camera.zoom-Attribut verfügbar.
Achte auch darauf, dass der folgende Code YES zurückgibt. Dadurch wird dem Ereignis-Handler mitgeteilt, dass Sie die Verarbeitung des Ereignisses abgeschlossen haben und kein weiterer Code im Handler ausgeführt werden soll. Einer der Gründe hierfür ist, zu verhindern, dass das zugrunde liegende GMSMarker-Objekt das übrige Standardverhalten ausführt, z. B. das Anzeigen eines Infofensters, das bei Tippen auf ein Clustersymbol nicht sinnvoll ist.
if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
[_mapView animateToZoom:_mapView.camera.zoom +1];
return YES;
}
Aktualisieren Sie die App und tippen Sie auf einige Markierungen und Markierungscluster. Wenn Sie auf eine der beiden Optionen tippen, wird die Karte neu angetippt. Wenn auf einen Markierungs-Cluster getippt wird, zoomt die Karte auch um eine Ebene heran. Der Markierungs-Cluster wird maximiert und die darunter Markierungscluster werden angezeigt.
Kurz gesagt: Du hast in diesem Schritt den Listener für das Antippen von Markierungen implementiert und das Ereignis auf ein neueres Element auf das Element getippt und es herangezoomt, wenn es sich um ein Clustersymbol handelt.
Die Methode mapView:didTapMarker sollte so aussehen:
- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
[_mapView animateToLocation:marker.position];
if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
[_mapView animateToZoom:_mapView.camera.zoom +1];
return YES;
}
return NO;
}
9. Auf der Karte zeichnen
Bis jetzt hast du eine Karte von Sydney erstellt, auf der Markierungen an 100 Zufallspunkten zu sehen sind und mit Nutzerinteraktionen verknüpft sind. Im letzten Schritt dieses Codelabs verwenden Sie die Zeichenfunktionen des Maps SDK for iOS, um Ihrer Karte ein zusätzliches nützliches Merkmal hinzuzufügen.
Stellen Sie sich vor, diese Karte wird von Nutzern verwendet, die die Stadt Sydney erkunden möchten. Eine nützliche Funktion ist die Visualisierung eines Umkreises um eine Markierung herum, wenn darauf geklickt wird. So kann der Nutzer auf einfache Weise erkennen, welche anderen Zielanwendungen sich in Gehminuten von der angeklickten Markierung befinden.
Das iOS SDK enthält eine Reihe von Funktionen zum Zeichnen von Formen auf der Karte, z. B. Quadrate, Polygone, Linien und Kreise. Danach wird ein Kreis mit einem Radius von 800 m um eine Markierung dargestellt, wenn darauf geklickt wird.
- Fügen Sie der Implementierung von ViewController die Instanzvariable
_circhinzu.
Diese Instanzvariable wird verwendet, um den zuletzt gezeichneten Kreis zu speichern, damit dieser gelöscht werden kann, bevor eine andere gezeichnet wird. Schließlich wäre es für den Nutzer nicht sehr hilfreich und würde sehr hässlich aussehen, wenn jeder angetippte Markierung um den Kreis herumgezogen wäre.
Aktualisiere dazu die Implementierung von ViewController:
@implementation ViewController {
GMSMapView *_mapView;
GMUClusterManager *_clusterManager;
GMSCircle *_circ;
}
- Zeichnen Sie den Kreis, wenn auf eine Markierung getippt wird.
Fügen Sie unten in der Methode mapView:didTapMarker den folgenden Code ein, um eine Instanz des iOS GMSCircle-Klassens zu erstellen, um einen neuen Radius von 800 Metern zu zeichnen. Rufen Sie dazu circleWithPosition:radius: auf und übergeben Sie die Position der angetippten Markierung, wie Sie es zuvor beim Verschieben der Karte gemacht haben.
_circ = [GMSCircle circleWithPosition:marker.position radius:800];
- Stil des Kreises ändern.
Standardmäßig zeichnet GMSCircle einen Kreis mit schwarzem Strich und transparenter Füllung. Damit wird der Radius angezeigt, aber er sieht nicht sehr gut aus und ist schwer zu erkennen. Geben Sie als Nächstes eine Füllfarbe, um den Stil zu verbessern. Weisen Sie dazu der Property fillColor des Kreises UIColor zu. Mit dem folgenden Code wird eine graue Füllung mit 50% Transparenz hinzugefügt:
_circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
- Der Kreis wird auf der Karte gerendert.
Genau wie bei der Erstellung von Markierungen bist du auch beim Erstellen einer Instanz von GMSCircle nicht auf der Karte zu sehen. Ordnen Sie dazu einfach die Instanz der Kartenansicht der Property map des Kreises zu.
_circ.map = _mapView;
- Entfernen Sie alle zuvor gerenderten Kreise.
Wie bereits erwähnt, ist es eine positive Nutzererfahrung, die Karte einfach nur um weitere Kreise zu ergänzen. Wenn du den Kreis entfernen möchtest, der durch ein vorherigen Tippereignis gerendert wurde, setze die Property map von _circ oben auf mapView:didTapMarker.
_circ.map = nil;
Aktualisieren Sie die App und tippen Sie auf eine Markierung. Wenn Sie auf eine Markierung tippen oder ein zuvor gerenderter Kreis entfernt wird, sollte ein neuer Kreis gezeichnet werden.
Zusammenfassung: In diesem Schritt hast du bei jedem Tippen auf eine Markierung die Klasse GMSCircle verwendet, um einen Kreis zu rendern.
Die mapView:didTapMarker-Methode sollte so aussehen:
- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
_circ.map = nil;
[_mapView animateToLocation:marker.position];
if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
[_mapView animateToZoom:_mapView.camera.zoom +1];
return YES;
}
_circ = [GMSCircle circleWithPosition:marker.position radius:800];
_circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
_circ.map = _mapView;
return NO;
}
10. Glückwunsch
Du hast erfolgreich deine erste iOS-App mit der Google Maps Platform erstellt. Dazu gehören das Laden des Maps SDK for iOS, das Laden einer Karte, das Arbeiten mit Markierungen, das Steuern von und Zeichnen auf der Karte sowie das Hinzufügen von Nutzerinteraktionen.
Den abgeschlossenen Code siehst du im Verzeichnis /solution.
Nächste Schritte
In diesem Codelab wurden nur die Grundlagen des Maps SDK for iOS behandelt. Versuchen Sie anschließend, der Karte einige dieser Funktionen hinzuzufügen:
- Ändern Sie den Kartentyp, sodass Satelliten-, Hybrid- und Geländekarten angezeigt werden.
- Passen Sie andere Nutzerinteraktionen wie Zoomen und Karten an.
- Fügen Sie Infofenster hinzu, damit Informationen angezeigt werden, wenn auf Markierungen geklickt wird.
- Mit dem Places SDK for iOS können Sie Ihrer App praktische Funktionen und Daten für die Google Maps Platform hinzufügen.
Weitere Informationen zum Arbeiten mit der Google Maps Platform im Web finden Sie unter den folgenden Links: