Karte in Ihre iOS-App einfügen (Objective-C)

1. Vorbereitung

Zusammenfassung

In diesem Codelab erfahren Sie alles, was Sie für den Einstieg in die Google Maps Platform zum Erstellen von iOS-Apps in Objective-C benötigen. Sie lernen alle Grundlagen kennen, von der Einrichtung über das Laden des Maps SDK for iOS, das Anzeigen Ihrer ersten Karte, das Arbeiten mit Markierungen und Markierungsclustern, das Zeichnen auf der Karte bis hin zur Verarbeitung von Nutzerinteraktionen.

Aufgaben

342520482a888519.png

In diesem Codelab erstellen Sie eine iOS-App, die Folgendes ausführt:

  • Lädt das Maps SDK for iOS und die Maps SDK for iOS-Dienstprogrammbibliothek
  • Zeigt eine Karte an, auf der Sydney, Australien, in der Mitte liegt.
  • Benutzerdefinierte Markierungen für 100 Punkte in Sydney werden angezeigt.
  • Markierungscluster implementieren
  • Ermöglicht Nutzerinteraktionen, bei denen die Karte neu zentriert und ein Kreis auf der Karte gezeichnet wird, wenn auf eine Markierung geklickt wird.

Lerninhalte

  • Erste Schritte mit der Google Maps Platform
  • Maps SDK for iOS und Google Maps SDK for iOS Utility Library laden
  • Karte wird geladen
  • Markierungen, benutzerdefinierte Markierungen und Markierungscluster verwenden
  • Nutzerinteraktion mit dem Ereignissystem des Maps SDK for iOS ermöglichen
  • Karte programmatisch steuern
  • Auf Karten zeichnen

Vorbereitung

Um dieses Codelab durchzuarbeiten, müssen Sie sich mit den folgenden Themen vertraut machen. Wenn Sie bereits mit der Google Maps Platform vertraut sind, können Sie direkt zum Codelab springen.

Erforderliche Google Maps Platform-Produkte

In diesem Codelab verwenden Sie die folgenden Google Maps Platform-Produkte:

  • Maps SDK for iOS
  • Google Maps SDK for iOS Utility Library

Einstieg in die Google Maps Platform

Wenn Sie die Google Maps Platform noch nicht verwendet haben, folgen Sie der Anleitung für die ersten Schritte mit der Google Maps Platform oder sehen Sie sich die Playlist „Erste Schritte mit der Google Maps Platform“ an, um die folgenden Schritte auszuführen:

  1. Erstellen Sie ein Rechnungskonto.
  2. Projekt erstellen
  3. Aktivieren Sie die APIs und SDKs der Google Maps Platform, die im vorherigen Abschnitt aufgeführt sind.
  4. Generieren Sie einen API-Schlüssel.

Weitere Anforderungen für dieses Codelab

Für dieses Codelab benötigen Sie die folgenden Konten, Dienste und Tools:

  • Ein Google Cloud Platform-Konto mit aktivierter Abrechnung
  • Ein Google Maps Platform-API-Schlüssel, für den das Maps SDK for iOS aktiviert ist
  • Grundlegende Kenntnisse in Objective-C
  • Xcode 12.0 mit einem Ziel-SDK von 12.0 oder höher

2. Einrichten

Für den Aktivierungsschritt unten müssen Sie das Maps SDK for iOS aktivieren.

Google Maps Platform einrichten

Wenn Sie noch kein Google Cloud-Konto und kein Projekt mit aktivierter Abrechnung haben, lesen Sie bitte den Leitfaden Erste Schritte mit Google Maps Platform, um ein Rechnungskonto und ein Projekt zu erstellen.

  1. Klicken Sie in der Cloud Console auf das Drop-down-Menü für das Projekt und wählen Sie das Projekt aus, das Sie für dieses Codelab verwenden möchten.

  1. Aktivieren Sie die für dieses Codelab erforderlichen APIs und SDKs der Google Maps Platform im Google Cloud Marketplace. Folgen Sie dazu der Anleitung in diesem Video oder dieser Dokumentation.
  2. Generieren Sie einen API-Schlüssel in der Cloud Console auf der Seite Anmeldedaten. Folgen Sie dazu dieser Anleitung oder dieser Dokumentation. Für alle Anfragen an die Google Maps Platform ist ein API-Schlüssel erforderlich.

