Indicatori

Gli indicatori indicano le singole posizioni sulla mappa.

Per impostazione predefinita, gli indicatori utilizzano un'icona standard con l'aspetto e il design comuni di Google Maps. Se vuoi personalizzare l'indicatore, puoi modificare il colore dell'indicatore predefinito, sostituire l'immagine con un'icona personalizzata o modificare altre proprietà dell'indicatore.

In risposta a un evento relativo a un clic su un indicatore, puoi aprire una finestra informativa. Una finestra informativa mostra testo o immagini in una finestra popup sopra l'indicatore. Puoi utilizzare una finestra informativa predefinita per visualizzare il testo oppure creare una tua finestra informativa personalizzata per controllare completamente i suoi contenuti.

Aggiungere un indicatore

Per aggiungere un indicatore, crea un oggetto GMSMarker che includa position e title e imposta map.

L'esempio seguente mostra come aggiungere un indicatore a un oggetto GMSMapView esistente. L'indicatore viene creato alle coordinate 10,10 e, quando viene fatto clic, viene visualizzata la stringa "Hello World" in una finestra informativa.

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView
      

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 l'indicatore venga rimosso dalla groundAnchor quando viene aggiunto.
• kGMSMarkerAnimationFadeIn per far scomparire l'indicatore dopo averlo aggiunto.

Rimozione di 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 sulla mappa chiamando il metodo GMSMapView clear.

let camera = GMSCameraPosition.camera(
  withLatitude: -33.8683,
  longitude: 151.2086,
  zoom: 6
)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
// ...
mapView.clear()
      

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.

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.map = mapView
// ...
marker.map = nil
      

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 predefinita dell'indicatore richiedendo una versione colorata dell'icona predefinita con markerImageWithColor: e passando l'immagine risultante alla proprietà dell'icona GMSMarker.

marker.icon = GMSMarker.markerImage(with: .black)
      

marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];
      

Personalizzare l'immagine dell'indicatore

Se vuoi modificare l'immagine predefinita dell'indicatore, puoi impostare un'icona personalizzata utilizzando la proprietà icon o iconView dell'indicatore.

Se iconView è impostato, l'API ignora la proprietà icon. Gli aggiornamenti di icon correnti non vengono riconosciuti finché iconView è impostato.

Utilizzare la proprietà "icon" dell'indicatore

Il seguente snippet crea un indicatore con un'icona personalizzata fornita come UIImage nella proprietà icon. L'icona è centrata a Londra, Inghilterra. Lo snippet presuppone che la tua applicazione contenga un'immagine denominata "house.png".

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
      

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 ognuno degli indicatori. Questo contribuisce a migliorare le prestazioni della tua applicazione quando mostri molti indicatori.

Questa immagine potrebbe avere più frame. Inoltre, la proprietà alignmentRectInsets viene rispettata, il che è utile se un indicatore ha un'ombra o un'altra regione inutilizzabile.

Utilizzare la 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 "house.png".

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
    })
  }
}
      

@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 UI standard che definiscono i tuoi indicatori, ognuno dei quali ha il set standard di funzionalità di animazione. Puoi includere modifiche alle dimensioni degli indicatori, al colore e ai livelli alpha, nonché applicare trasformazioni arbitrarie. La proprietà iconView supporta l'animazione di tutte le proprietà animabili di UIView tranne frame e center.

Quando utilizzi iconView, tieni presente quanto segue:

• UIView può richiedere risorse quando tracksViewChanges è impostato su YES, il che potrebbe comportare un maggiore utilizzo della batteria. In confronto, un singolo frame UIImage è statico e non deve essere visualizzato di nuovo.
• Alcuni dispositivi potrebbero faticare a visualizzare la mappa se hai molti indicatori sullo schermo e ogni indicatore ha il proprio UIView e tutti gli indicatori stanno monitorando contemporaneamente le modifiche.
• iconView non risponde all'interazione dell'utente, in quanto è un'istantanea della vista.
• La visualizzazione si comporta come se il valore di clipsToBounds fosse impostato su YES, indipendentemente dal valore effettivo. Puoi applicare trasformazioni che funzionino al di fuori dei limiti, ma l'oggetto che disegni deve rientrare nei limiti dell'oggetto. Tutte le trasformazioni/i turni vengono monitorati e applicati. In breve, le visualizzazioni secondarie devono essere contenute all'interno della vista.

Per decidere quando impostare la proprietà tracksViewChanges, devi valutare le considerazioni sul rendimento rispetto ai vantaggi della riassegnazione automatica dell'indicatore. Ad esempio:

• Se hai una serie di modifiche da apportare, puoi cambiare la proprietà in YES e poi di nuovo in NO.
• Quando un'animazione è in esecuzione o i contenuti vengono caricati in modo asincrono, devi mantenere la proprietà impostata su YES fino al completamento delle azioni.

Modificare l'opacità dell'indicatore

Puoi controllare l'opacità di un indicatore con la sua proprietà opacity. Devi specificare l'opacità come numero in virgola mobile compreso tra 0,0 e 1,0, dove 0 è completamente trasparente e 1 è completamente opaco.

marker.opacity = 0.6
      

marker.opacity = 0.6;
      

Puoi animare l'opacità dell'indicatore con Core Animation tramite GMSMarkerLayer.

Appiattire un indicatore

In genere le icone degli indicatori sono disegnate verso lo schermo del dispositivo e non più rispetto alla superficie della mappa, pertanto ruotando, inclinando o aumentando lo zoom della mappa non cambia necessariamente l'orientamento dell'indicatore.

Puoi impostare l'orientamento di un indicatore in modo che sia piano rispetto alla terra. Gli indicatori fissi ruotano quando la mappa viene ruotata e cambiano la prospettiva quando la mappa è inclinata. Come per gli indicatori normali, gli indicatori piatti mantengono le proprie dimensioni quando la mappa viene ingrandita o rimpicciolita.

Per modificare l'orientamento dell'indicatore, imposta la relativa proprietà flat su YES o true.

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let londonMarker = GMSMarker(position: positionLondon)
londonMarker.isFlat = true
londonMarker.map = mapView
      

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *londonMarker = [GMSMarker markerWithPosition:positionLondon];
londonMarker.flat = YES;
londonMarker.map = mapView;
      

Rotazione di un indicatore

Puoi ruotare un indicatore intorno al 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 è North.

L'esempio seguente ruota l'indicatore di 90°. Se imposti la proprietà groundAnchor su 0.5,0.5, l'indicatore viene ruotato attorno al centro anziché sulla base.

let degrees = 90.0
londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
londonMarker.rotation = degrees
londonMarker.map = mapView
      

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 si verificano sulla mappa, ad esempio quando un utente tocca un indicatore. Per ascoltare gli eventi, devi implementare il protocollo GMSMapViewDelegate. Consulta la guida agli eventi e l'elenco dei metodi disponibili in GMSMapViewDelegate. Per gli eventi Street View, consulta GMSPanoramaViewDelegate.