Indicatori

Seleziona la piattaforma: Android iOS JavaScript

Gli indicatori indicano 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 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 informativa. 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 una finestra informativa personalizzata per controllarne completamente i contenuti.

Aggiunta di un indicatore

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

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

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 far scoppiare l'indicatore dal relativo groundAnchor quando viene aggiunto.
  • kGMSMarkerAnimationFadeIn per causare la dissolvenza in entrata dell'indicatore quando viene aggiunto.

Rimozione di un indicatore

Puoi rimuovere un indicatore dalla mappa impostando la proprietà map della GMSMarker su nil. In alternativa, puoi rimuovere tutti gli overlay (compresi gli indicatori) attualmente 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;

Modifica del colore dell'indicatore

Puoi personalizzare il colore dell'immagine dell'indicatore predefinita richiedendo una versione in tinta dell'icona predefinita con markerImageWithColor: e passando l'immagine risultante alla proprietà dell'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 predefinita, 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 dell'indicatore

Lo snippet seguente 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".

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 stai creando più indicatori con la stessa immagine, utilizza la stessa istanza di UIImage per ciascuno degli indicatori. Ciò aiuta a migliorare le prestazioni dell'applicazione quando vengono visualizzati molti indicatori.

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

Utilizzo della proprietà iconView dell'indicatore

Lo snippet riportato di seguito crea un indicatore con un'icona personalizzata impostando la proprietà iconView dell'indicatore e anima una modifica nel colore dell'indicatore. Lo snippet presuppone che l'applicazione contenga un'immagine denominata "house.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 UI standard che definiscono gli indicatori, ciascuno con il set standard di funzionalità di animazione. Puoi includere modifiche alla dimensione, al colore e ai livelli alfa 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.

Quando utilizzi iconView, tieni presente le seguenti considerazioni:

  • L'UIView può richiedere risorse quando il criterio tracksViewChanges è impostato su YES, il che potrebbe comportare un maggiore utilizzo della batteria. In confronto, un singolo frame UIImage è statico e non deve essere sottoposto nuovamente a rendering.
  • Alcuni dispositivi potrebbero avere difficoltà a visualizzare la mappa se sono presenti molti indicatori sullo schermo e ogni indicatore ha un proprio UIView e tutti gli indicatori stanno monitorando le modifiche contemporaneamente.
  • Un elemento iconView non risponde all'interazione dell'utente, poiché è un'istantanea della vista.
  • La vista si comporta come se clipsToBounds fosse impostato su YES, indipendentemente dal valore effettivo. Puoi applicare trasformazioni che funzionano al di fuori dei confini, 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 vista.

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

  • Se devi apportare una serie di modifiche, 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.

Modifica dell'opacità dell'indicatore

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

Swift

marker.opacity = 0.6

Objective-C

marker.opacity = 0.6;

Puoi animare l'opacità dell'indicatore con [Animazione principale]Animazione principale utilizzando GMSMarkerLayer.

Appiattimento di un indicatore

Le icone degli indicatori sono in genere disegnate con l'orientamento sullo schermo del dispositivo anziché sulla superficie della mappa; pertanto, la rotazione, l'inclinazione o lo zoom della mappa non comportano necessariamente la modifica dell'orientamento dell'indicatore.

Puoi impostare l'orientamento di un indicatore in modo che sia piatto rispetto alla Terra. Gli indicatori piatti ruotano in base alla rotazione della mappa e cambiano prospettiva quando la mappa è inclinata. Come per gli indicatori normali, gli indicatori piatti mantengono le proprie dimensioni quando la mappa viene aumentata o diminuita lo zoom.

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

Rotazione di un indicatore

Puoi ruotare un indicatore intorno 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 l'indicatore di 90°. Se imposti la proprietà groundAnchor su 0.5,0.5, l'indicatore viene ruotato intorno al centro, anziché alla 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 si verificano sulla mappa, ad esempio quando un utente tocca un indicatore. Per ascoltare gli eventi, devi implementare il protocollo GMSMapViewDelegate. Consulta la sezione su gesti ed eventi degli indicatori per scoprire come gestire specifici eventi indicatore. La guida agli eventi fornisce anche un elenco di metodi su GMSMapViewDelega. Per gli eventi di Street View, visita GMSPanoramaViewDelegate.