Projekt-Startvorlage einrichten

Bevor Sie mit diesem Codelab beginnen, laden Sie die Starterprojektvorlage und den vollständigen Lösungscode herunter:

  1. Laden Sie das GitHub-Repository für dieses Codelab unter https://github.com/googlecodelabs/maps-platform-101-objc herunter oder forken Sie es.

Das StarterApp-Projekt befindet sich im Verzeichnis /starter und enthält die grundlegende Dateistruktur, die Sie für das Codelab benötigen. Alle benötigten Dateien befinden sich im Verzeichnis /starter/StarterApp.

Wenn Sie den vollständigen Lösungscode sehen möchten, können Sie die oben genannten Einrichtungsschritte ausführen und sich die Lösung im Verzeichnis /solution/SolutionApp ansehen.

3. Maps SDK for iOS installieren

Als Erstes müssen Sie die erforderlichen Abhängigkeiten installieren, um das Maps SDK for iOS verwenden zu können. Dieser Prozess umfasst zwei Schritte: die Installation des Maps SDK for iOS und der Maps SDK for iOS Utility Library über den Cocoapods-Abhängigkeitsmanager sowie die Bereitstellung Ihres API-Schlüssels für das SDK.

  1. Fügen Sie Podfile das Maps SDK for iOS und die Maps SDK for iOS Utility Library hinzu.

In diesem Codelab verwenden Sie sowohl das Maps SDK for iOS, das alle Kernfunktionen von Google Maps bietet, als auch die Maps iOS Utility Library, die eine Vielzahl von Dienstprogrammen zur Erweiterung Ihrer Karte bietet, einschließlich Markierungs-Clustering.

Öffnen Sie zuerst Pods > Podfile in Xcode (oder Ihrem bevorzugten Texteditor) und aktualisieren Sie die Datei, sodass die Abhängigkeiten für das Maps SDK for iOS und die Dienstprogrammbibliothek unter use_frameworks! enthalten sind:

pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'
  1. Installieren Sie die Pods für das Maps SDK for iOS und die Maps SDK for iOS Utility Library.

Führen Sie zum Installieren der Abhängigkeiten den Befehl pod install in der Befehlszeile im Verzeichnis /starter aus. Cocoapods lädt die Abhängigkeiten automatisch herunter und erstellt StarterApp.xcworkspace. 3. Sobald die Abhängigkeiten installiert sind, öffnen Sie StarterApp.xcworkspace in Xcode und führen Sie die App im iPhone-Simulator aus, indem Sie Command+R drücken. Wenn alles richtig eingerichtet ist, wird der Simulator gestartet und ein schwarzer Bildschirm angezeigt. Keine Sorge, du hast noch nichts erstellt. Das ist also ganz normal. 4. Importieren Sie das SDK in AppDelegate.h.

Nachdem die Abhängigkeiten installiert sind, müssen Sie dem SDK Ihren API-Schlüssel zur Verfügung stellen. Als Erstes müssen Sie das Maps SDK for iOS als Abhängigkeit importieren. Fügen Sie dazu Folgendes unter der #import "AppDelegate.h"-Importanweisung ein:

@import GoogleMaps;
  1. Deklarieren Sie unter der Importanweisung für das iOS SDK eine NSString-Konstante, deren Wert auf Ihren API-Schlüssel festgelegt ist:
static NSString *const kMapsAPIKey = @"YOUR API KEY";
  1. Übergeben Sie den API-Schlüssel an das iOS SDK, indem Sie provideAPIKey für GMSServices in application: didFinishLaunchingWithOptions: aufrufen.
- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}

Ihre 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

