Questa pagina è stata tradotta dall'API Cloud Translation.

Aggiungere una mappa alla tua app per iOS (Objective-C)

1. Prima di iniziare

Abstract

In questo codelab imparerai tutto ciò che ti serve per iniziare a utilizzare Google Maps Platform per creare app per iOS in Objective-C. Imparerai tutte le nozioni di base, dalla configurazione al caricamento di Maps SDK for iOS, alla visualizzazione della prima mappa, all'utilizzo di indicatori e raggruppamento di indicatori, al disegno sulla mappa e alla gestione dell'interazione dell'utente.

Cosa creerai

In questo codelab creerai un'app per iOS che:

Carica Maps SDK for iOS e la libreria di utilità di Maps SDK for iOS
Visualizza una mappa centrata su Sydney, in Australia
Visualizza indicatori personalizzati per 100 punti intorno a Sydney
Implementa il clustering dei marker
Consente l'interazione dell'utente che ricentra e disegna un cerchio sulla mappa quando viene fatto clic su un indicatore

Obiettivi didattici

Inizia a utilizzare Google Maps Platform
Caricamento di Maps SDK for iOS e della libreria di utilità di Google Maps SDK for iOS
Caricare una mappa
Utilizzo di indicatori, indicatori personalizzati e raggruppamento di indicatori
Utilizzo del sistema di eventi di Maps SDK for iOS per fornire l'interazione utente
Controllare la mappa in modo programmatico
Disegnare sulla mappa

Prerequisiti

Per completare questo codelab, devi familiarizzare con gli elementi riportati di seguito. Se hai già familiarità con Google Maps Platform, vai direttamente al codelab.

Prodotti Google Maps Platform richiesti

In questo codelab utilizzerai i seguenti prodotti Google Maps Platform:

Maps SDK for iOS
Libreria di utilità di Google Maps SDK for iOS

Inizia a utilizzare Google Maps Platform

Se non hai mai utilizzato Google Maps Platform, segui la guida Inizia a utilizzare Google Maps Platform o guarda la playlist Inizia a utilizzare Google Maps Platform per completare i seguenti passaggi:

Crea un account di fatturazione.
Creare un progetto.
Abilita le API e gli SDK di Google Maps Platform (elencati nella sezione precedente).
Genera una chiave API.

Altri requisiti per questo codelab

Per completare questo codelab, ti serviranno i seguenti account, servizi e strumenti:

Un account Google Cloud Platform con la fatturazione attivata
Una chiave API di Google Maps Platform con l'SDK Maps per iOS abilitato
Conoscenza di base di Objective-C
Xcode 12.0 con un SDK di destinazione 12.0 o versioni successive

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.

Configurazione del modello iniziale del progetto

Prima di iniziare questo codelab, segui questi passaggi per scaricare il modello di progetto iniziale e il codice della soluzione completa:

Scarica o crea una fork del repository GitHub per questo codelab all'indirizzo https://github.com/googlecodelabs/maps-platform-101-objc.

Il progetto StarterApp si trova nella directory /starter e 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.

Se vuoi vedere il codice della soluzione completo in esecuzione, puoi completare i passaggi di configurazione riportati sopra e visualizzare la soluzione 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.

In questo codelab, utilizzerai 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 tua mappa, incluso il clustering dei marcatori.

Per iniziare, in Xcode (o nell'editor di testo che preferisci) apri Pods > Podfile e aggiorna il file in modo da includere le dipendenze di Maps SDK for iOS e della libreria di utilità in use_frameworks!:

pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'

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 scaricherà automaticamente le dipendenze e creerà StarterApp.xcworkspace. 3. Una volta installate le dipendenze, apri StarterApp.xcworkspace in Xcode, quindi esegui l'app nel simulatore di iPhone premendo Command+R. Se tutto è configurato correttamente, il simulatore si avvia e mostra una schermata nera. Non preoccuparti, non hai ancora creato nulla, quindi è normale. 4. Importa l'SDK in AppDelegate.h.

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 "AppDelegate.h":

@import GoogleMaps;

Sotto l'istruzione di importazione dell'SDK per iOS, dichiara una costante NSString con il valore impostato sulla tua chiave API:

static NSString *const kMapsAPIKey = @"YOUR API KEY";

Passa la chiave API all'SDK per iOS chiamando provideAPIKey su GMSServices in application: didFinishLaunchingWithOptions:

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}

Il file AppDelegate.m aggiornato dovrebbe avere il seguente aspetto:

