Gli indicatori indicano singole località sulla mappa.
Per impostazione predefinita, gli indicatori utilizzano un'icona standard che ha l'aspetto e il design comuni di Google Maps. Se vuoi personalizzare l'indicatore, puoi cambiare il colore dell'indicatore predefinito, sostituire l'immagine dell'indicatore con un'icona personalizzata o modificare altre proprietà dell'indicatore.
In risposta a un evento di clic su un indicatore, puoi aprire una finestra di informazione. Una finestra informativa mostra testo o immagini in una finestra di dialogo sopra l'indicatore. Puoi utilizzare una finestra informativa predefinita per visualizzare il testo o creare la tua finestra informativa personalizzata per controllare completamente i relativi contenuti.
Aggiunta di un indicatore
Per aggiungere un indicatore, crea un oggetto
GMSMarker
che includa position
e title
e impostane map
.
L'esempio seguente mostra come aggiungere un indicatore a un oggetto GMSMapView
esistente. L'indicatore viene creato alle coordinate 10,10
e mostra la stringa "Hello world" in una finestra informativa quando viene fatto clic.
Swift
let position = CLLocationCoordinate2D(latitude: 10, longitude: 10) let marker = GMSMarker(position: position) marker.title = "Hello World" marker.map = mapView
Objective-C
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10); GMSMarker *marker = [GMSMarker markerWithPosition:position]; marker.title = @"Hello World"; marker.map = mapView;
Puoi animare l'aggiunta di nuovi indicatori alla mappa impostando la proprietà marker.appearAnimation
su:
kGMSMarkerAnimationPop
per fare in modo che il marker venga visualizzato al di fuori delgroundAnchor
quando viene aggiunto.kGMSMarkerAnimationFadeIn
per fare in modo che il marcatore venga visualizzato gradualmente quando viene aggiunto.
Rimuovere un indicatore
Puoi rimuovere un indicatore dalla mappa impostando la proprietà map
di GMSMarker
su nil
. In alternativa, puoi rimuovere tutti gli overlay
(inclusi gli indicatori) attualmente presenti sulla mappa chiamando il metodo GMSMapView
clear
.
Swift
let camera = GMSCameraPosition.camera( withLatitude: -33.8683, longitude: 151.2086, zoom: 6 ) let mapView = GMSMapView.map(withFrame: .zero, camera: camera) // ... mapView.clear()
Objective-C
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683 longitude:151.2086 zoom:6]; mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera]; // ... [mapView clear];
Se vuoi apportare modifiche a un indicatore dopo averlo aggiunto alla mappa, assicurati di mantenere l'oggetto GMSMarker
. Puoi modificare l'indicatore
in un secondo momento apportando modifiche a questo oggetto.
Swift
let position = CLLocationCoordinate2D(latitude: 10, longitude: 10) let marker = GMSMarker(position: position) marker.map = mapView // ... marker.map = nil
Objective-C
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10); GMSMarker *marker = [GMSMarker markerWithPosition:position]; marker.map = mapView; // ... marker.map = nil;
Modificare il colore dell'indicatore
Puoi personalizzare il colore dell'immagine dell'indicatore predefinito richiedendo una versione sfumata dell'icona predefinita con markerImageWithColor:
e passando l'immagine risultante alla proprietà icona di GMSMarker
.
Swift
marker.icon = GMSMarker.markerImage(with: .black)
Objective-C
marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];
Personalizzazione dell'immagine dell'indicatore
Se vuoi modificare l'immagine dell'indicatore predefinito, puoi impostare un'icona personalizzata utilizzando la proprietà icon
o iconView
dell'indicatore. Se è impostato iconView
, l'API ignora la proprietà icon
.
Utilizzo della proprietà icon
dell'indicatore
Lo snippet seguente crea un indicatore con un'icona personalizzata fornita come UIImage
nella proprietà icon
. L'icona è centrata su Londra, in Inghilterra. Lo snippet presuppone che la tua applicazione contenga un'immagine denominata "casa.png".
Swift
let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127) let london = GMSMarker(position: positionLondon) london.title = "London" london.icon = UIImage(named: "house") london.map = mapView
Objective-C
CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127); GMSMarker *london = [GMSMarker markerWithPosition:positionLondon]; london.title = @"London"; london.icon = [UIImage imageNamed:@"house"]; london.map = mapView;
Se crei più indicatori con la stessa immagine, utilizza la stessa istanza di UIImage
per ciascuno. In questo modo, puoi migliorare il rendimento della tua applicazione quando vengono visualizzati molti indicatori.
Questa immagine potrebbe avere più fotogrammi. Inoltre, viene rispettata la proprietà alignmentRectInsets
, che è utile se un indicatore ha un'ombra o un'altra regione inutilizzabile.
Utilizzo della proprietà iconView
dell'indicatore
Il seguente snippet crea un indicatore con un'icona personalizzata impostando la proprietà iconView
dell'indicatore e anima una modifica del colore dell'indicatore.
Lo snippet presuppone che la tua applicazione contenga un'immagine denominata "casa.png".
Swift
import CoreLocation import GoogleMaps class MarkerViewController: UIViewController, GMSMapViewDelegate { var mapView: GMSMapView! var london: GMSMarker? var londonView: UIImageView? override func viewDidLoad() { super.viewDidLoad() let camera = GMSCameraPosition.camera( withLatitude: 51.5, longitude: -0.127, zoom: 14 ) let mapView = GMSMapView.map(withFrame: .zero, camera: camera) view = mapView mapView.delegate = self let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate) let markerView = UIImageView(image: house) markerView.tintColor = .red londonView = markerView let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127) let marker = GMSMarker(position: position) marker.title = "London" marker.iconView = markerView marker.tracksViewChanges = true marker.map = mapView london = marker } func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) { UIView.animate(withDuration: 5.0, animations: { () -> Void in self.londonView?.tintColor = .blue }, completion: {(finished) in // Stop tracking view changes to allow CPU to idle. self.london?.tracksViewChanges = false }) } }
Objective-C
@import CoreLocation; @import GoogleMaps; @interface MarkerViewController : UIViewController <GMSMapViewDelegate> @property (strong, nonatomic) GMSMapView *mapView; @end @implementation MarkerViewController { GMSMarker *_london; UIImageView *_londonView; } - (void)viewDidLoad { [super viewDidLoad]; GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5 longitude:-0.127 zoom:14]; _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera]; self.view = _mapView; _mapView.delegate = self; UIImage *house = [UIImage imageNamed:@"House"]; house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; _londonView = [[UIImageView alloc] initWithImage:house]; _londonView.tintColor = [UIColor redColor]; CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127); _london = [GMSMarker markerWithPosition:position]; _london.title = @"London"; _london.iconView = _londonView; _london.tracksViewChanges = YES; _london.map = self.mapView; } - (void)mapView:(GMSMapView *)mapView idleAtCameraPosition:(GMSCameraPosition *)position { [UIView animateWithDuration:5.0 animations:^{ self->_londonView.tintColor = [UIColor blueColor]; } completion:^(BOOL finished) { // Stop tracking view changes to allow CPU to idle. self->_london.tracksViewChanges = NO; }]; } @end
Poiché iconView
accetta un UIView
, puoi avere una gerarchia di controlli della UI standard che definiscono gli indicatori, con ogni visualizzazione che dispone dell'insieme standard di funzionalità di animazione. Puoi includere modifiche alle dimensioni, al colore e ai livelli di alpha degli indicatori, nonché applicare trasformazioni arbitrarie. La proprietà iconView
supporta l'animazione di tutte le proprietà animabili di UIView
, ad eccezione di frame
e center
.
Tieni presente le seguenti considerazioni quando utilizzi iconView
:
UIView
può richiedere molte risorse quandotracksViewChanges
è impostato suYES
, il che potrebbe comportare un maggiore utilizzo della batteria. Al contrario, un singolo frameUIImage
è statico e non deve essere sottoposto a nuovo rendering.- Alcuni dispositivi potrebbero avere difficoltà a visualizzare la mappa se sullo schermo sono presenti molti indicatori, ognuno con il proprio
UIView
, e tutti gli indicatori monitorano contemporaneamente le modifiche. - Un
iconView
non risponde all'interazione dell'utente, in quanto è uno snapshot della visualizzazione. - La visualizzazione si comporta come se
clipsToBounds
fosse impostato suYES
, indipendentemente dal suo valore effettivo. Puoi applicare trasformazioni che funzionano al di fuori dei limiti, ma l'oggetto disegnato deve rientrare nei limiti dell'oggetto. Tutte le trasformazioni/gli spostamenti vengono monitorati e applicati. In breve: le visualizzazioni secondarie devono essere contenute all'interno della visualizzazione.
Per decidere quando impostare la proprietà tracksViewChanges
, devi valutare i considerazioni sul rendimento rispetto ai vantaggi di ridisegnare automaticamente l'indicatore. Ad esempio:
- Se devi apportare una serie di modifiche, puoi impostare la proprietà su
YES
e poi di nuovo suNO
. - Quando è in esecuzione un'animazione o i contenuti vengono caricati
in modo asincrono, devi mantenere la proprietà impostata su
YES
fino al completamento delle azioni.
Modificare l'opacità degli indicatori
Puoi controllare l'opacità di un indicatore con la relativa proprietà opacity
. Devi specificare l'opacità come valore float compreso tra 0,0 e 1,0, dove 0 è completamente trasparente e 1 è completamente opaco.
Swift
marker.opacity = 0.6
Objective-C
marker.opacity = 0.6;
Puoi animare l'opacità dell'indicatore con Core Animation utilizzando GMSMarkerLayer
.
Appiattire un indicatore
In genere, le icone degli indicatori sono disegnate in base allo schermo del dispositivo anziché alla superficie della mappa, pertanto ruotare, inclinare o aumentare lo zoom della mappa non modifica necessariamente l'orientamento dell'indicatore.
Puoi impostare l'orientamento di un indicatore in modo che sia piatto rispetto alla terra. I simboli piatti ruotano quando la mappa viene ruotata e cambiano prospettiva quando la mappa viene inclinata. Come per gli indicatori normali, gli indicatori piatti mantengono le stesse dimensioni quando viene aumentato o diminuito lo zoom della mappa.
Per modificare l'orientamento dell'indicatore, imposta la proprietà flat
su
YES
o true
.
Swift
let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127) let londonMarker = GMSMarker(position: positionLondon) londonMarker.isFlat = true londonMarker.map = mapView
Objective-C
CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127); GMSMarker *londonMarker = [GMSMarker markerWithPosition:positionLondon]; londonMarker.flat = YES; londonMarker.map = mapView;
Ruotare un indicatore
Puoi ruotare un indicatore attorno al relativo punto di ancoraggio impostando la proprietà rotation
. Specifica la rotazione come tipo CLLocationDegrees
, misurata in gradi in senso orario dalla posizione predefinita. Quando l'indicatore è piatto sulla mappa,
la posizione predefinita è nord.
L'esempio seguente ruota l'indicatore di 90°. L'impostazione della proprietà groundAnchor
su 0.5,0.5
fa sì che l'indicatore venga ruotato attorno al suo centro anziché alla sua base.
Swift
let degrees = 90.0 londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5) londonMarker.rotation = degrees londonMarker.map = mapView
Objective-C
CLLocationDegrees degrees = 90; londonMarker.groundAnchor = CGPointMake(0.5, 0.5); londonMarker.rotation = degrees; londonMarker.map = mapView;
Gestione degli eventi sugli indicatori
Puoi ascoltare gli eventi che accadono sulla mappa, ad esempio quando un utente tocca un indicatore. Per ascoltare gli eventi, è necessario implementare il protocollo GMSMapViewDelegate
. Consulta Eventi e gesti dei marker per scoprire come gestire eventi specifici dei marker. La guida agli eventi fornisce anche un elenco di metodi su GMSMapViewDelegate. Per gli eventi di Street View, consulta
GMSPanoramaViewDelegate
.