Karte zu Ihrer iOS-App hinzufügen (Swift)

1. Vorbereitung

In diesem Codelab lernen Sie, wie Sie mit der Google Maps Platform iOS-Apps in Swift erstellen. Sie erstellen eine iOS-App, die folgende Aktionen durchführt:

• Lädt das Maps SDK for iOS und die Maps SDK for iOS-Dienstprogrammbibliothek.
• Zeigt eine Karte mit Mittelpunkt Sydneys, 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 getippt wird

Vorbereitung

• Grundkenntnisse in der Entwicklung von Swift und iOS.

Lerninhalte

• Maps SDK for iOS und Google Maps SDK for iOS-Dienstprogrammbibliothek laden
• Karte wird geladen.
• Markierungen, benutzerdefinierte Markierungen und Markierungscluster verwenden
• Zusammenarbeit mit dem Maps SDK for iOS-Ereignissystem für die Nutzerinteraktion
• Kartenkamera programmatisch steuern
• Auf der Karte zeichnen.

Voraussetzungen

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

• Xcode 12.0 oder höher mit einem Ziel-SDK von Version 12.0 oder höher
• CocoaPods muss installiert sein.
• Google Cloud Platform-Konto mit aktivierter Abrechnung (siehe nächster Schritt).
• Ein Projekt in der Cloud Console mit aktiviertem Maps SDK for iOS (siehe nächster Schritt).

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.

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

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

Kurzanleitung

Damit Sie so schnell wie möglich loslegen können, erhalten Sie hier einen Startcode, den Sie bei diesem Codelab nutzen können.

1. Wenn Sie git installiert haben, klonen Sie das Repository.

git clone https://github.com/googlemaps/codelab-maps-platform-101-swift.git

Alternativ können Sie auf Code anfordern klicken, um den Quellcode herunterzuladen.

Code anfordern

2. Nachdem du den Code heruntergeladen hast, öffne das StarterApp-Projekt im Verzeichnis /starter. Dieses Projekt enthält die grundlegende Dateistruktur, die Sie für das Codelab benötigen. Alles, was du brauchst, findest du im Verzeichnis /starter/StarterApp.

Den vollständigen Lösungscode sehen Sie, wenn Sie sich den abgeschlossenen Code 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.

1. Füge die Maps SDK for iOS- und Maps SDK for iOS-Dienstprogrammbibliothek Podfile hinzu.

In diesem Codelab werden sowohl das Maps SDK for iOS, das alle Hauptfunktionen von Google Maps bietet, als auch die Maps iOS-Dienstprogrammbibliothek verwendet, die eine Vielzahl von Dienstprogramme bietet, mit denen Sie Ihre Karte bereichern können.

Öffnen Sie zuerst in Xcode (oder Ihrem bevorzugten Texteditor) Podfile und aktualisieren Sie die Datei so, dass sie Abhängigkeiten der Maps SDK for iOS- und Dienstprogrammbibliothek unter dem Kommentar # Pods for StarterApp enthält:

pod 'GoogleMaps', '6.1.0'
pod 'Google-Maps-iOS-Utils', '3.4.0'

In der Dokumentation zu den Maps SDK for iOS-Versionen finden Sie die aktuelle Version des SDK sowie Informationen zur Wartung.

Beispiel für Podfile:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '12.0'

target 'StarterApp' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for StarterApp
  pod 'GoogleMaps', '6.1.0'
  pod 'Google-Maps-iOS-Utils', '3.4.0'
end

2. 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 lädt automatisch die Abhängigkeiten herunter und erstellt StarterApp.xcworkspace.

3. Führen Sie nach der Installation der Abhängigkeiten open StarterApp.xcworkspace aus dem /starter-Verzeichnis aus, um die Datei in Xcode zu öffnen, und führen Sie dann 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. Aber keine Sorge, du hast noch nichts gebaut!
4. Importieren Sie das SDK in AppDelegate.swift.

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 UIKit ein:

import GoogleMaps

5. Übergib deinen API-Schlüssel an das iOS SDK, indem du provideAPIKey in GMSServices in application: didFinishLaunchingWithOptions: aufrufst.

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

Die aktualisierte AppDelegate.swift-Datei sollte jetzt so aussehen:

import UIKit
import GoogleMaps

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

}

Ersetze YOUR_API_KEY durch den API-Schlüssel, den du in der Cloud Console erstellt hast.

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.

1. Öffnen Sie ViewController.swift.

Hier erledigen Sie den Rest dieser Arbeit für dieses Codelab. Die Lebenszyklusereignisse loadView und viewDidLoad für den Ansichts-Controller sind bereits gekürzt.

2. Importiere das Maps SDK for iOS, indem du es oben in die Datei einfügst:

import GoogleMaps

3. Deklarieren Sie eine ViewController-Instanzvariable, um GMSMapView zu speichern.