#import "AppDelegate.h"
@import GoogleMaps;

static NSString *const kMapsAPIKey = @"YOUR API KEY";

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}
@end

Il tuo Podfile dovrebbe avere il seguente aspetto:

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

target 'StarterApp' do
  use_frameworks!

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

end

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

Qui svolgerai tutto il lavoro rimanente per questo codelab. Noterai che gli eventi del ciclo di vita loadView e viewDidLoad per il controller di visualizzazione sono già stati creati per te. 2. Importa Maps SDK for iOS aggiungendo quanto segue all'inizio del file:

@import GoogleMaps;

Dichiara una variabile di istanza ViewController per memorizzare GMSMapView.

L'istanza di GMSMapView è l'oggetto principale con cui lavorerai 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:

@implementation ViewController {
  GMSMapView *_mapView;
}

In loadView, crea un'istanza di GMSCameraPosition.

GMSCameraPosition definisce il punto centrale della mappa e il livello di zoom che verrà 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:

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];

In loadView, crea un'istanza di GMSMapView per creare un'istanza della mappa.

Per creare una nuova istanza della mappa, chiama mapWithFrame:camera:. Nota come il frame sia impostato su CGRectZero, 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.

Per visualizzare effettivamente la mappa, imposta la visualizzazione principale del controller di visualizzazione su _mapview, in modo che la mappa venga visualizzata a schermo intero.

_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;

Imposta GMSMapViewDelegate sul controller di visualizzazione.

Una volta implementato, il delegato della visualizzazione della mappa ti consente di gestire gli eventi dalle interazioni degli utenti nell'istanza GMSMapView, che ti servirà nei passaggi successivi.

Innanzitutto, aggiorna l'interfaccia di ViewController in modo che sia conforme al protocollo per GMSMapViewDelegate:

@interface ViewController ()<GMSMapViewDelegate>

Quindi, aggiungi quanto segue per impostare GMSMapViewDelegate su ViewController.

_mapView.delegate = self;

Ora ricarica l'app nel simulatore iOS (Command+R) e la mappa dovrebbe apparire.

Ricapitolando, in questo passaggio hai creato un'istanza di GMSMapView per visualizzare una mappa centrata sulla città di Sydney, in Australia.

Il file ViewController.m dovrebbe ora avere il seguente aspetto:

#import "ViewController.h"
#import "LocationGenerator.h"
@import GoogleMaps;

@interface ViewController ()<GMSMapViewDelegate>
@end

@implementation ViewController {
  GMSMapView *_mapView;
}

- (void)loadView {
  [super loadView];
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;
  _mapView.delegate = self;
}

5. Personalizzazione delle mappe basata su cloud (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 alla tua app

Per utilizzare l'ID mappa che hai creato nel passaggio precedente, apri il file ViewController.m 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.m

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

Una volta completata questa operazione, 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 inserire indicatori sulla mappa è sicuramente l'attività più popolare. I marcatori ti consentono di mostrare 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 segnaposto predefinito, che ha questo aspetto:

In questo passaggio, imparerai a utilizzare la classe GMSMarker per inserire i marcatori 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, pertanto completerai 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. È possibile accedere alle coordinate del centro della mappa dalla visualizzazione mappa utilizzando le proprietà camera.target.latitude e camera.target.longitude.

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

GMSMarker *marker = [GMSMarker markerWithPosition: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 è molto semplice con Maps SDK for iOS. Noterai che il progetto StarterApp include un'immagine denominata "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 imageNamed:@"custom_pin.png"];

Visualizza l'indicatore sulla mappa.

Il marcatore viene creato, ma non viene visualizzato 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.

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.m dovrebbe ora avere il seguente aspetto:

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
}

7. Attiva il clustering dei marcatori

Quando utilizzi molti indicatori o indicatori molto vicini tra loro, potresti riscontrare un problema di sovrapposizione o di affollamento, che causa una cattiva esperienza utente. Ad esempio, se due indicatori sono molto vicini tra loro, potresti ritrovarti in una situazione come questa:

È qui che entra in gioco il raggruppamento dei marcatori. Il clustering dei marcatori è un'altra funzionalità comunemente implementata, che raggruppa i marcatori vicini in un'unica icona che cambia a seconda del livello di zoom, come in questo esempio:

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. Fortunatamente, non devi preoccuparti di nulla di tutto ciò, perché il team di Google Maps Platform ha creato una libreria di utilità open source utile chiamata Google Maps SDK for iOS Utility Library. Questa libreria, tra le altre cose, gestisce automaticamente il clustering dei marcatori. Puoi leggere ulteriori informazioni sul clustering dei marcatori nella documentazione di Google Maps Platform o consultare l'origine della libreria di utilità iOS su GitHub.

Aggiungi molti altri indicatori alla mappa.

Per vedere il clustering dei marcatori in azione, devi avere molti marcatori sulla mappa. Per semplificare questa operazione, nel progetto iniziale in LocationGenerator.m viene fornito un comodo generatore di marcatori.

Per aggiungere tutti i marcatori che vuoi alla mappa, chiama semplicemente generateMarkersNear:count: 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 semplicemente passare la variabile mapCenter che hai creato in precedenza. I marcatori vengono restituiti in un NSArray.

NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

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 quanto segue all'elenco delle dipendenze nella parte superiore di ViewController.m:

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

Puoi scrivere tutto da zero se preferisci, ma la libreria di utilità Maps per iOS fornisce implementazioni predefinite per semplificare la procedura. Aggiungi quanto segue:

id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];