Ihr Podfile sollte so aussehen:

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 Sie die Abhängigkeiten installiert und Ihren API-Schlüssel angegeben haben, können Sie mit dem Aufrufen des Maps SDK for iOS beginnen.

4. Karte anzeigen

Es ist an der Zeit, Ihre erste Karte zu präsentieren.

Der am häufigsten verwendete Teil des Maps SDK for iOS ist die Klasse GMSMapView, die viele der Methoden bereitstellt, mit denen Sie Karteninstanzen erstellen und bearbeiten können. So gehts:

  1. Öffnen Sie ViewController.m.

Hier erledigen Sie alle verbleibenden Aufgaben für dieses Codelab. Die Lebenszyklusereignisse loadView und viewDidLoad für den Ansichtscontroller sind bereits für Sie vorbereitet. 2. Importieren Sie das Maps SDK for iOS, indem Sie Folgendes oben in die Datei einfügen:

@import GoogleMaps;
  1. Deklarieren Sie eine ViewController-Instanzvariable zum Speichern von GMSMapView.

Die Instanz von GMSMapView ist das Hauptobjekt, mit dem Sie in diesem Codelab arbeiten. Sie wird in verschiedenen Methoden des Lebenszyklus des Ansichts-Controllers referenziert und verwendet. Damit sie verfügbar ist, müssen Sie die Implementierung von ViewController aktualisieren, um eine Instanzvariable zu deklarieren, in der sie gespeichert wird:

@implementation ViewController {
  GMSMapView *_mapView;
}
  1. Erstelle in loadView eine Instanz von GMSCameraPosition.

Mit GMSCameraPosition wird festgelegt, wo die Karte zentriert wird und welche Zoomstufe angezeigt wird. Mit diesem Code wird die Methode cameraWithLatitude:longitude:zoom: aufgerufen, um die Karte auf Sydney (Australien) zu zentrieren. Der Breitengrad ist -33,86, der Längengrad 151,20 und die Zoomstufe 12:

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
  1. Erstellen Sie in loadView eine Instanz von GMSMapView, um die Karte zu instanziieren.

Rufen Sie mapWithFrame:camera: auf, um eine neue Karteninstanz zu erstellen. Beachten Sie, dass der Frame auf CGRectZero festgelegt ist. Das ist eine globale Variable aus der iOS-Bibliothek CGGeometry, die einen Frame mit einer Breite und Höhe von 0 angibt, der sich an der Position (0,0) im Viewcontroller befindet. Die Kamera wird auf die gerade erstellte Kameraposition eingestellt.

Damit die Karte tatsächlich angezeigt wird, legen Sie als Nächstes die Root-Ansicht des Ansichts-Controllers auf _mapview fest. Dadurch wird die Karte im Vollbildmodus angezeigt.

_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;
  1. Setzen Sie GMSMapViewDelegate auf den Ansichtscontroller.

Wenn Sie den Delegaten für die Kartenansicht implementieren, können Sie Ereignisse aus Nutzerinteraktionen in der GMSMapView-Instanz verarbeiten, was in späteren Schritten erforderlich ist.

Aktualisieren Sie 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;

Laden Sie die App jetzt im iOS-Simulator neu (Command+R). Die Karte sollte angezeigt werden.

2e6ebac422323aa6.png

Zusammenfassend lässt sich sagen, dass Sie in diesem Schritt eine Instanz von GMSMapView erstellt haben, um eine Karte mit der Stadt Sydney, Australien, im Mittelpunkt anzuzeigen.

Ihre ViewController.m-Datei 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. Cloudbasiertes Gestalten von Karteninhalten (optional)

Sie können den Stil Ihrer Karte mit cloudbasiertem Gestalten von Karteninhalten anpassen.

Karten-ID erstellen

Wenn Sie noch keine Karten-ID mit einem zugehörigen Kartenstil erstellt haben, folgen Sie der Anleitung unter Karten-IDs, um die folgenden Schritte auszuführen:

  1. Erstellen Sie eine Karten-ID.
  2. Verknüpfen Sie eine Karten-ID mit einem Kartenstil.