Die Instanz von GMSMapView ist das Hauptobjekt, mit dem Sie in diesem Codelab zusammenarbeiten, und Sie können verschiedene Lebenszyklusmethoden für den Controller verwenden, um darauf zu reagieren. Aktualisieren Sie die Implementierung von ViewController, um eine Instanzvariable zu speichern, damit sie verfügbar ist:

class ViewController: UIViewController {

  private var mapView: GMSMapView!

  ...
}

4. Erstellen Sie in loadView eine Instanz von GMSCameraPosition.

GMSCameraPosition gibt an, wo die Karte zentriert wird 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:

let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 12)

5. Erstelle in loadView eine Instanz von GMSMapView, um die Karte zu instanziieren.

Rufe GMSMapView(frame: CGRect, camera: GMSCameraPosition) auf, um eine neue Karteninstanz zu erstellen. Der Frame ist auf CGRect.zero 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.

Setze als Nächstes die Stammansicht des Ansichts-Controllers auf mapView, um die Karte im Vollbildmodus anzuzeigen.

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView

6. Legen Sie GMSMapViewDelegate auf 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

class ViewController: UIViewController, GMSMapViewDelegate

Als Nächstes fügen Sie die Funktion in der Funktion loadView hinzu, um GMSMapViewDelegate auf ViewController festzulegen.

    mapView.delegate = self

Aktualisieren Sie die App im iOS-Simulator (Command+R). Die Karte sollte wie in Abbildung 1 zu sehen sein.

Abbildung 1: iOS-App mit Google Maps

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.swift sollte jetzt so aussehen:

import UIKit
import GoogleMaps

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
  }

}

5. Karte anpassen (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:

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

Hinweis:Wenn Sie eine Karten-ID im Maps SDK for Android oder Maps SDK for iOS verwenden, wird ein Kartenaufruf ausgelöst, der mit der Dynamics Maps SKU verrechnet wird. Weitere Informationen finden Sie unter Google Maps-Abrechnung.

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

AnsichtController.swift

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)
    let mapID = GMSMapID(identifier: "YOUR_MAP_ID")

    mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

Wenn dies erledigt ist, führen Sie die App aus, um Ihre Karte im ausgewählten 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. Markierungen zeigen bestimmte Punkte auf der Karte an und sind ein gängiges UI-Element für die Verarbeitung von Nutzerinteraktionen. Wenn Sie Google Maps bereits verwendet haben, kennen Sie wahrscheinlich die Standardmarkierung, die wie die roten Markierungen in Abbildung 2 aussieht:

Abbildung 2. Karte mit roten Markierungen

In diesem Schritt wird gezeigt, wie du mit der Klasse GMSMarker Markierungen auf der Karte platzieren kannst.

Beachten Sie, dass Markierungen nicht auf der Karte platziert werden können, nachdem die Karte aus dem vorherigen Schritt im Lebenszyklusereignis des Ansichts-ControllersloadView geladen wurde. Führen Sie daher diese Schritte im Lebenszyklusereignis viewDidLoad aus. Dieses Ereignis wird aufgerufen, nachdem die Ansicht (und Karte) geladen wurde.

1. 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 wird über die Kartenansicht mit den Properties camera.target.latitude und camera.target.longitude zugegriffen.

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)

2. 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 das SDK zu informieren, wo die Markierung auf der Karte platziert werden soll.

    let marker = GMSMarker(position: mapCenter)

3. 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&#39“. Sie können es aber verwenden.

Setze die Property icon der Markierung auf eine Instanz von UIImage, um die benutzerdefinierte Markierung festzulegen.

    marker.icon = UIImage(named: "custom_pin.png")

4. Hiermit wird die Markierung auf der Karte gerendert.

Die Markierung wurde erstellt, ist aber noch nicht auf der Karte zu sehen. Setze dazu die Property map der Instanz GMSMarker auf eine Instanz von GMSMapView.

    marker.map = mapView

Aktualisieren Sie nun die App und beobachten Sie Ihre erste Karte mit einer Markierung, wie in Abbildung 3 gezeigt.

Abbildung 3: iOS-App mit einer Google Maps-Karte mit roter Markierung in der Mitte

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.swift sollte nun so aussehen:

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView
  }

7. Markierungscluster aktivieren

Wenn Sie viele Markierungen verwenden oder sich sehr nah beieinander befinden, kann es zu Problemen mit dem Überlappen oder überfüllten Markierungen kommen, was die Nutzung beeinträchtigt. Wenn beispielsweise zwei Markierungen sehr dicht beieinander liegen, ergibt sich die Situation in Abbildung 4:

Abbildung 4. Zwei Markierungen sind sehr nah beieinander.