id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];

id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];

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:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
}

Successivamente, crea l'istanza di GMUClusterManager nell'evento del ciclo di vita viewDidLoad:

_clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

Aggiungi i marcatori ed esegui il cluster di marcatori.

Ora che l'istanza di raggruppamento dei marcatori è configurata, devi solo passare al gestore del cluster l'array di marcatori da raggruppare chiamando addItems:, quindi esegui il raggruppamento chiamando cluster.

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

Ricarica l'app e ora dovresti vedere un sacco di indicatori raggruppati in modo ordinato. Prova a utilizzare diversi livelli di zoom, pizzicando e aumentando lo zoom sulla mappa, per vedere i cluster di indicatori adattarsi man mano che aumenti o diminuisci lo zoom.

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.m ora dovrebbe avere il seguente aspetto:

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude,
                                                                _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
  NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

  id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
  id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];
  id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
  _clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

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

8. Aggiungere l'interazione utente

Ora hai una mappa dall'aspetto fantastico 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 della 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 interazioni come il clic dell'utente sulla mappa e sui marker, lo spostamento della visualizzazione della mappa, lo zoom avanti e indietro e altro ancora.

In questo passaggio, eseguirai la panoramica della mappa in modo programmatico per centrare qualsiasi marcatore toccato dall'utente.

Implementa il listener dei tocchi sul marcatore.

mapView:didTapMarker viene chiamato ogni volta che l'utente tocca uno dei marcatori creati in precedenza, nonché ogni volta che tocca un cluster di marcatori (internamente i cluster di marcatori vengono implementati come istanza di GMSMarker).

Per implementare il listener di eventi, inizia a creare uno stub in fondo a ViewController.m prima dell'istruzione end.

Noterai che il metodo restituisce NO. In questo modo, l'SDK per iOS continua a eseguire la funzionalità GMSMarker predefinita, ad esempio la visualizzazione di una finestra informativa, se ne è configurata una, dopo l'esecuzione del codice del gestore eventi.

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

  return NO;
}

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:didTapMarker passa l'istanza di GMSMarker che è stata toccata, consentendoti di gestirla nel codice. Puoi utilizzare questa istanza per ricentrare la mappa chiamando animateToLocation: nella visualizzazione della mappa dall'interno del gestore eventi e passando la posizione dell'istanza del marker, disponibile nella proprietà position.

[_mapView animateToLocation: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, poiché il cluster si espande a livelli di zoom inferiori.

Come accennato in precedenza, l'icona del cluster di marcatori è in realtà solo 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 animateToZoom: sull'istanza della visualizzazione della mappa e impostare lo zoom sul livello di zoom corrente più uno. Il livello di zoom attuale è disponibile nell'istanza della visualizzazione della mappa nella proprietà camera.zoom.

Inoltre, nota come il codice riportato di seguito restituisce YES. 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 ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
}

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 marcatore e gestito l'evento per ricentrare l'elemento toccato e ingrandire se l'elemento è un'icona di cluster di marcatori.

Il metodo mapView:didTapMarker dovrebbe essere simile al seguente:

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  [_mapView animateToLocation:marker.position];

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

  return NO;
}

9. Disegna sulla mappa