Karten-ID zur App hinzufügen

Wenn Sie die im vorherigen Schritt erstellte Karten-ID verwenden möchten, öffnen Sie die Datei ViewController.m und erstellen Sie in der Methode loadView ein GMSMapID-Objekt und geben Sie die Karten-ID an. Ändern Sie als Nächstes die GMSMapView-Instanziierung, indem Sie das GMSMapID-Objekt als Parameter angeben.

ViewController.m

- (void)loadView {
    GMSMapID *mapID = [[GMSMapID alloc] initWithIdentifier:@"YOUR_MAP_ID"];
    _mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
    // ...
}

Wenn Sie das erledigt haben, können Sie die App ausführen, um Ihre Karte im ausgewählten Stil zu sehen.

6. Markierungen zur Karte hinzufügen

Entwickler nutzen das Maps SDK for iOS für viele verschiedene Dinge, aber das Platzieren von Markierungen auf der Karte ist definitiv am beliebtesten. Mit Markierungen können Sie bestimmte Punkte auf der Karte anzeigen. Sie sind ein gängiges UI-Element für die Verarbeitung von Nutzerinteraktionen. Wenn Sie Google Maps schon einmal verwendet haben, kennen Sie wahrscheinlich die Standardmarkierung, die so aussieht:

590815267846f166.png

In diesem Schritt erfahren Sie, wie Sie mit der Klasse GMSMarker Markierungen auf der Karte platzieren.

Markierungen können erst auf der Karte platziert werden, nachdem die Karte im loadView-Lebenszyklusereignis des Ansichtscontrollers geladen wurde. Sie führen diese Schritte also im viewDidLoad-Lebenszyklusereignis aus, das aufgerufen wird, nachdem die Ansicht (und die Karte) geladen wurde.

  1. Definieren Sie ein CLLocationCoordinate2D-Objekt.

CLLocationCoordinate2D ist eine Struktur, die von der iOS-Bibliothek CoreLocation bereitgestellt wird und einen geografischen Standort mit einem bestimmten Breiten- und Längengrad definiert. Um Ihre erste Markierung zu erstellen, definieren Sie ein CLLocationCoordinate2D-Objekt und legen Sie den Breiten- und Längengrad auf den Mittelpunkt der Karte fest. Die Koordinaten des Kartenmittelpunkts können über die Kartenansicht mit den Attributen camera.target.latitude und camera.target.longitude abgerufen werden.

CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
  1. Erstellen Sie eine Instanz von GMSMarker.

Das Maps SDK for iOS bietet die Klasse GMSMarker. Jede Instanz von GMSMarker stellt eine einzelne Markierung auf der Karte dar. Sie wird durch Aufrufen von markerWithPosition: und Übergeben eines CLLocationCoordinate2D-Objekts erstellt, um dem SDK mitzuteilen, wo die Markierung auf der Karte platziert werden soll..

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  1. Ein benutzerdefiniertes Markierungssymbol festlegen

Die standardmäßige rote Stecknadel von Google Maps ist zwar praktisch, aber es gibt noch viele andere Möglichkeiten, Ihre Karte zu gestalten. Glücklicherweise ist die Verwendung einer benutzerdefinierten Markierung mit dem Maps SDK for iOS sehr einfach. Das StarterApp-Projekt enthält ein Bild namens „custom_pin.png“, das Sie verwenden können. Sie können aber auch ein beliebiges anderes Bild verwenden.

Um die benutzerdefinierte Markierung festzulegen, setzen Sie die Eigenschaft icon der Markierung auf eine Instanz von UIImage.

marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  1. Rendern Sie die Markierung auf der Karte.

Ihre Markierung wird erstellt, ist aber nicht auf der Karte zu sehen. Dazu setzen Sie die Eigenschaft map der GMSMarker-Instanz auf eine Instanz von GMSMapView.