Hier kommen Markierungscluster zum Einsatz. Markierungscluster sind eine weitere häufig implementierte Funktion, bei der Markierungen in der Nähe in einem einzigen Symbol gruppiert werden, das sich je nach Zoomstufe ändert (siehe Abbildung 5):

Abbildung 5. Beispiel für Markierungen, die in ein einzelnes Symbol gruppiert sind.

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. Das Google Maps Platform-Team hat eine praktische Open-Source-Dienstprogrammbibliothek namens „Google Maps SDK for iOS“ erstellt, die unter anderem die Markierungscluster automatisch verarbeitet. Weitere Informationen zum Markierungs-Clustering findest du in der Google Maps Platform-Dokumentation oder auf der GitHub-Seite zur iOS-Dienstprogrammbibliothek.

1. 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 MarkerGenerator.swift einen praktischen Markierungsgenerator.

Um deiner Karte eine bestimmte Anzahl von Markierungen hinzuzufügen, rufe MarkerGenerator(near:count:).markerArray im Lebenszyklus von viewDidLoad im Ansicht-Controller 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 der zuvor erstellten Variable mapCenter übergeben. Die Markierungen werden in einem [GMSMarker] zurückgegeben.

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray

Du kannst testen, wie viele Markierungen aussehen, indem du diese Zeilen nach der Definition von markerArray hinzufügst und dann die App startest. Denke daran, diese Zeilen auskommentieren, bevor du mit den nächsten Schritten fortfährst, die stattdessen die Markierungs-Cluster verwenden, um die Anzeige der Markierungen zu verwalten:

    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    for marker in markerArray {
      marker.map = mapView
    }

2. 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 dies der Liste der Abhängigkeiten oben in ViewController.swift hinzu:

import GoogleMapsUtils

3. 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. Hinzufügen:

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)

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

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
}

Erstellen Sie als Nächstes die Instanz von GMUClusterManager im Lebenszyklusereignis viewDidLoad:

    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

5. Fügen Sie die Markierungen hinzu und führen Sie den Markierungs-Cluster aus.

Nachdem Sie die Markierungs-Clustering-Instanz konfiguriert haben, übergeben Sie den Clustermanager und rufen das Cluster-Markierungscluster auf, indem Sie add(items:) aufrufen. Anschließend führen Sie den Clusterer durch Aufrufen von cluster aus.

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()

Wenn Sie Ihre Anwendung neu laden, sollten Sie wie im Beispiel in Abbildung 6 sehen, dass viele Markierungscluster gruppiert sind. Probieren Sie einfach verschiedene Zoomstufen aus und zoomen Sie auf der Karte heran, um zu sehen, wie sich die Markierungscluster beim Heran- und Herauszoomen anpassen.

Abbildung 6: iOS-App mit einer Google Maps-Karte und Markierungs-Cluster

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.swift sollte jetzt so aussehen:

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray
    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    //    for marker in markerArray {
    //      marker.map = mapView
    //    }

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)
    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()
  }

8. Nutzerinteraktion hinzufügen

Sie haben jetzt eine hervorragende Karte, auf der Markierungen angezeigt werden 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 MapView-Bevollmächtigte enthält beispielsweise Methoden, mit denen Sie die Codeausführung für Interaktionen auslösen können, z. B. Nutzer, die auf die Karte und Markierungen klicken, die Ansicht der Karte schwenken oder heran- und herauszoomen.

In diesem Schritt schwenken Sie die Karte programmatisch zu jeder Markierung, die vom Nutzer angetippt wird.

1. Implementiere den Tippen-Listener für Markierungen.

mapView(_:didTap:) wird jedes Mal aufgerufen, wenn der Nutzer auf eine der zuvor erstellten Markierungen tippt, und jedes Mal, wenn ein Nutzer auf einen Markierungscluster tippt. Intern werden Markierungscluster als Instanz von GMSMarker implementiert.

Sie implementieren den Ereignis-Listener, indem Sie ihn vor dem schließenden geschweiften Klammern ViewController.swift einfügen.

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    return false
  }

Die Methode gibt false zurück. 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.

2. 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 Aufruf übergibt mapView(_:didTap:) die Instanz von GMSMarker, auf die getippt wurde, damit du sie in deinem Code verarbeiten kannst. Du kannst diese Instanz verwenden, um die Karte neu zu zentrieren, indem du in der Kartenansicht animate(toLocation:) aus dem Ereignis-Handler aufrufst und die Position der Markierungsinstanz von der Property position übergibst.

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

3. 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 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 animate(toZoom:) in der Kartenansicht aufrufen und den Zoom auf die aktuelle Zoomstufe plus eine festlegen. Die aktuelle Zoomstufe ist für die MapView-Instanz in der camera.zoom-Property verfügbar.

Achte auch darauf, dass der folgende Code true 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 the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

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.

