Indicatori

Seleziona la piattaforma: Android iOS JavaScript

Gli indicatori segnalano singole posizioni sulla mappa.

Per impostazione predefinita, gli indicatori utilizzano un'icona standard con l'aspetto più comune di Google Maps. percepita. Se vuoi personalizzare l'indicatore, puoi modificare il colore l'indicatore predefinito, sostituisci l'immagine dell'indicatore con un'icona personalizzata o modifica un altro proprietà dell'indicatore.

In risposta a un evento di clic su un indicatore, puoi aprire una finestra. Una finestra informativa con testo o immagini in una finestra di dialogo sopra l'indicatore. Puoi usare una finestra informativa predefinita per visualizzare il testo o creare una finestra informativa personalizzata per avere un controllo completo dei contenuti.

Aggiunta di un indicatore

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

L'esempio seguente illustra come aggiungere un indicatore a un elemento GMSMapView oggetto. L'indicatore viene creato nelle coordinate 10,10 e mostra la stringa "Hello world" in una finestra informativa quando l'utente fa 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 marker.appearAnimation proprietà a:

  • kGMSMarkerAnimationPop per far scoppiare l'indicatore dalla sua groundAnchor quando vengono aggiunti.
  • kGMSMarkerAnimationFadeIn per far scomparire l'indicatore quando viene aggiunto.

Rimozione di un indicatore

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

Per apportare modifiche a un indicatore dopo averlo aggiunto alla mappa, assicurati di conservare l'oggetto GMSMarker. Puoi modificare l'indicatore in seguito apportando modifiche all'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 predefinito richiedendo un colore dell'icona predefinita con markerImageWithColor: e passare il valore 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 cambiare l'immagine dell'indicatore predefinito, puoi impostare un'icona personalizzata utilizzando proprietà icon o iconView dell'indicatore. Se il criterio iconView viene impostato, l'API ignora la proprietà icon.

Utilizzo della proprietà icon dell'indicatore

Il seguente snippet crea un indicatore con un'icona personalizzata fornita come UIImage nella proprietà icon. L'icona è al centro di Londra, Inghilterra. La 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 diversi indicatori con la stessa immagine, utilizza la stessa istanza di UIImage per ciascuno degli indicatori. Ciò consente di migliorare il rendimento quando vengono visualizzati molti indicatori.

Questa immagine può avere più frame. Inoltre, alignmentRectInsets viene rispettata, 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à 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 UIView, puoi avere una gerarchia di UI standard controlli che definiscono gli indicatori, ciascuna delle quali contiene il set di animazioni standard le funzionalità di machine learning. Puoi includere modifiche alla dimensione, al colore e all'alfabetizzazione dell'indicatore multilivello, oltre ad 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 le seguenti considerazioni:

  • UIView può richiedere risorse se viene impostato il valore tracksViewChanges a YES, con un conseguente potenziale aumento dell'utilizzo della batteria. In confronto, un il frame singolo UIImage è statico e non deve essere sottoposto di nuovo a rendering.
  • Alcuni dispositivi potrebbero avere difficoltà a eseguire il rendering della mappa se sono presenti molti indicatori schermata e ogni indicatore ha il proprio UIView e tutti gli indicatori stanno monitorando modifiche.
  • Un iconView non risponde all'interazione dell'utente, poiché è un'istantanea di la vista.
  • La visualizzazione si comporta come se clipsToBounds fosse impostato su YES, indipendentemente dalle sue valore effettivo. Puoi applicare le trasformazioni che funzionano al di fuori dei limiti, dell'oggetto che disegni deve rientrare nei limiti dell'oggetto stesso. Tutti le trasformazioni/le trasformazioni sono monitorate e applicate. In breve: le visualizzazioni secondarie devono essere contenuti nella vista.

Per decidere quando impostare la proprietà tracksViewChanges, devi pesarti considerazioni sulle prestazioni rispetto ai vantaggi di una ristrutturazione dell'indicatore automaticamente. Ad esempio:

  • Se devi apportare una serie di modifiche, puoi cambiare la proprietà in YES, poi torna a NO.
  • Quando un'animazione è in esecuzione o i contenuti sono in fase di caricamento in modo asincrono, dovresti mantenere la proprietà impostata su YES fino a quando le azioni sono completate.

Modifica dell'opacità dell'indicatore

Puoi controllare l'opacità di un indicatore con la proprietà opacity. Dovresti specificare l'opacità come un numero in virgola mobile 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]Core Animazione con GMSMarkerLayer.

Appiattimento di un indicatore

Le icone degli indicatori sono solitamente disegnate orientate verso lo schermo del dispositivo anziché sulla superficie della mappa, pertanto la rotazione, l'inclinazione o lo zoom della mappa non necessariamente modificare l'orientamento dell'indicatore.

Puoi impostare l'orientamento di un indicatore in modo che sia allineato alla terra. Piatto gli indicatori ruotano quando la mappa viene ruotata e cambiano la prospettiva quando la mappa è inclinato. Come per gli indicatori normali, gli indicatori piatti mantengono la loro dimensione quando la mappa è aumentare o diminuire 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 l'rotation proprietà. Specifica la rotazione di tipo CLLocationDegrees, misurata in gradi in senso orario rispetto alla posizione predefinita. Quando l'indicatore è piatto sulla mappa, la posizione predefinita è Nord.

Nell'esempio seguente, l'indicatore ruota di 90°. Impostazione di groundAnchor su 0.5,0.5 determina la rotazione dell'indicatore al centro. della 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 si verificano sulla mappa, ad esempio quando un utente tocca una indicatore. Per rimanere in ascolto degli eventi, devi implementare il metodo GMSMapViewDelegate. Vedi eventi degli indicatori e gesti per imparare a gestire specifici eventi indicatore. La guida agli eventi fornisce anche un elenco di su GMSMapViewDelegate. Per gli eventi di Street View, consulta GMSPanoramaViewDelegate