marker.map = _mapView;

Laden Sie die App jetzt neu. Sie sehen nun Ihre erste Karte mit einer Markierung.

a4ea8724f8c5ba20.png

Zusammenfassend lässt sich sagen, dass Sie in diesem Abschnitt eine Instanz der Klasse „GMSMarker“ erstellt und auf die Kartenansicht angewendet haben, um eine Markierung auf der Karte anzuzeigen. Das aktualisierte Lebenszyklus-Ereignis „viewDidLoad“ 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;
}

7. Marker-Clustering aktivieren

Wenn Sie viele Markierungen oder Markierungen verwenden, die sich in unmittelbarer Nähe zueinander befinden, kann es vorkommen, dass sie sich überlappen oder zu dicht beieinander angezeigt werden. Das kann die Nutzerfreundlichkeit beeinträchtigen. Wenn zwei Markierungen sehr nah beieinander liegen, kann es beispielsweise zu folgender Situation kommen:

6e39736160c6bce4.png

Hier kommt das Markierungsclustering ins Spiel. Das Markierungs-Clustering ist eine weitere häufig implementierte Funktion, bei der nahe beieinander liegende Markierungen in einem einzelnen Symbol gruppiert werden, das sich je nach Zoomstufe ändert.

4abb38cd97cab3f1.png

Beim Algorithmus für das Markierungs-Clustering wird der sichtbare Bereich der Karte in ein Raster unterteilt. Anschließend werden Symbole, die sich in derselben Zelle befinden, gruppiert. Glücklicherweise müssen Sie sich darum nicht kümmern, da das Google Maps Platform-Team eine hilfreiche Open-Source-Dienstprogrammbibliothek namens Google Maps SDK for iOS Utility Library erstellt hat. Diese Bibliothek übernimmt unter anderem das Markierungs-Clustering automatisch für Sie. Weitere Informationen zum Markierungs-Clustering finden Sie in der Google Maps Platform-Dokumentation. Den Quellcode für die iOS Utility Library finden Sie auf GitHub.

  1. Fügen Sie der Karte viel mehr Markierungen hinzu.

Damit Sie Markierungscluster in Aktion sehen können, müssen Sie viele Markierungen auf der Karte haben. Um dies zu vereinfachen, ist im Starterprojekt in LocationGenerator.m ein praktischer Markierungsgenerator enthalten.

Wenn Sie Ihrer Karte beliebig viele Markierungen hinzufügen möchten, rufen Sie einfach generateMarkersNear:count: im viewDidLoad-Lebenszyklus des Ansichts-Controllers unter dem Code aus dem vorherigen Schritt auf. Mit der Methode wird die in count angegebene Anzahl von Markierungen an zufälligen Positionen um die in einem CLLocationCoordinate2D-Objekt angegebenen Koordinaten erstellt. In diesem Fall können Sie einfach die zuvor erstellte Variable mapCenter übergeben. Die Markierungen werden in einem NSArray zurückgegeben.

NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];
  1. Importieren Sie die Google Maps SDK for iOS-Dienstprogrammbibliothek.

Wenn Sie die Maps iOS Utility Library als Abhängigkeit zu Ihrem Projekt hinzufügen möchten, fügen Sie der Liste der Abhängigkeiten oben in ViewController.m Folgendes hinzu:

@import GoogleMapsUtils;
  1. Konfigurieren Sie den Markierungscluster.

Um den Marker-Clusterer zu verwenden, müssen Sie drei Dinge angeben, um seine Funktionsweise zu konfigurieren: einen Clustering-Algorithmus, einen Symbolgenerator und einen Renderer. Der Algorithmus bestimmt das Verhalten beim Clustern von Markierungen, z. B. den Abstand zwischen Markierungen, die in denselben Cluster aufgenommen werden sollen. Der Symbolgenerator stellt die Clustersymbole bereit, die auf verschiedenen Zoomstufen verwendet werden sollen. Der Renderer übernimmt das eigentliche Rendern der Clustersymbole auf der Karte.

