Indicatori

Gli indicatori indicano singole posizioni sulla mappa.

Per impostazione predefinita, i segnaposto utilizzano un'icona standard con l'aspetto comune di Google Maps. Se vuoi personalizzare l'indicatore, puoi modificarne il colore, 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 informativa. Una finestra informativa mostra testo o immagini in una finestra di dialogo sopra il marcatore. Puoi utilizzare una finestra informativa predefinita per visualizzare il testo o crearne una 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 il relativo map.

L'esempio riportato di seguito mostra come aggiungere un marcatore a un oggetto GMSMapView esistente. Il marcatore viene creato in corrispondenza delle coordinate 10,10 e mostra la stringa "Hello world" in una finestra informativa quando viene selezionato.

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 far apparire il marcatore dal suo groundAnchor quando viene aggiunto.
• kGMSMarkerAnimationFadeIn per far apparire gradualmente il marcatore quando viene aggiunto.

Rimuovere un indicatore

Puoi rimuovere un indicatore dalla mappa impostando la proprietà map di GMSMarker su nil. In alternativa, puoi rimuovere tutte le sovrapposizioni (inclusi i marcatori) 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 conservare l'oggetto GMSMarker. Puoi modificare il marcatore 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 del marcatore

Puoi personalizzare il colore dell'immagine dell'indicatore predefinito richiedendo una versione colorata dell'icona predefinita con markerImageWithColor: e passando l'immagine risultante alla proprietà icona di GMSMarker.

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

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

Personalizzare l'immagine del segnaposto

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.

Utilizzo della proprietà icon del marcatore

Il seguente snippet crea un indicatore con un'icona personalizzata fornita come UIImage nella proprietà icon. L'icona è centrata su Londra, Inghilterra. Lo snippet presuppone che l'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 ciascuno degli indicatori. Ciò contribuisce a migliorare il rendimento dell'applicazione quando vengono visualizzati molti indicatori.

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

Utilizzo della proprietà iconView del marcatore

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 l'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 dell'interfaccia utente standard che definiscono i marcatori, ogni visualizzazione con il set standard di funzionalità di animazione. Puoi includere modifiche alle dimensioni, al colore e ai livelli alfa dei marcatori, nonché applicare trasformazioni arbitrarie. La proprietà iconView supporta l'animazione di tutte le proprietà animabili di UIView, tranne frame e center.

Tieni presente le seguenti considerazioni quando utilizzi iconView:

• La UIView può richiedere molte risorse quando tracksViewChanges è impostato su YES, il che potrebbe comportare un maggiore utilizzo della batteria. Al contrario, un singolo fotogramma UIImage è statico e non deve essere renderizzato di nuovo.
• Alcuni dispositivi potrebbero avere difficoltà a eseguire il rendering della mappa se sullo schermo sono presenti molti indicatori e ognuno ha il proprio UIView e tutti gli indicatori monitorano le modifiche contemporaneamente.
• Un iconView non risponde all'interazione dell'utente, in quanto è un'istantanea della visualizzazione.
• La visualizzazione si comporta come se clipsToBounds fosse impostato su YES, indipendentemente dal suo valore effettivo. Puoi applicare trasformazioni che funzionano al di fuori dei limiti, ma l'oggetto che disegni deve trovarsi all'interno dei limiti dell'oggetto. Tutte le trasformazioni/spostamenti vengono monitorati e applicati. In breve, le viste secondarie devono essere contenute nella vista.
• Per utilizzare -copyWithZone: su GMSMarker, devi prima copiare GMSMarker e poi impostare una nuova istanza di iconView sulla copia. UIView non supporta NSCopying, pertanto non può copiare iconView.

Per decidere quando impostare la proprietà tracksViewChanges, devi valutare le considerazioni sul rendimento rispetto ai vantaggi di avere il marcatore ridisegnato automaticamente. Ad esempio:

• Se devi apportare una serie di modifiche, puoi impostare la proprietà su YES e poi di nuovo su NO.
• Quando un'animazione è in esecuzione o i contenuti vengono caricati in modo asincrono, devi mantenere la proprietà impostata su YES finché le azioni non sono completate.

Modificare l'opacità del marcatore

Puoi controllare l'opacità di un indicatore con la proprietà opacity. Devi specificare l'opacità come valore float 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à del marcatore con Core Animation utilizzando GMSMarkerLayer.

Appiattimento di un indicatore

Le icone dei segnaposto vengono normalmente disegnate orientate rispetto allo schermo del dispositivo anziché alla superficie della mappa, quindi la rotazione, l'inclinazione o lo zoom della mappa non modificano necessariamente l'orientamento del segnaposto.

Puoi impostare l'orientamento di un indicatore in modo che sia piatto rispetto alla terra. I marker piatti ruotano quando la mappa viene ruotata e cambiano prospettiva quando la mappa viene inclinata. Come per i normali indicatori, le dimensioni degli indicatori piatti rimangono invariate quando la mappa viene ingrandita o rimpicciolita.

Per modificare l'orientamento del marcatore, imposta la proprietà flat del marcatore 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;
      

Ruotare un indicatore

Puoi ruotare un indicatore attorno al suo 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 il marcatore di 90°. Se imposti la proprietà groundAnchor su 0.5,0.5, il marcatore viene ruotato intorno al suo centro, anziché alla sua 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 sui marcatori

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 Eventi marcatore e gesti per scoprire come gestire eventi marcatore specifici. La guida agli eventi fornisce anche un elenco di metodi su GMSMapViewDelegate. Per gli eventi di Street View, consulta GMSPanoramaViewDelegate.