Finora hai creato una mappa di Sydney che mostra i segnaposto in 100 punti casuali e gestisce l'interazione degli utenti. Per l'ultimo passaggio di questo codelab, utilizzerai 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 facilmente quali altre destinazioni si trovano a pochi passi 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. Successivamente, visualizzerai 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 _circ all'implementazione di ViewController.

Questa variabile di istanza verrà utilizzata per salvare il cerchio disegnato più di recente, in modo che possa essere distrutto prima che ne venga disegnato un altro. Dopotutto, non sarebbe molto utile per l'utente e sarebbe piuttosto brutto se ogni indicatore toccato avesse un cerchio disegnato intorno.

Per farlo, aggiorna l'implementazione di ViewController nel seguente modo:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
  GMSCircle *_circ;
}

Disegna il cerchio quando viene toccato un indicatore.

Nella parte inferiore del metodo mapView:didTapMarker, aggiungi il seguente codice per creare un'istanza della classe GMSCircle dell'SDK per iOS per disegnare un nuovo cerchio di 800 metri di raggio chiamando circleWithPosition:radius: e passando la posizione del marker toccato, proprio come hai fatto sopra quando hai ricentrato la mappa.

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

Personalizza lo stile del cerchio.

Per impostazione predefinita, GMSCircle disegna un cerchio con un tratto nero e un riempimento trasparente. In questo modo il raggio viene visualizzato, ma non è molto bello e 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 seguente codice aggiungerà un riempimento grigio con una trasparenza del 50%:

_circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];

Visualizza il cerchio sulla mappa.

Come quando hai creato i segnaposto in precedenza, noterai che la semplice creazione di un'istanza di GMSCircle non la fa apparire sulla mappa. Per farlo, assegna l'istanza della visualizzazione mappa alla proprietà map del cerchio.

_circ.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 _circ su nil nella parte superiore di mapView:didTapMarker.

_circ.map = nil;

Ricarica l'app e tocca un segnaposto. Dovresti vedere un nuovo cerchio disegnato ogni volta che viene toccato un indicatore e il cerchio visualizzato in precedenza viene rimosso.

Ricapitolando, in questo passaggio hai utilizzato la classe GMSCircle per visualizzare un cerchio ogni volta che viene toccato un indicatore.

Il metodo mapView:didTapMarker dovrebbe essere simile al seguente:

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  _circ.map = nil;
  [_mapView animateToLocation:marker.position];

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

  _circ = [GMSCircle circleWithPosition:marker.position radius:800];
  _circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
  _circ.map = _mapView;
  return NO;
}

10. Complimenti

Hai creato correttamente la tua prima app per iOS utilizzando Google Maps Platform, inclusi il caricamento di Maps SDK for iOS, il caricamento di una mappa, l'utilizzo dei marker, il controllo e il disegno sulla mappa e l'aggiunta dell'interazione dell'utente.

Per visualizzare il codice completato, controlla la directory /solution del progetto finito.

Passaggi successivi

In questo codelab abbiamo trattato solo le nozioni di base di ciò che puoi fare con Maps SDK for iOS. Poi, prova ad aggiungere alcune di queste funzionalità alla mappa:

Modifica il tipo di mappa per visualizzare mappe satellitari, ibride e del terreno.
Personalizza altre interazioni dell'utente come lo zoom e i controlli della mappa.
Aggiungi finestre informative per visualizzare le informazioni quando si fa clic sui marcatori.
Consulta l'SDK Places per iOS per aggiungere dati e funzionalità avanzate di Google Maps Platform alla tua app.

Per continuare a scoprire altri modi per utilizzare Google Maps Platform sul web, consulta questi link:

Aggiungere una mappa alla tua app per iOS (Objective-C) Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

1. Prima di iniziare

Abstract

Cosa creerai

Obiettivi didattici

Prerequisiti

Prodotti Google Maps Platform richiesti

Inizia a utilizzare Google Maps Platform

Altri requisiti per questo codelab

2. Configurazione

Configurare Google Maps Platform

Configurazione del modello iniziale del progetto

3. Installa Maps SDK for iOS

4. Visualizzare una mappa

5. Personalizzazione delle mappe basata su cloud (facoltativo)

Creare un ID mappa

Aggiungere l'ID mappa alla tua app

ViewController.m

6. Aggiungere indicatori alla mappa

7. Attiva il clustering dei marcatori

8. Aggiungere l'interazione utente

9. Disegna sulla mappa

10. Complimenti

Passaggi successivi

Aggiungere una mappa alla tua app per iOS (Objective-C)