Sie können alle diese Funktionen auch selbst schreiben. Die Maps iOS Utility Library bietet jedoch Standardimplementierungen, um den Prozess zu vereinfachen. 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];
  1. Erstellen Sie eine Instanz von GMUClusterManager.

GMUClusterManager ist die Klasse, die das Markierungs-Clustering mit dem von Ihnen angegebenen Algorithmus, der Symbolgenerierung und dem Renderer implementiert. Um den Renderer zu erstellen und für die Kartenansicht verfügbar zu machen, fügen Sie zuerst eine Instanzvariable zur ViewController-Implementierung hinzu, um die Cluster-Manager-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];
  1. Fügen Sie die Markierungen hinzu und führen Sie den Markierungscluster aus.

Nachdem Sie die Marker-Clusterer-Instanz konfiguriert haben, müssen Sie dem Cluster-Manager nur noch das Array der zu clusternden Marker übergeben, indem Sie addItems: aufrufen, und den Clusterer dann mit cluster ausführen.

[_clusterManager addItems:markerArray];
[_clusterManager cluster];

Aktualisieren Sie Ihre App. Jetzt sollten Sie viele Markierungen sehen, die alle übersichtlich gruppiert sind. Probieren Sie verschiedene Zoomstufen aus, indem Sie die Karte aufziehen und zusammenziehen. Sie werden sehen, wie sich die Markierungs-Cluster anpassen, wenn Sie heran- oder herauszoomen.

c49383b07752bfc4.png

In diesem Schritt haben Sie eine Instanz des Markierungs-Clusterers aus der Google Maps SDK for iOS Utility Library konfiguriert und dann verwendet, um 100 Markierungen auf der Karte zu clustern. Das viewDidLoad-Lebenszyklusereignis 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

Sie haben jetzt eine ansprechende Karte mit Markierungen und Markierungsclustern. In diesem Schritt fügen Sie mit GMSMapViewDelegate, das Sie zuvor für den Ansichtscontroller festgelegt haben, eine zusätzliche Verarbeitung von Nutzerinteraktionen hinzu, um die Nutzerfreundlichkeit Ihrer Karte zu verbessern.

Das Maps SDK for iOS bietet ein umfassendes Ereignissystem, das über den Delegaten der Kartenansicht implementiert wird. Es enthält Event-Handler, mit denen Sie Code ausführen können, wenn verschiedene Nutzerinteraktionen stattfinden. Der Mapview-Delegate enthält beispielsweise Methoden, mit denen Sie die Ausführung von Code für Interaktionen wie das Klicken des Nutzers auf die Karte und Markierungen, das Schwenken der Kartenansicht und das Ein- und Auszoomen auslösen können.

In diesem Schritt programmieren Sie, dass die Karte auf die Mitte einer Markierung geschwenkt wird, die vom Nutzer angetippt wird.

  1. Implementieren Sie den Listener für das Tippen auf Markierungen.

mapView:didTapMarker wird immer aufgerufen, wenn der Nutzer auf eine der zuvor erstellten Markierungen tippt, sowie immer, wenn ein Nutzer auf einen Markierungscluster tippt (intern werden Markierungscluster als Instanz von GMSMarker implementiert).

Um den Event-Listener zu implementieren, beginnen Sie damit, ihn unten in ViewController.m vor der end-Anweisung zu stubben.

Sie werden feststellen, dass die Methode NO zurückgibt. Dadurch wird das iOS SDK angewiesen, die Standardfunktion GMSMarker weiter auszuführen, z. B. ein Infofenster anzuzeigen, falls eines konfiguriert ist, nachdem der Event-Handler-Code ausgeführt wurde.

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {

  return NO;
}
  1. Verarbeiten Sie das Tippereignis und animieren Sie die Kamera, um die Karte neu zu zentrieren, wenn auf eine Markierung oder ein Markierungscluster getippt wird.

