1. Prima di iniziare
Questo codelab ti insegna a iniziare a utilizzare Google Maps Platform per creare app per iOS in Swift. Creerai un'app per iOS che:
- Carica Maps SDK for iOS e la libreria di utilità di Maps SDK for iOS.
- Mostra una mappa centrata su Sydney, in Australia.
- Visualizza indicatori personalizzati per 100 punti intorno a Sydney.
- Implementa il raggruppamento dei marcatori.
- Consente l'interazione dell'utente che ricentra e disegna un cerchio sulla mappa quando viene toccato un indicatore.
Prerequisiti
- Conoscenza di base dello sviluppo di Swift e iOS.
In questo lab proverai a:
- Carica Maps SDK for iOS e la libreria di utilità di Google Maps SDK for iOS.
- Caricare una mappa.
- Utilizza indicatori, indicatori personalizzati e raggruppamento di indicatori.
- Utilizza il sistema di eventi di Maps SDK for iOS per supportare l'interazione utente.
- Controlla la videocamera della mappa in modo programmatico.
- Disegna sulla mappa.
Che cosa ti serve
Per completare questo codelab, ti servono i seguenti account, servizi e strumenti:
- Xcode 12.0 o versioni successive con un SDK di destinazione 12.0 o versioni successive.
- Cocoapods installato.
- Un account Google Cloud Platform con la fatturazione attivata (vedi il passaggio successivo).
- Un progetto nella console Cloud con l'SDK Maps per iOS abilitato (vedi passaggio successivo).
2. Configurazione
Per il passaggio di attivazione riportato di seguito, devi attivare Maps SDK for iOS.
Configurare Google Maps Platform
Se non hai ancora un account Google Cloud Platform e un progetto con la fatturazione abilitata, consulta la guida Guida introduttiva a Google Maps Platform per creare un account di fatturazione e un progetto.
- Nella console Cloud, 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 i passaggi descritti in questo video o in questa documentazione.
- Genera una chiave API nella pagina Credenziali di Cloud Console. Puoi seguire i passaggi descritti 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 iniziale 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 Dammi 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 dei file necessaria per completare il codelab. Tutto ciò che ti serve per lavorare si trova nella directory/starter/StarterApp.
Per visualizzare l'esecuzione del codice della soluzione completa, visualizza il codice completato nella directory /solution/SolutionApp.
3. Installa Maps SDK for iOS
Il primo passaggio per utilizzare Maps SDK for iOS è installare le dipendenze necessarie. La procedura prevede due passaggi: l'installazione di Maps SDK for iOS e della libreria di utilità di Maps SDK for iOS dal gestore delle dipendenze CocoaPods e la fornitura della chiave API all'SDK.
- Aggiungi Maps SDK for iOS e la libreria di utilità di Maps SDK for iOS a
Podfile.
Questo codelab utilizza sia Maps SDK for iOS, che fornisce tutte le funzionalità di base di Google Maps, sia la libreria di utilità Maps iOS, che fornisce una serie di utilità per arricchire la mappa, incluso il raggruppamento dei marcatori.
Per iniziare, in Xcode (o nell'editor di testo che preferisci), apri Podfile e aggiorna il file in modo da includere le dipendenze di Maps SDK for iOS e della libreria di utilità nel commento # Pods for StarterApp:
pod 'GoogleMaps', '6.1.0' pod 'Google-Maps-iOS-Utils', '3.4.0'
Consulta la documentazione Versioni di Maps SDK for iOS per l'ultima versione dell'SDK e le 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 di Maps SDK for iOS e della libreria di utilità di Maps SDK for iOS.
Per installare le dipendenze, esegui pod install nella directory /starter dalla riga di comando. Cocoapods scarica automaticamente le dipendenze e crea StarterApp.xcworkspace.
- Una volta installate le dipendenze, esegui
open StarterApp.xcworkspacedalla directory/starterper aprire il file in Xcode, quindi esegui l'app nel simulatore di iPhone premendoCommand+R. Se tutto è configurato correttamente, il simulatore si avvia e mostra una schermata nera. Non preoccuparti, non hai ancora creato nulla, quindi è normale. - Importa l'SDK in
AppDelegate.swift.
Ora che le dipendenze sono installate, è il momento di fornire la chiave API all'SDK. Il primo passaggio consiste nell'importare Maps SDK for 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 che hai creato in Cloud Console.
Ora che le dipendenze sono installate e la chiave API è fornita, puoi iniziare a effettuare chiamate all'SDK Maps per iOS.
4. Visualizzare una mappa
È ora di visualizzare la tua prima mappa.
La parte più utilizzata di Maps SDK for iOS è la classe GMSMapView, che fornisce molti dei metodi che consentono di creare e manipolare le istanze della mappa. Ecco come fare:
- Apri
ViewController.swift.
Qui svolgerai il resto del lavoro per questo codelab. Nota che gli eventi del ciclo di vita loadView e viewDidLoad per il controller di visualizzazione sono già stati creati per te.
- Importa Maps SDK for iOS aggiungendo questo codice all'inizio del file:
import GoogleMaps
- Dichiara una variabile di istanza
ViewControllerper memorizzareGMSMapView.
L'istanza di GMSMapView è l'oggetto principale con cui lavori in questo codelab e a cui farai riferimento e su cui agirai da vari metodi del ciclo di vita del controller di visualizzazione. Per renderlo disponibile, aggiorna l'implementazione di ViewController per dichiarare una variabile di istanza in cui memorizzarlo:
class ViewController: UIViewController {
private var mapView: GMSMapView!
...
}
- In
loadView, crea un'istanza diGMSCameraPosition.
GMSCameraPosition definisce il punto centrale della mappa e il livello di zoom visualizzato. Questo codice chiama il metodo cameraWithLatitude:longitude:zoom: per centrare la mappa su Sydney, in Australia, a una latitudine di -33,86 e una longitudine di 151,20, con un livello di zoom di 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). Nota come il frame sia impostato su CGRect.zero, una variabile globale della libreria CGGeometry di iOS che specifica un frame di larghezza 0, altezza 0, posizionato nella posizione (0,0) all'interno del controller di visualizzazione. La videocamera è impostata sulla posizione che hai appena creato.
Successivamente, per visualizzare la mappa, imposta la visualizzazione principale del controller di visualizzazione 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 della mappa ti consente di gestire gli eventi derivanti dalle interazioni degli utenti 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
Successivamente, aggiungi la seguente riga nella funzione loadView per impostare GMSMapViewDelegate su ViewController.
mapView.delegate = self
Ora ricarica l'app nel simulatore iOS (Command+R) e la mappa dovrebbe apparire come mostrato nello screenshot seguente:
Figura 1. App per iOS che mostra una mappa di Google.
Ricapitolando, in questo passaggio hai creato un'istanza di GMSMapView per visualizzare una mappa centrata sulla città di Sydney, in Australia.
Il file ViewController.swift dovrebbe ora 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. Applica uno stile alla mappa (facoltativo)
Puoi personalizzare lo stile della mappa utilizzando la personalizzazione delle mappe basata su cloud.
Creare un ID mappa
Se non hai ancora creato un ID mappa a cui è associato uno stile di mappa, consulta la guida ID mappa per completare i seguenti passaggi:
- Crea un ID mappa.
- Associa un ID mappa a uno stile di mappa.
Aggiungere l'ID mappa all'app
Per utilizzare l'ID mappa che hai creato nel passaggio precedente, apri il file ViewController.swift e all'interno del metodo loadView crea un oggetto GMSMapID e fornisci l'ID mappa. A questo punto, modifica l'istanza 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
Gli sviluppatori possono fare molte cose con Maps SDK for iOS, ma posizionare indicatori sulla mappa è sicuramente la più popolare. I marcatori mostrano punti specifici sulla mappa e sono un elemento comune della UI per gestire l'interazione degli utenti. Se hai già utilizzato Google Maps, probabilmente conosci il marcatore predefinito, che ha l'aspetto dei segnaposto rossi nella Figura 2:
Figura 2. Mappa con indicatori rossi.
Questo passaggio mostra come utilizzare la classe GMSMarker per inserire indicatori sulla mappa.
Tieni presente che i marcatori non possono essere posizionati sulla mappa finché questa non viene caricata dal passaggio precedente nell'evento del ciclo di vita loadView del controller di visualizzazione, quindi completa questi passaggi nell'evento del ciclo di vita viewDidLoad, che viene chiamato dopo il caricamento della visualizzazione (e della mappa).
- 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 primo indicatore, definisci un oggetto CLLocationCoordinate2D e imposta la latitudine e la longitudine al centro della mappa. Le coordinate del centro della mappa vengono visualizzate 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.
Maps SDK for iOS fornisce la classe GMSMarker. Ogni istanza di GMSMarker rappresenta un singolo indicatore sulla mappa e viene creata chiamando markerWithPosition: e passando un oggetto CLLocationCoordinate2D per indicare all'SDK dove posizionare l'indicatore sulla mappa.
let marker = GMSMarker(position: mapCenter)
- Imposta un'icona del segnaposto personalizzata.
Il segnaposto rosso predefinito di Google Maps è ottimo, ma anche personalizzare la mappa è fantastico. Fortunatamente, l'utilizzo di un indicatore personalizzato è semplice con Maps SDK for iOS. Tieni presente che il progetto StarterApp include un'immagine denominata "custom_pin.png" che puoi utilizzare, ma puoi usare qualsiasi immagine tu voglia.
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.
Il marcatore è stato creato, ma non è ancora sulla mappa. Per farlo, imposta la proprietà map dell'istanza GMSMarker su un'istanza di GMSMapView.
marker.map = mapView
Ora ricarica l'app e guarda la tua prima mappa con un indicatore, come mostrato nella Figura 3.
Figura 3. App per iOS con Google Maps e un indicatore rosso al centro.
Ricapitolando, in questa sezione hai creato un'istanza della classe GMSMarker e l'hai applicata alla visualizzazione della mappa per visualizzare un indicatore sulla mappa. L'evento del ciclo di vita viewDidLoad aggiornato 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. Attiva il clustering dei marcatori
Se utilizzi molti indicatori o se questi sono molto vicini tra loro, potresti riscontrare un problema di sovrapposizione o affollamento, che causa una cattiva esperienza utente. Ad esempio, se due indicatori sono molto vicini tra loro, potresti ritrovarti in una situazione come quella illustrata nella Figura 4:
Immagine 4. Due indicatori molto vicini tra loro.
È qui che entra in gioco il raggruppamento dei marcatori. Il clustering dei marcatori è un'altra funzionalità implementata di frequente, che raggruppa i marcatori vicini in un'unica icona che cambia a seconda del livello di zoom, come mostrato nella Figura 5:
Figura 5. Esempio di indicatori raggruppati in un'unica icona.
L'algoritmo per il clustering dei marcatori divide 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 libreria di utilità open source utile chiamata libreria di utilità di Google Maps SDK per iOS che, tra le altre cose, gestisce automaticamente il clustering dei marcatori. Scopri di più sul clustering dei marcatori nella documentazione di Google Maps Platform o consulta l'origine della libreria di utilità iOS su GitHub.
- Aggiungi altri indicatori alla mappa.
Per vedere il raggruppamento dei marcatori in azione, devi avere molti marcatori sulla mappa. Per semplificare questa operazione, utilizza il generatore di marcatori fornito nel progetto iniziale in MarkerGenerator.swift.
Per aggiungere un numero specifico di indicatori alla mappa, chiama MarkerGenerator(near:count:).markerArray nel ciclo di vita viewDidLoad del controller di visualizzazione 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 trasmettergli la variabile mapCenter che hai creato in precedenza. I marcatori vengono restituiti in un [GMSMarker].
// Generate many markers
let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray
Puoi testare l'aspetto di questo numero di indicatori aggiungendo queste righe dopo la definizione di markerArray e poi eseguendo l'app. Assicurati di commentare queste righe prima di passare ai passaggi successivi, che utilizzano Marker Clusterer 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 libreria di utilità di Google Maps SDK for iOS.
Per aggiungere la libreria di utilità Maps per iOS come dipendenza al tuo progetto, aggiungi questo codice all'elenco delle dipendenze nella parte superiore di ViewController.swift:
import GoogleMapsUtils
- Configura il cluster di marcatori.
Per utilizzare il cluster di marcatori, devi fornire tre elementi per configurarne il funzionamento: un algoritmo di clustering, un generatore di icone e un renderer. L'algoritmo determina il comportamento di raggruppamento dei marcatori, ad esempio la distanza tra i marcatori da includere nello stesso cluster. Il generatore di icone fornisce le icone del cluster da utilizzare a diversi livelli di zoom. Il renderer gestisce il rendering effettivo delle icone del cluster sulla mappa.
Se preferisci, puoi scrivere tutto da zero. In alternativa, la libreria di utilità Maps per iOS fornisce implementazioni predefinite per velocizzare il processo. Aggiungi le seguenti righe:
// 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 dei marcatori utilizzando l'algoritmo, il generatore di icone e il renderer specificati. Per creare il renderer e renderlo disponibile per la visualizzazione della mappa, aggiungi innanzitutto una variabile di istanza all'implementazione di ViewController per memorizzare l'istanza del gestore dei cluster:
class ViewController: UIViewController, GMSMapViewDelegate {
private var mapView: GMSMapView!
private var clusterManager: GMUClusterManager!
}
Successivamente, crea l'istanza di GMUClusterManager nell'evento del ciclo di vita viewDidLoad:
clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)
- Aggiungi i marcatori ed esegui il cluster di marcatori.
Ora che l'istanza di raggruppamento dei marcatori è configurata, passa al gestore dei cluster l'array di marcatori da raggruppare chiamando add(items:), quindi esegui il raggruppamento chiamando cluster.
clusterManager.setMapDelegate(self)
clusterManager.add(markerArray)
clusterManager.cluster()
Ricarica l'app e ora dovresti vedere molti indicatori raggruppati in modo ordinato, come nell'esempio della Figura 6. Prova a utilizzare diversi livelli di zoom pizzicando e ingrandendo la mappa per vedere i cluster di indicatori adattarsi man mano che aumenti o diminuisci lo zoom.
Figura 6. App per iOS con Google Maps e indicatori raggruppati.
Ricapitolando, in questo passaggio hai configurato un'istanza del cluster di marcatori dalla libreria di utilità di Google Maps SDK per iOS, poi l'hai utilizzata per raggruppare 100 marcatori sulla mappa. L'evento del ciclo di vita viewDidLoad in ViewController.swift ora dovrebbe 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
// 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. Aggiungere l'interazione utente
Ora hai una mappa dall'aspetto accattivante che mostra i marcatori e utilizza il raggruppamento dei marcatori. In questo passaggio, aggiungerai una gestione aggiuntiva delle interazioni degli utenti utilizzando GMSMapViewDelegate, che hai impostato in precedenza sul controller di visualizzazione, per migliorare l'esperienza utente della tua mappa.
Maps SDK for iOS fornisce un sistema di eventi completo implementato tramite il delegato della visualizzazione mappa, che include gestori di eventi che consentono di eseguire codice quando si verificano varie interazioni dell'utente. Ad esempio, il delegato MapView include metodi che consentono di attivare l'esecuzione del codice per le interazioni, ad esempio il clic dell'utente sulla mappa e sui marcatori, lo spostamento della visualizzazione della mappa, lo zoom avanti e indietro e altro ancora.
In questo passaggio, esegui la panoramica della mappa in modo programmatico per centrarla su qualsiasi indicatore toccato dall'utente.
- Implementa il listener dei tocchi sul marcatore.
mapView(_:didTap:) viene chiamato ogni volta che l'utente tocca uno dei marcatori creati in precedenza e ogni volta che tocca un cluster di marcatori (internamente i cluster di marcatori vengono implementati come un'istanza di GMSMarker).
Per implementare il listener di eventi, inizia a creare uno stub nella parte inferiore di ViewController.swift prima della parentesi graffa chiusa.
func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {
return false
}
Nota che il metodo restituisce false. In questo modo, l'SDK per iOS continua a eseguire il comportamento predefinito di GMSMarker, ad esempio mostrando una finestra informativa, se ne è configurata una, dopo l'esecuzione del codice del gestore eventi.
- Gestisci l'evento di tocco e anima la videocamera per ricentrare la mappa quando viene toccato un indicatore o un cluster di indicatori.
Quando viene chiamato, mapView(_:didTap:) passa l'istanza di GMSMarker che è stata toccata in modo da poterla gestire nel codice. Puoi utilizzare questa istanza per ricentrare la mappa chiamando animate(toLocation:) nella visualizzazione della mappa dall'interno del gestore eventi e passando la posizione dell'istanza del marker dalla proprietà position.
// Animate to the marker
mapView.animate(toLocation: marker.position)
- Aumenta lo zoom su un cluster di indicatori quando viene toccato.
Un pattern UX comune è quello di aumentare lo zoom sui cluster di indicatori quando vengono toccati. In questo modo gli utenti possono visualizzare i marcatori raggruppati, man mano che il cluster si espande a livelli di zoom inferiori.
Come accennato in precedenza, l'icona del cluster di marcatori è in realtà un'implementazione di GMSMarker con un'icona personalizzata. Come puoi sapere se è stato toccato un indicatore o un cluster di indicatori? Quando il gestore del cluster di marcatori crea una nuova icona del cluster, implementa l'istanza di GMSMarker per essere conforme a un protocollo chiamato GMUCluster.. Puoi utilizzare una condizione per verificare se il marcatore passato al gestore di eventi è conforme a questo protocollo.
Una volta che sai a livello di programmazione che è stato toccato un cluster, puoi chiamare animate(toZoom:) nell'istanza della visualizzazione della mappa e impostare lo zoom sul livello di zoom corrente più uno. Il livello di zoom attuale è disponibile nell'istanza mapView nella proprietà camera.zoom.
Inoltre, nota come il seguente codice restituisce true. Indica al gestore eventi che hai completato la gestione dell'evento e di non eseguire altro codice nel gestore. Uno dei motivi per farlo è impedire all'oggetto GMSMarker sottostante di eseguire il resto del suo comportamento predefinito, ad esempio mostrare una finestra informativa, che non avrebbe molto senso nel caso di tocco di 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, la mappa viene ricentrata sull'elemento toccato. Quando viene toccato un cluster di indicatori, la mappa aumenta lo zoom di un livello e il cluster di indicatori si espande per mostrare gli indicatori raggruppati al suo interno.
Ricapitolando, in questo passaggio hai implementato il listener di tocco del marker e gestito l'evento per ricentrare l'elemento toccato e ingrandirlo se l'elemento è un'icona del cluster di marker.
Il metodo mapView(_:didTap:) dovrebbe essere simile al seguente:
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 i marcatori in 100 punti casuali e gestisce l'interazione degli utenti. Nell'ultimo passaggio di questo codelab, utilizzi le funzionalità di disegno di Maps SDK for iOS per aggiungere un'altra funzionalità utile alla tua esperienza con le mappe.
Immagina che questa mappa venga utilizzata da utenti che vogliono esplorare la città di Sydney. Una funzionalità utile sarebbe quella di visualizzare un raggio intorno a un indicatore quando viene fatto clic. In questo modo, l'utente può capire rapidamente quali altre destinazioni si trovano a breve distanza dal marker su cui ha fatto clic.
L'SDK per iOS include un insieme di funzioni per disegnare forme sulla mappa, come quadrati, poligoni, linee e cerchi. In questo passaggio, esegui il rendering di un cerchio per mostrare un raggio di 800 metri (circa mezzo miglio) intorno a un indicatore quando viene fatto clic.
- Aggiungi una variabile di istanza
circleall'implementazione di ViewController.
Questa variabile di istanza viene utilizzata per salvare il cerchio disegnato più di recente, in modo che possa essere distrutto prima di disegnarne un altro. Dopo tutto, non sarebbe molto utile per l'utente e non avrebbe un bell'aspetto se ogni indicatore toccato avesse un cerchio disegnato intorno.
Per farlo, aggiorna l'implementazione di ViewController nel seguente 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 iOS per disegnare un nuovo cerchio di 800 metri di raggio chiamando GMSCircle(position:radius:) e passando la posizione del marker toccato, come hai fatto quando hai ricentrato la mappa.
// Draw a new circle around the tapped marker
circle = GMSCircle(position: marker.position, radius: 800)
- Personalizza lo stile del cerchio.
Per impostazione predefinita, GMSCircle disegna un cerchio con un tratto nero e un riempimento trasparente. Questo metodo funziona per mostrare il raggio, ma non è molto bello ed è un po' difficile da vedere. Successivamente, assegna un colore di riempimento al cerchio per migliorare 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)
- Visualizza il cerchio sulla mappa.
Proprio come quando hai creato i marker in precedenza, la creazione di un'istanza di GMSCircle non la fa apparire sulla mappa. Per farlo, assegna l'istanza della visualizzazione della mappa alla proprietà map del cerchio.
circle?.map = mapView
- Rimuovi tutti i cerchi visualizzati in precedenza.
Come accennato in precedenza, aggiungere cerchi alla mappa non migliorerebbe l'esperienza utente. Per rimuovere il cerchio visualizzato da un evento di tocco precedente, imposta la proprietà map di circle su nil nella parte superiore di mapView(_:didTap:).
// Clear previous circles
circle?.map = nil
Ricarica l'app e tocca un indicatore. Dovresti vedere un nuovo cerchio disegnato ogni volta che viene toccato un indicatore e qualsiasi cerchio precedentemente visualizzato rimosso, come mostrato nella Figura 7.
Immagine 7. Un cerchio disegnato intorno al segnaposto toccato.
Ricapitolando, 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 con una mappa interattiva di Google.
Che cosa hai imparato
- Caricamento e configurazione di Maps SDK for iOS e della libreria di utilità di Google Maps SDK for iOS
- Caricamento di una mappa
- Applicare uno stile a una mappa
- Utilizzo di indicatori, indicatori personalizzati e raggruppamento di indicatori
- Il sistema di eventi per fornire l'interazione utente
- Controllare la videocamera della mappa in modo programmatico
- Disegno sulla mappa
Passaggi successivi
- Esplora o crea un fork del repository GitHub
maps-sdk-for-ios-samplesdi esempi e demo per trovare altra ispirazione. - Scopri di più con altri codelab Swift per creare app per iOS con Google Maps Platform
- Aiutaci a creare i contenuti che ritieni più utili rispondendo al seguente sondaggio:
Quali altri codelab vorresti vedere?
Non riesci a trovare il codelab che ti interessa di più? Richiedilo con un nuovo problema qui.