Zur Zusammenfassung: In diesem Schritt hast du den Listener für das Antippen von Markierungen implementiert und das Ereignis auf ein neues Element für das angetippte Element getippt und es herangezoomt, wenn es sich um ein Markierungs-Cluster-Symbol handelt.

Die Methode mapView(_:didTap:) sollte so aussehen:

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    return false
  }

9. Auf der Karte zeichnen

Bisher haben Sie eine Karte von Sydney erstellt, auf der Markierungen an 100 Punkten zu sehen sind und Nutzerinteraktionen verarbeitet werden. Im letzten Schritt dieses Codelabs kannst du mithilfe der Zeichenfunktionen des Maps SDK for iOS deiner Karte ein zusätzliches nützliches Merkmal hinzufü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. In diesem Schritt rendern Sie einen Kreis, um einen Radius von 800 m um eine Markierung herum anzuzeigen.

1. Fügen Sie der Implementierung von ViewController die Instanzvariable circle hinzu.

Diese Instanzvariable wird verwendet, um den zuletzt gezeichneten Kreis zu speichern, sodass dieser gelöscht werden kann, bevor eine andere gezeichnet wird. Das ist schließlich für den Nutzer nicht besonders hilfreich und es sähe nicht so gut aus, wenn es um jeden Punkt getippt hätte, wenn darauf getippt wurde.

Aktualisiere dazu die Implementierung von ViewController:

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
  private var circle: GMSCircle? = nil
  ...
}

2. Zeichnen Sie den Kreis, wenn auf eine Markierung getippt wird.

Fügen Sie unten in der mapView(_:didTap:)-Methode direkt über der return false-Anweisung den hier gezeigten Code ein, um eine Instanz des iOS-SDK "GMSCircle" zu erstellen und so einen neuen Radius von 800 m zeichnen zu können. Rufen Sie dazu GMSCircle(position:radius:) auf und übergeben Sie die Position der angetippten Markierung wie beim Neuzen der Karte.

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)

3. Stil des Kreises ändern.

Standardmäßig zeichnet GMSCircle einen Kreis mit schwarzem Strich und transparenter Füllung. Die Anzeige des Umkreises funktioniert zwar, sieht aber nicht 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. Der hier gezeigte Code führt zu einer grauen Füllung mit 50% Transparenz:

    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)

4. Der Kreis wird auf der Karte gerendert.

Genau wie beim vorherigen Erstellen von Markierungen wird eine Instanz von GMSCircle nicht auf der Karte angezeigt. Weisen Sie dazu die Kartenansichtsinstanz der Property map des Kreises zu.

    circle?.map = mapView

5. Entfernen Sie alle zuvor gerenderten Kreise.

Wie bereits erwähnt, ist es eine sehr positive Erfahrung, die Karte weiterhin hinzuzufügen. Wenn du den Kreis entfernen möchtest, der durch ein vorherigen Tippereignis gerendert wurde, setze die Property map von circle oben auf mapView(_:didTap:).

    // Clear previous circles
    circle?.map = nil

Aktualisieren Sie die App und tippen Sie auf eine Markierung. Sie sollten bei jedem Tippen auf eine Markierung einen neuen Kreis zeichnen und alle zuvor gerenderten Kreise entfernen, wie in Abbildung 7 gezeigt.

Abbildung 7. Ein Kreis, der um die angetippte Markierung gezeichnet wird

Zusammenfassung: In diesem Schritt hast du bei jedem Tippen auf eine Markierung die Klasse GMSCircle verwendet, um einen Kreis zu rendern.

Die Methode mapView(_:didTap:) sollte so aussehen:

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Clear previous circles
    circle?.map = nil

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)
    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)
    circle?.map = mapView
    return false
  }

10. Glückwunsch

Du hast eine iOS-App mit einer interaktiven Google-Karte erstellt.

Das haben Sie gelernt

• Maps SDK for iOS laden und konfigurieren und Dienstprogrammbibliothek für das Maps SDK for iOS
• Karten laden
• Karten formatieren
• Markierungen verwenden, benutzerdefinierte Markierungen und Markierungs-Clustering
• Das Ereignissystem zur Nutzerinteraktion
• Kartenkamera programmatisch steuern
• Zeichnen auf der Karte

Nächste Schritte

• Im maps-sdk-for-ios-samples-GitHub-Repository mit Beispielen und Demos finden Sie weitere Informationen
• Weitere Swift-Codelabs zum Erstellen von iOS-Apps mit der Google Maps Platform
• Hilf uns, die Inhalte zu erstellen, die für dich am nützlichsten wären. Beantworten Sie dazu die folgende Frage:

Welche weiteren Codelabs möchten Sie sehen?

Datenvisualisierung auf Google Maps Weitere Informationen zum Anpassen des Kartenstils Erstellen von 3D-Interaktionen in Karten

Ist das Codelab, das oben nicht aufgeführt werden soll? Hier können Sie ein neues Problem beantragen.