Wenn mapView:didTapMarker aufgerufen wird, wird die Instanz von GMSMarker übergeben, auf die getippt wurde. So können Sie sie in Ihrem Code verarbeiten. Sie können diese Instanz verwenden, um die Karte neu zu zentrieren. Rufen Sie dazu animateToLocation: in der Kartenansicht aus dem Ereignishandler auf und übergeben Sie die Position der Markierungsinstanz, die in der Eigenschaft position verfügbar ist.

[_mapView animateToLocation:marker.position];
  1. Auf einen Markierungscluster wird herangezoomt, wenn darauf getippt wird.

Ein gängiges UX-Muster ist das Einzoomen auf Markierungscluster, wenn darauf getippt wird. So können Nutzer die gruppierten Markierungen sehen, da der Cluster bei niedrigeren Zoomstufen erweitert wird.

Wie bereits erwähnt, ist das Symbol für Marker-Cluster eigentlich nur eine Implementierung von GMSMarker mit einem benutzerdefinierten Symbol. Wie können Sie also feststellen, ob auf eine Markierung oder einen Markierungscluster getippt wurde? Wenn der Marker-Clusterer-Manager ein neues Clustersymbol erstellt, wird die Instanz von GMSMarker implementiert, um einem Protokoll namens GMUCluster. zu entsprechen. Sie können eine Bedingung verwenden, um zu prüfen, ob der an den Event-Handler übergebene Marker diesem Protokoll entspricht.

Sobald Sie programmatisch wissen, dass auf einen Cluster getippt wurde, können Sie animateToZoom: für die Kartenansicht-Instanz aufrufen und die Zoomstufe auf die aktuelle Zoomstufe plus eins festlegen. Die aktuelle Zoomstufe ist in der Kartenansicht-Instanz in der Eigenschaft camera.zoom verfügbar.

Beachten Sie auch, dass der folgende Code YES zurückgibt. So wird dem Event-Handler mitgeteilt, dass Sie das Ereignis verarbeitet haben und kein weiterer Code im Handler ausgeführt werden soll. Einer der Gründe dafür ist, dass das zugrunde liegende GMSMarker-Objekt nicht den Rest seines Standardverhaltens ausführt, z. B. das Anzeigen eines Infofensters, was beim Tippen auf ein Clustersymbol nicht sinnvoll wäre.

if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
}

Laden Sie die App jetzt neu und tippen Sie auf einige Markierungen und Markierungscluster. Wenn Sie auf eines der beiden Elemente tippen, wird die Karte auf das angetippte Element zentriert. Wenn auf einen Markierungscluster getippt wird, wird die Karte um eine Stufe vergrößert und der Markierungscluster wird erweitert, um die darunter gruppierten Markierungen anzuzeigen.

In diesem Schritt haben Sie den Listener für das Tippen auf Markierungen implementiert und das Ereignis so verarbeitet, dass das getippte Element zentriert und die Ansicht vergrößert wird, wenn es sich um ein Markierungsclustersymbol handelt.

Ihre mapView:didTapMarker-Methode 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

Bisher haben Sie eine Karte von Sydney erstellt, auf der Markierungen an 100 zufälligen Punkten angezeigt werden und die Nutzerinteraktionen verarbeitet. Im letzten Schritt dieses Codelabs verwenden Sie die Zeichenfunktionen des Maps SDK for iOS, um Ihrer Karte eine zusätzliche nützliche Funktion hinzuzufügen.

Stellen Sie sich vor, diese Karte wird von Nutzern verwendet, die die Stadt Sydney erkunden möchten. Eine nützliche Funktion wäre, einen Radius um eine Markierung zu visualisieren, wenn darauf geklickt wird. So kann der Nutzer leicht erkennen, welche anderen Ziele sich in unmittelbarer Nähe 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. Als Nächstes rendern Sie einen Kreis mit einem Radius von 800 Metern (ca. 0,8 km) um eine Markierung, wenn darauf geklickt wird.

  1. Fügen Sie der Implementierung des ViewController eine _circ-Instanzvariable hinzu.

