1. Prima di iniziare
Questo codelab ti spiega come iniziare a utilizzare Google Maps Platform per creare app per iOS in Swift. Dovrai creare un'app per iOS che:
- Carica l'SDK Maps per iOS e l'SDK Maps per iOS.
- Visualizza una mappa incentrata su Sydney, Australia.
- Visualizza indicatori personalizzati per 100 punti intorno a Sydney.
- Implementa il clustering degli indicatori.
- Consente l'interazione dell'utente che centra nuovamente e traccia un cerchio sulla mappa quando viene toccato un indicatore.
Prerequisiti
- Conoscenza di base dello sviluppo di Swift e iOS.
Obiettivi didattici
- Caricamento di Maps SDK for iOS e di Google Maps SDK for iOS Utility Library.
- Caricamento di una mappa.
- Utilizzare indicatori, indicatori personalizzati e clustering di indicatori.
- Utilizzare l'SDK Maps per il sistema di eventi iOS per offrire l'interazione dell'utente.
- Controllo programmatico della fotocamera tramite mappa.
- Disegnare sulla mappa.
Che cosa ti serve
Per completare questo codelab, hai bisogno dei seguenti account, servizi e strumenti:
- Xcode 12.0 o versioni successive con un SDK target di 12.0 o versioni successive.
- Cocoapodi installati.
- Un account Google Cloud Platform con fatturazione abilitata (vedi il passaggio successivo).
- Un progetto in Cloud Console con l'SDK Maps per iOS abilitato (vedi il passaggio successivo).
2. Configura
Per il passaggio di attivazione qui sotto, devi attivare l'SDK Maps per iOS.
Configurare Google Maps Platform
Se non hai ancora un account Google Cloud Platform e un progetto con la fatturazione abilitata, consulta la guida Utilizzo di Google Maps Platform per creare un account di fatturazione e un progetto.
- In Cloud Console, fai clic sul menu a discesa del progetto e seleziona il progetto che vuoi utilizzare per questo codelab.
- Abilita le API e gli SDK di Google Maps Platform richiesti per questo codelab in Google Cloud Marketplace. Per farlo, segui la procedura descritta in questo video o in questa documentazione.
- Genera una chiave API nella pagina Credentials di Cloud Console. Puoi seguire la procedura descritta in questo video o in questa documentazione. Tutte le richieste a Google Maps Platform richiedono una chiave API.
Guida rapida
Per iniziare il più rapidamente possibile, ecco un codice di avvio che ti aiuterà a seguire questo codelab.
- Clona il repository se hai installato
git.
git clone https://github.com/googlemaps/codelab-maps-platform-101-swift.git
In alternativa, fai clic su Mi fornisci il codice per scaricare il codice sorgente.
- Dopo aver scaricato il codice, apri il progetto StarterApp nella directory
/starter. Questo progetto include la struttura di base del file di cui hai bisogno per completare il codelab. Tutto ciò che ti serve è disponibile nella directory/starter/StarterApp.
Per visualizzare il codice della soluzione completo in esecuzione, visualizza il codice completato nella directory /solution/SolutionApp.
3. Installa l'SDK Maps per iOS
Il primo passaggio per utilizzare Maps SDK for iOS consiste nell'installare le dipendenze necessarie. La procedura prevede due passaggi: l'installazione dell'SDK di Maps per iOS e della Utility Maps per iOS dalla libreria delle dipendenze Cocoapods e per fornire la chiave API all'SDK.
- Aggiungi l'SDK Maps per iOS e l'SDK Maps per iOS in
Podfile.
Questo codelab utilizza sia l'SDK Maps per iOS, che fornisce tutte le funzionalità di base di Google Maps, sia la Libreria applicazioni di iOS di Maps, che fornisce una varietà di utilità per arricchire la mappa, tra cui il clustering degli indicatori.
Per iniziare, in Xcode (o nel tuo editor di testo preferito) apri Podfile e aggiorna il file in modo da includere le dipendenze di Maps SDK for iOS e della Utility Library sotto il commento # Pods for StarterApp:
pod 'GoogleMaps', '6.1.0'
pod 'Google-Maps-iOS-Utils', '3.4.0'
Consulta la documentazione relativa alle versioni dell'SDK Maps per iOS per conoscere la versione più recente dell'SDK e indicazioni per la manutenzione.
Il tuo Podfile dovrebbe avere il seguente aspetto:
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
- Installa i pod Maps SDK for iOS e Maps SDK for iOS Utility Library.
Per installare le dipendenze, esegui pod install nella directory /starter dalla riga di comando. Cocoapods scarica automaticamente le dipendenze e crea StarterApp.xcworkspace.
- Dopo aver installato le dipendenze, esegui
open StarterApp.xcworkspacedalla directory/starterper aprire il file in Xcode, quindi esegui l'app nel simulatore dell'iPhone premendoCommand+R. Se tutto è configurato correttamente, il simulatore viene avviato e viene visualizzata una schermata nera. Non ti preoccupare, non hai ancora creato nulla, quindi è previsto! - Importa l'SDK in
AppDelegate.swift.
Ora che le dipendenze sono installate, è il momento di fornire la tua chiave API all'SDK. Il primo passaggio consiste nell'importare l'SDK Maps per iOS come dipendenza inserendo quanto segue sotto l'istruzione di importazione import UIKit:
import GoogleMaps
- Passa la tua chiave API all'SDK per iOS chiamando
provideAPIKeysuGMSServicesinapplication: didFinishLaunchingWithOptions:
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
GMSServices.provideAPIKey("YOUR_API_KEY")
return true
}
Il file AppDelegate.swift aggiornato dovrebbe avere il seguente aspetto:
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
}
}
Sostituisci YOUR_API_KEY con la chiave API creata in Cloud Console.
Una volta installate le dipendenze e fornita la chiave API, puoi iniziare a effettuare chiamate all'SDK di Maps per iOS.
4. Visualizzazione di una mappa
È ora di visualizzare la tua prima mappa.
La parte più utilizzata dell'SDK di Maps per iOS è la classe GMSMapView, che fornisce molti dei metodi che consentono di creare e manipolare istanze di mappa. Ecco come è fatto.
- Apri
ViewController.swift.
Qui svolgerai il resto del lavoro per questo codelab. Nota che gli eventi del ciclo di vita loadView e viewDidLoad del controller di visualizzazione sono già simulati.
- Importa l'SDK di Maps per iOS aggiungendolo nella parte superiore del file:
import GoogleMaps
- Dichiara una variabile di istanza
ViewControllerper archiviareGMSMapView.
L'istanza di GMSMapView è l'oggetto principale con cui lavori in questo codelab, come riferimento per i diversi metodi di ciclo di vita del controller view e di intervenire su di esso. Per renderla disponibile, aggiorna l'implementazione di ViewController per dichiarare una variabile di istanza per archiviarla:
class ViewController: UIViewController {
private var mapView: GMSMapView!
...
}
- In
loadView, crea un'istanza diGMSCameraPosition.
GMSCameraPosition definisce il punto al centro della mappa e il livello di zoom visualizzato. Questo codice chiama il metodo cameraWithLatitude:longitude:zoom: per centrare la mappa su Sydney, in Australia, con una latitudine di -33,86 e una longitudine di 151,20, con un livello di zoom pari a 12:
let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 12)
- In
loadView, crea un'istanza diGMSMapViewper creare un'istanza della mappa.
Per creare una nuova istanza della mappa, chiama GMSMapView(frame: CGRect, camera: GMSCameraPosition). Tieni presente che il frame è impostato su CGRect.zero, una variabile globale della libreria CGGeometry di iOS che specifica un frame di 0 larghezza, 0 altezza e che si trova in posizione (0,0) all'interno del controller di visualizzazione. La videocamera è impostata sulla posizione appena creata.
In seguito, per visualizzare la mappa, imposta la visualizzazione principale del controller della vista su mapView, in modo che la mappa venga visualizzata a schermo intero.
mapView = GMSMapView(frame: .zero, camera: camera)
self.view = mapView
- Imposta
GMSMapViewDelegatesul controller di visualizzazione.
Una volta implementato, il delegato della visualizzazione mappa ti consente di gestire gli eventi delle interazioni utente sull'istanza GMSMapView di cui avrai bisogno in un secondo momento.
Innanzitutto, aggiorna l'interfaccia di ViewController in modo che sia conforme al protocollo per GMSMapViewDelegate:
class ViewController: UIViewController, GMSMapViewDelegate
Quindi, aggiungi questa funzione nella funzione loadView per impostare GMSMapViewDelegate su ViewController.
mapView.delegate = self
Ora ricarica l'app nel simulatore di iOS (Command+R) e la mappa dovrebbe essere visualizzata come mostrato nella Figura 1.
Figura 1. App per iOS che mostra una mappa di Google Maps.
In questo passaggio hai creato un'istanza di GMSMapView per mostrare una mappa incentrata sulla città di Sydney, in Australia.
Il file ViewController.swift dovrebbe avere il seguente aspetto:
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. Definizione dello stile della mappa (facoltativo)
Puoi personalizzare lo stile della mappa utilizzando gli stili basati su cloud.
Crea un ID mappa
Se non hai ancora creato un ID mappa con uno stile associato, consulta la guida ID mappa per completare la seguente procedura:
- Crea un ID mappa.
- Associa un ID mappa a uno stile mappa.
Aggiungi l'ID mappa alla tua app
Per utilizzare l'ID mappa che hai creato nel passaggio precedente, apri il file ViewController.swift e, nel metodo loadView, crea un oggetto GMSMapID e forniscigli l'ID mappa. Poi modifica l'istanza di GMSMapView fornendo l'oggetto GMSMapID come parametro.
ViewController.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
}
Al termine, esegui l'app per visualizzare la mappa nello stile che hai selezionato.
6. Aggiungere indicatori alla mappa
L'SDK di Maps per iOS richiede molte cose, ma è importante inserire gli indicatori sulla mappa. Gli indicatori mostrano punti specifici sulla mappa e rappresentano un elemento comune dell'interfaccia utente per la gestione dell'interazione degli utenti. Se hai già utilizzato Google Maps, probabilmente conosci l'indicatore predefinito, che ha un aspetto simile ai segnaposto rossi nella Figura 2:
Figura 2. Mappa con indicatori rossi.
Questo passaggio illustra come utilizzare la classe GMSMarker per inserire indicatori sulla mappa.
Tieni presente che gli indicatori non possono essere inseriti sulla mappa fino a quando non viene caricata la mappa dal passaggio precedente nell'evento del ciclo di vita loadView del controller di visualizzazione, quindi completa questi passaggi nell'evento del ciclo di vita di viewDidLoad, che viene chiamato dopo che la visualizzazione (e la mappa) è stata caricata.
- Definisci un oggetto
CLLocationCoordinate2D.
CLLocationCoordinate2D è una struttura resa disponibile dalla libreria CoreLocation di iOS, che definisce una posizione geografica a una latitudine e una longitudine impostate. Per iniziare a creare il tuo primo indicatore, definisci un oggetto CLLocationCoordinate2D e imposta la latitudine e la longitudine al centro della mappa. Le coordinate del centro della mappa sono accessibili dalla visualizzazione mappa utilizzando le proprietà camera.target.latitude e camera.target.longitude.
// Add a single marker with a custom icon
let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
- Crea un'istanza di
GMSMarker.
L'SDK Maps per iOS fornisce la classe GMSMarker. Ogni istanza di GMSMarker rappresenta un singolo indicatore sulla mappa e viene creata chiamando markerWithPosition: e trasmettendolo un oggetto CLLocationCoordinate2D per indicare all'SDK dove posizionare l'indicatore sulla mappa.
let marker = GMSMarker(position: mapCenter)
- Imposta un'icona dell'indicatore personalizzato.
L'indicatore rosso predefinito per Google Maps è fantastico, ma è anche possibile personalizzare la mappa. Fortunatamente, l'utilizzo di un indicatore personalizzato è molto semplice con l'SDK Maps per iOS. Tieni presente che il progetto StarterApp include un'immagine chiamata "custom_pin.png'" che puoi utilizzare, ma puoi usare qualsiasi immagine.
Per impostare l'indicatore personalizzato, imposta la proprietà icon dell'indicatore su un'istanza di UIImage.
marker.icon = UIImage(named: "custom_pin.png")
- Visualizza l'indicatore sulla mappa.
L'indicatore è stato creato, ma non è ancora sulla mappa. A tale scopo, imposta la proprietà map dell'istanza GMSMarker su un'istanza di GMSMapView.
marker.map = mapView
Ora ricarica l'app e osserva la tua prima mappa con un indicatore come mostrato nella Figura 3.
Figura 3. App per iOS con Google Maps e indicatore rosso al centro.
In breve, in questa sezione hai creato un'istanza della classe GMSMarker e l'hai applicata alla visualizzazione mappa per mostrare un indicatore sulla mappa. L'evento aggiornato del ciclo di vita viewDoneLoad in ViewController.swift dovrebbe ora avere il seguente aspetto:
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. Abilita cluster di indicatori
Se utilizzi molti indicatori o hai indicatori molto vicini tra loro, potresti riscontrare un problema in cui gli indicatori si sovrappongono o appaiono affollati, causando un'esperienza utente negativa. Ad esempio, se due indicatori sono molto vicini, potresti ottenere una situazione come mostrato nella Figura 4:
Figura 4. Due indicatori sono molto vicini.
È qui che entra in gioco il clustering degli indicatori. Il clustering degli indicatori è un'altra funzionalità ampiamente implementata, che raggruppa gli indicatori vicini in un'unica icona che varia a seconda del livello di zoom, come illustrato nella Figura 5:
Figura 5. Esempio di indicatori raggruppati in una singola icona.
L'algoritmo per il clustering degli indicatori suddivide l'area visibile della mappa in una griglia, quindi raggruppa le icone che si trovano nella stessa cella. Il team di Google Maps Platform ha creato una utile libreria open source chiamata Google Maps SDK for iOS Utility Library che, tra le altre cose, gestisce automaticamente il clustering degli indicatori. Leggi ulteriori informazioni sul clustering degli indicatori nella documentazione di Google Maps Platform o controlla l'origine della libreria delle utilità per iOS su GitHub.
- Aggiungi molti altri indicatori alla mappa.
Per vedere il raggruppamento degli indicatori in azione, devi inserire sulla mappa molti indicatori. Per semplificare questa operazione, nel progetto iniziale in MarkerGenerator.swift troverai un pratico generatore di indicatori.
Per aggiungere un numero specifico di indicatori alla mappa, chiama MarkerGenerator(near:count:).markerArray nel ciclo di vita viewDidLoad del controller vista sotto il codice del passaggio precedente. Il metodo crea il numero di indicatori specificato in count in posizioni casuali intorno alle coordinate specificate in un oggetto CLLocationCoordinate2D. In questo caso, puoi trasmetterla alla variabile mapCenter che hai creato in precedenza. Gli indicatori vengono restituiti in un elemento [GMSMarker].
// Generate many markers
let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray
Puoi testare l'aspetto di così tanti indicatori aggiungendo queste righe dopo la definizione di markerArray ed eseguendo l'app. Assicurati di aggiungere queste righe prima di passare ai passaggi successivi, che utilizzano invece lo strumento di cluster di indicatore per gestire la visualizzazione degli indicatori:
// Comment the following code out if using the marker clusterer
// to manage markers instead.
for marker in markerArray {
marker.map = mapView
}
- Importa la Utilità Google Maps SDK for iOS.
Per aggiungere la libreria di utilità di iOS per Maps come dipendenza al tuo progetto, aggiungila all'elenco delle dipendenze nella parte superiore di ViewController.swift:
import GoogleMapsUtils
- Configura il clusterer di indicatore.
Per utilizzare il clusterer di indicatore, devi fornire tre elementi per configurare il suo funzionamento: un algoritmo di clustering, un generatore di icone e un renderer. L'algoritmo determina il comportamento di clustering degli indicatori, ad esempio la distanza tra gli indicatori da includere nello stesso cluster. Il generatore di icone fornisce icone dei cluster da utilizzare a diversi livelli di zoom. Il renderer gestisce la visualizzazione effettiva delle icone dei cluster sulla mappa.
Se preferisci, puoi scrivere tutto questo, ma la libreria di utilità di Maps per iOS fornisce implementazioni predefinite per semplificare il processo. Aggiungi:
// 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)
- Crea un'istanza di
GMUClusterManager.
GMUClusterManager è la classe che implementa il clustering degli indicatori utilizzando l'algoritmo, il generatore di icone e il renderer specificati da te. Per creare il renderer e renderlo disponibile nella visualizzazione mappa, aggiungi innanzitutto una variabile di istanza all'implementazione ViewController per archiviare l'istanza di gestione del cluster:
class ViewController: UIViewController, GMSMapViewDelegate {
private var mapView: GMSMapView!
private var clusterManager: GMUClusterManager!
}
Quindi, crea l'istanza di GMUClusterManager nell'evento del ciclo di vita viewDidLoad:
clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)
- Aggiungi gli indicatori ed esegui il cluster di indicatori.
Ora che l'istanza di cluster di indicatori è configurata, passa al gestore del cluster l'array di indicatori da raggruppare chiamando add(items:), quindi esegui il clusterer chiamando cluster.
clusterManager.setMapDelegate(self)
clusterManager.add(markerArray)
clusterManager.cluster()
Ricarica la tua app e ora dovresti vedere molti indicatori ben raggruppati, come nell'esempio nella Figura 6. Vai avanti e divertiti con diversi livelli di zoom pizzicando e aumentando lo zoom sulla mappa per vedere i cluster di indicatori che si adattano man mano che aumenti o diminuisci lo zoom.
Figura 6. App per iOS con Google Maps e indicatori in cluster.
In questo modo, hai configurato un'istanza del clusterer di indicatori nell'SDK Google Maps SDK for iOS, quindi l'hai utilizzata per raggruppare 100 indicatori sulla mappa. L'evento del ciclo di vita di viewDidLoad in ViewController.swift dovrebbe essere simile al seguente:
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. Aggiungi interazione utente
Ora hai una mappa attraente che mostra indicatori e utilizza il clustering degli indicatori. In questo passaggio dovrai aggiungere ulteriori informazioni sulla gestione delle interazioni degli utenti utilizzando GMSMapViewDelegate, che hai impostato in precedenza sul controller di visualizzazione, per migliorare l'esperienza utente sulla mappa.
L'SDK Maps per iOS fornisce un sistema di eventi completo implementato tramite il delegato della visualizzazione mappa, che include i gestori di eventi che ti consentono di eseguire il codice quando si verificano varie interazioni degli utenti. Ad esempio, il delegato di MapView include metodi che ti consentono di attivare l'esecuzione del codice per le interazioni, come il clic sull'utente e la mappa, la panoramica della mappa, lo zoom in avanti e indietro, e altro ancora.
In questo passaggio, puoi eseguire la panoramica in modo programmatico della mappa su qualsiasi indicatore toccato dall'utente.
- Implementa il listener di tocco dell'indicatore.
mapView(_:didTap:) viene chiamato ogni volta che l'utente tocca uno degli indicatori creati in precedenza e ogni volta che tocca un cluster di indicatore (i cluster di indicatori interni sono implementati come istanza di GMSMarker).
Per implementare il listener di eventi, inizia strofinandolo in fondo a ViewController.swift prima della parentesi graffa di chiusura.
func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {
return false
}
Tieni presente che il metodo restituisce false. In questo modo indichi all'SDK di iOS di continuare a eseguire la funzionalità predefinita di GMSMarker, ad esempio di mostrare una finestra informativa se ne è stata configurata una dopo l'esecuzione del codice del gestore di eventi.
- Gestisci l'evento di tocco e anima la fotocamera per ricentrare la mappa quando viene toccato un indicatore.
Quando la chiamata viene eseguita, mapView(_:didTap:) passa l'istanza di GMSMarker che è stata toccata per consentirti di gestirla nel codice. Puoi utilizzare questa istanza per ricentrare la mappa richiamando animate(toLocation:) sulla visualizzazione mappa dall'interno del gestore di eventi e passando la posizione dell'istanza dell'indicatore dalla proprietà position.
// Animate to the marker
mapView.animate(toLocation: marker.position)
- Aumenta lo zoom su un cluster indicatore quando viene toccato.
Un pattern UX comune consiste nell'aumentare lo zoom sui cluster degli indicatori quando vengono toccati. Questo consente agli utenti di visualizzare gli indicatori in cluster, mentre il cluster si espande a livelli di zoom inferiori.
Come indicato in precedenza, l'icona del cluster dell'indicatore in realtà è un'implementazione di GMSMarker con un'icona personalizzata. Come puoi capire se un indicatore o un cluster di indicatori è stato toccato? Quando il gestore del cluster di indicatori crea una nuova icona di cluster, implementa l'istanza di GMSMarker in modo che sia conforme a un protocollo chiamato GMUCluster.. Puoi utilizzare una condizione per verificare se l'indicatore passato nel gestore di eventi è conforme a questo protocollo.
Una volta che sai a livello di programmazione che un cluster è stato toccato, puoi chiamare animate(toZoom:) sull'istanza di visualizzazione mappa e impostare lo zoom sul livello di zoom corrente più uno. Il livello di zoom corrente è disponibile nell'istanza mapView nella proprietà camera.zoom.
Inoltre, nota come il codice riportato di seguito restituisce true. Questa opzione informa il gestore di eventi che hai completato la gestione dell'evento e non deve eseguire ulteriori codici nel gestore. Uno dei motivi per cui ciò si verifica è impedire all'oggetto GMSMarker sottostante di eseguire il resto del comportamento predefinito, ad esempio la visualizzazione di una finestra informativa, che non avrebbe molto senso nel caso in cui si toccasse un'icona di cluster.
// 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
}
Ora ricarica l'app e tocca alcuni indicatori e cluster di indicatori. Quando viene toccato uno dei due valori, la mappa viene ricentrata sull'elemento toccato. Quando viene toccato un cluster di indicatori, la mappa aumenta anche lo zoom di un livello e il cluster si espande per mostrare gli indicatori raggruppati sotto.
Ricapitolando, in questo passaggio hai implementato il listener di tocchi. Hai gestito l'evento per centrare di nuovo l'elemento toccato e aumentare lo zoom se l'elemento è un'icona di cluster di indicatore.
Il metodo mapView(_:didTap:) dovrebbe avere il seguente aspetto:
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. Disegna sulla mappa
Finora hai creato una mappa di Sydney che mostra indicatori in 100 punti casuali e che gestisce l'interazione degli utenti. Nell'ultimo passaggio di questo codelab, utilizzerai le funzionalità di disegno di Maps SDK for iOS per aggiungere un'ulteriore funzionalità utile alla tua esperienza sulla mappa.
Immagina che questa mappa venga utilizzata dagli utenti che hanno intenzione di esplorare la città di Sydney. Una funzionalità utile consiste nel visualizzare un raggio intorno a un indicatore quando viene selezionato. consentendo all'utente di comprendere facilmente quali altre destinazioni si trovano a pochi passi dall'indicatore selezionato.
L'SDK per iOS include un insieme di funzioni per disegnare forme sulla mappa, come quadrati, poligoni, linee e cerchi. In questo passaggio, visualizza un cerchio per mostrare un raggio di 800 metri intorno all'indicatore quando viene selezionato.
- Aggiungi una variabile di istanza
circleall'implementazione di ViewController.
Questa variabile di istanza viene utilizzata per salvare il cerchio tracciato più di recente, in modo che possa essere eliminato prima di tracciare un'altra. Dopotutto, non sarebbe molto utile per l'utente e non sarebbe bello se ogni indicatore toccato avesse un cerchio intorno a te!
A tale scopo, aggiorna l'implementazione di ViewController in questo modo:
class ViewController: UIViewController, GMSMapViewDelegate {
private var mapView: GMSMapView!
private var clusterManager: GMUClusterManager!
private var circle: GMSCircle? = nil
...
}
- Disegna il cerchio quando viene toccato un indicatore.
Nella parte inferiore del metodo mapView(_:didTap:) appena sopra l'istruzione return false, aggiungi il codice mostrato qui per creare un'istanza della classe GMSCircle dell'SDK di iOS per disegnare un nuovo cerchio di 800 metri chiamando GMSCircle(position:radius:) e passando la posizione dell'indicatore toccato come hai fatto quando hai centrato nuovamente la mappa.
// Draw a new circle around the tapped marker
circle = GMSCircle(position: marker.position, radius: 800)
- Applica stili al cerchio.
Per impostazione predefinita, GMSCircle traccia un cerchio con un tratto nero e un riempimento trasparente. Funziona per mostrare il raggio, ma non è bellissimo e un po' difficile da vedere. Quindi, assegna un colore di riempimento al cerchio per migliorarne lo stile assegnando un UIColor alla proprietà fillColor del cerchio. Il codice mostrato qui aggiunge un riempimento grigio con una trasparenza del 50%:
circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)
- Traccia il cerchio sulla mappa.
Come hai creato gli indicatori precedenti, la creazione di un'istanza di GMSCircle non mostra la mappa. A tale scopo, assegna l'istanza di visualizzazione mappa alla proprietà map della cerchia.
circle?.map = mapView
- Rimuovi le cerchie visualizzate in precedenza.
Come detto in precedenza, non sarebbe un'ottima esperienza per gli utenti continuare ad aggiungere cerchi alla mappa. Per rimuovere la cerchia visualizzata da un evento di tocco precedente, imposta la proprietà map di circle su nil in cima a mapView(_:didTap:).
// Clear previous circles
circle?.map = nil
Ricarica l'app e tocca un indicatore. Dovresti vedere un nuovo cerchio tracciato ogni volta che viene toccato un indicatore e viene rimosso qualsiasi cerchio visualizzato in precedenza, come mostrato nella Figura 7.
Figura 7. Un cerchio disegnato intorno all'indicatore toccato.
Riepilogando, in questo passaggio hai utilizzato la classe GMSCircle per visualizzare un cerchio ogni volta che viene toccato un indicatore.
Il metodo mapView(_:didTap:) dovrebbe avere il seguente aspetto:
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. Complimenti
Hai creato un'app per iOS in cui è attiva una mappa Google interattiva.
Che cosa hai imparato
- Caricamento e configurazione dell'SDK di Maps per iOS e dell'SDK di Google Maps per iOS Libreria di utilità
- Caricamento di una mappa
- Stile di una mappa
- Utilizzare gli indicatori, gli indicatori personalizzati e il clustering degli indicatori
- Il sistema di eventi per fornire l'interazione dell'utente.
- Controllare la fotocamera della mappa in modo programmatico
- Disegnare sulla mappa
Passaggi successivi
- Esplora o crea un fork del repository GitHub di campioni e demo di
maps-sdk-for-ios-samplesper trovare più ispirazione - Scopri altri codelab per Swift per creare app per iOS con Google Maps Platform
- Aiutaci a creare i contenuti che troverai più utili rispondendo alla domanda di seguito:
Quali altri codelab vorresti vedere?
Il codelab non vuoi vedere sopra? Richiedilo qui con un nuovo problema.