In dieser Instanzvariablen wird der zuletzt gezeichnete Kreis gespeichert, damit er gelöscht werden kann, bevor ein weiterer Kreis gezeichnet wird. Es wäre nicht sehr hilfreich für den Nutzer und würde ziemlich unübersichtlich aussehen, wenn jede angeklickte Markierung von einem Kreis umgeben wäre.

Aktualisieren Sie dazu die Implementierung von ViewController so:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
  GMSCircle *_circ;
}
  1. Zeichnen Sie den Kreis, wenn auf eine Markierung getippt wird.

Fügen Sie unten in der mapView:didTapMarker-Methode den folgenden Code ein, um eine Instanz der GMSCircle-Klasse des iOS SDK zu erstellen, mit der ein neuer Kreis mit einem Radius von 800 Metern gezeichnet wird. Rufen Sie dazu circleWithPosition:radius: auf und übergeben Sie die Position der angetippten Markierung, genau wie oben beim Zentrieren der Karte.

_circ = [GMSCircle circleWithPosition:marker.position radius:800];
  1. Kreis gestalten

Standardmäßig wird mit GMSCircle ein Kreis mit schwarzem Strich und transparenter Füllung gezeichnet. Das funktioniert zwar, sieht aber nicht besonders gut aus und ist etwas schwer zu erkennen. Als Nächstes weisen Sie dem Kreis eine Füllfarbe zu, um das Design zu verbessern. Dazu weisen Sie der fillColor-Eigenschaft des Kreises einen 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];
  1. Rendern Sie den Kreis auf der Karte.

Wie beim Erstellen von Markierungen zuvor wird die Instanz von GMSCircle nicht automatisch auf der Karte angezeigt. Weisen Sie dazu einfach die Kartenansicht-Instanz der map-Eigenschaft des Kreises zu.

_circ.map = _mapView;
  1. Entfernen Sie alle zuvor gerenderten Kreise.

Wie bereits erwähnt, wäre es keine gute Nutzererfahrung, wenn immer wieder Kreise auf der Karte hinzugefügt würden. Wenn Sie den Kreis entfernen möchten, der durch ein vorheriges Tippereignis gerendert wurde, setzen Sie die map-Eigenschaft von _circ oben in mapView:didTapMarker auf nil.

_circ.map = nil;

Laden Sie die App neu und tippen Sie auf eine Markierung. Wenn auf eine Markierung getippt wird, sollte ein neuer Kreis gezeichnet und alle zuvor gerenderten Kreise entfernt werden.

342520482a888519.png

Zusammenfassend lässt sich sagen, dass Sie in diesem Schritt die Klasse GMSCircle verwendet haben, um einen Kreis zu rendern, wenn auf eine Markierung getippt wird.

Ihre 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

Sie haben Ihre erste iOS-App mit der Google Maps Platform erstellt. Dazu haben Sie das Maps SDK for iOS geladen, eine Karte geladen, mit Markierungen gearbeitet, die Karte gesteuert und darauf gezeichnet sowie Nutzerinteraktionen hinzugefügt.

Den vollständigen Code finden Sie im fertigen Projekt im Verzeichnis /solution.

Nächste Schritte

In diesem Codelab haben wir nur die Grundlagen der Möglichkeiten des Maps SDK for iOS behandelt. Fügen Sie der Karte nun einige dieser Elemente hinzu:

  • Ändern Sie den Kartentyp, um Satelliten-, Hybrid- und Geländekarten anzuzeigen.
  • Nutzerinteraktionen wie Zoom- und Kartensteuerelemente anpassen
  • Fügen Sie Infofenster hinzu, um Informationen anzuzeigen, wenn auf Markierungen geklickt wird.
  • Mit dem Places SDK for iOS können Sie Ihrer App umfangreiche Ortsfunktionen und ‑daten der Google Maps Platform hinzufügen.

Weitere Informationen zur Verwendung der Google Maps Platform im Web finden Sie unter den folgenden Links: