Videocamera e vista

Con Maps SDK for iOS, puoi cambiare il punto di vista dell'utente della mappa cambiando la sua fotocamera.

Con Maps SDK for iOS, gli utenti possono inclinare e ruotare le mappe per adattarle a un orientamento utile per il contesto. A qualsiasi livello di zoom, gli utenti possono eseguire una panoramica della mappa o cambiarne la prospettiva con una latenza minima.

Le modifiche apportate alla fotocamera non cambiano gli indicatori, le polilinee o gli altri elementi grafici che hai aggiunto, anche se potresti voler modificare questi elementi per adattarli meglio alla nuova visualizzazione.

La visualizzazione della mappa

Maps SDK for iOS utilizza la proiezione di Mercator per rappresentare la superficie del mondo (una sfera) sullo schermo del tuo dispositivo (un piano piatto).

La posizione della fotocamera

La visualizzazione mappa è modellata come una fotocamera rivolta verso il basso su un piano piatto. La posizione della fotocamera (e quindi il rendering della mappa) è specificata dalle seguenti proprietà: target (posizione di latitudine/longitudine), cuscinetto, inclinazione e zoom.

Target (località)

L'obiettivo della fotocamera è la posizione del centro della mappa, specificata come coordinate di latitudine e longitudine.

Direzione (orientamento)

L'orientamento della fotocamera specifica la direzione della bussola, misurata in gradi dal nord vero, corrispondente al bordo superiore della mappa. Se tracci una linea verticale dal centro della mappa fino al bordo superiore della mappa, l'orientamento corrisponde all'orientamento della fotocamera (misurato in gradi) rispetto al nord vero.

Un rilevamento pari a 0 indica che la parte superiore della mappa punta al nord. Un valore di rilevamento pari a 90 indica la parte superiore dei punti della mappa orientati verso est (90 gradi su una bussola). Il valore 180 indica la parte superiore dei punti sulla mappa orientata verso sud.

L'API di Google Maps ti consente di modificare l'orientamento di una mappa. Ad esempio, chi guida un'auto spesso piega una mappa stradale per allinearla al senso di marcia, mentre gli escursionisti che utilizzano una mappa e una bussola di solito la orientano in modo che una linea verticale sia rivolta a nord.

Inclinazione (angolo di visione)

L'inclinazione definisce la posizione della fotocamera su un arco direttamente sopra la posizione centrale della mappa, misurata in gradi dal nadir (la direzione rivolta direttamente sotto la fotocamera). Il valore 0 corrisponde a una fotocamera puntata verso il basso. I valori superiori a 0 corrispondono a una fotocamera con un'inclinazione verso l'orizzonte del numero di gradi specificato. Quando modifichi l'angolo di visualizzazione, la mappa viene mostrata in prospettiva, con gli elementi lontani che appaiono più piccoli e quelli vicini più grandi. Le seguenti illustrazioni lo dimostrano.

Nelle immagini seguenti, l'angolo di visione è di 0 gradi. La prima immagine mostra uno schema di questo concetto; la posizione 1 è la posizione della fotocamera e la posizione 2 è la posizione attuale sulla mappa. La mappa risultante è mostrata sotto.

Nelle immagini seguenti, l'angolo di visione è di 45 gradi. Nota che la fotocamera si sposta a metà di un arco tra l'alto (0 gradi) e il suolo (90 gradi), in posizione 3. La fotocamera punta ancora verso il punto centrale della mappa, ma l'area rappresentata dalla linea nella posizione 4 è ora visibile.

La mappa in questo screenshot è ancora centrata sullo stesso punto della mappa originale, ma nella parte superiore sono stati visualizzati altri elementi. Aumentando l'angolo oltre i 45 gradi, gli elementi tra la fotocamera e la posizione sulla mappa appaiono proporzionalmente più grandi, mentre quelli oltre la posizione sulla mappa vengono proporzionalmente più piccoli, generando un effetto tridimensionale.

Assumi una prospettiva

Il livello di zoom della fotocamera determina la scala della mappa. A livelli di zoom più grandi è possibile visualizzare maggiori dettagli sullo schermo, mentre a livelli di zoom ridotti è possibile visualizzare una parte maggiore del mondo. A livello di zoom 0, la scala della mappa è tale che l'intero mondo abbia una larghezza di circa 256 punti.

Aumentando il livello di zoom di 1, si raddoppia la larghezza del mondo sullo schermo. Quindi, a livello di zoom N, la larghezza della Terra è di circa 256 * 2^N punti. Ad esempio, a livello di zoom 2, il mondo intero è largo circa 1024 punti.

Il livello di zoom non deve essere un numero intero. La gamma di livelli di zoom consentiti dalla mappa dipende da una serie di fattori, tra cui il target, il tipo di mappa e le dimensioni dello schermo. Qualsiasi numero al di fuori dell'intervallo verrà convertito nel successivo valore valido più vicino, che può essere il livello di zoom minimo o massimo. Il seguente elenco mostra il livello approssimativo di dettaglio previsto per ogni livello di zoom:

• 1: Mondo
• 5: massa continentale/continente
• 10: Città
• 15: Strade
• 20: edifici

Imposta la posizione iniziale della fotocamera

Imposta la posizione iniziale della fotocamera utilizzando l'oggetto GMSCameraPosition, che ti consente di impostare latitudine e longitudine del target insieme a orientamento, inclinazione e zoom.

Per impostare la posizione iniziale della fotocamera, crea un oggetto GMSCameraPosition e poi passalo al costruttore pratico di GMSMapView.

let camera = GMSCameraPosition(
  latitude: -33.8683,
  longitude: 151.2086,
  zoom: 16
)
mapView = GMSMapView(frame: self.view.bounds, camera: camera)
      

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:16];
mapView = [GMSMapView mapWithFrame:self.view.bounds camera:camera];
      

Puoi anche creare l'oggetto GMSMapView utilizzando il metodo init UIView predefinito. In questo caso, la posizione della fotocamera inizia nella posizione predefinita e la modifichi dopo la creazione.

mapView = GMSMapView(frame: self.view.bounds)
      

mapView = [[GMSMapView alloc] initWithFrame:self.view.bounds];
      

Cambiare la posizione della fotocamera

Puoi modificare in modo programmatico la posizione della fotocamera per impostare posizione, orientamento, inclinazione e zoom. Anche se GMSMapView offre diversi metodi che puoi utilizzare per cambiare la posizione della fotocamera, in genere utilizzi GMSCameraPosition o GMSCameraUpdate:

• GMSCameraPosition contiene proprietà e metodi da utilizzare per modificare ogni parametro di posizione della fotocamera: target, orientamento, inclinazione e zoom.

• GMSCameraUpdate consente di cambiare obiettivo, orientamento, inclinazione e zoom e contiene anche metodi aggiuntivi per supportare lo scorrimento, lo zoom avanzato, centrare la videocamera entro limiti predefiniti e altro ancora.

Quando sposti la fotocamera, puoi scegliere di "agganciare" la videocamera alla nuova posizione, ovvero non ci sarà animazione, oppure di animare il movimento. Ad esempio, se anima una modifica nella posizione target della videocamera, l'animazione si sposta dalla posizione precedente a quella nuova.

L'animazione si interpola tra gli attributi della videocamera correnti e i nuovi attributi della videocamera. Puoi controllare la durata dell'animazione utilizzando Animazione principale.

Utilizza GMSCameraPosition

Per cambiare fotocamera con GMSCameraPosition, crea un nuovo oggetto o copia un oggetto esistente e poi impostalo sull'oggetto GMSMapView. Utilizza l'oggetto GMSCameraPosition per agganciare la fotocamera alla nuova posizione, con o senza animazione.

Utilizza un oggetto GMSCameraPosition per configurare le proprietà della videocamera come latitudine, longitudine, zoom, orientamento e angolo di visione. che potrai quindi utilizzare per impostare la proprietà camera di GMSMapView.

let fancy = GMSCameraPosition(
  latitude: -33,
  longitude: 151,
  zoom: 6,
  bearing: 270,
  viewingAngle: 45
)
mapView.camera = fancy
      

GMSCameraPosition *fancy = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                       longitude:151.2086
                                                            zoom:6
                                                         bearing:30
                                                    viewingAngle:45];
[mapView setCamera:fancy];
      

Ometti qualsiasi proprietà GMSCameraPosition di cui vuoi impostare il valore predefinito.

Per animare lo spostamento, usa il metodo animateToCameraPosition: anziché impostare la proprietà camera.

Utilizza GMSCameraUpdate

GMSCameraUpdate ti consente di aggiornare la posizione della fotocamera e di scegliere se agganciarsi o animare quella nuova posizione. Il vantaggio di GMSCameraUpdate è la comodità. Puoi utilizzare GMSCameraPosition per eseguire le stesse attività di GMSCameraUpdate, ma GMSCameraUpdate fornisce metodi di supporto aggiuntivi per semplificare la manipolazione della fotocamera.

Ad esempio, per utilizzare GMSCameraPosition per incrementare il livello di zoom corrente, devi prima determinare il livello di zoom corrente, quindi creare un oggetto GMSCameraPosition in cui imposti lo zoom su un valore superiore a quello corrente.

In alternativa, crea un oggetto GMSCameraUpdate con il metodo zoomIn:. Quindi aggiorna la fotocamera passando l'oggetto GMSCameraUpdate al metodo GMSMapView animateWithCameraUpdate:.

// Zoom in one zoom level
let zoomCamera = GMSCameraUpdate.zoomIn()
mapView.animate(with: zoomCamera)
      

// Zoom in one zoom level
GMSCameraUpdate *zoomCamera = [GMSCameraUpdate zoomIn];
[mapView animateWithCameraUpdate:zoomCamera];
      

Utilizza invece il metodo moveCamera: GMSMapView per agganciare la fotocamera alla nuova posizione.

Nel prossimo esempio, utilizzerai GMSCameraUpdate per animare uno spostamento della videocamera al centro della videocamera su Vancouver.

// Center the camera on Vancouver, Canada
let vancouver = CLLocationCoordinate2D(latitude: 49.26, longitude: -123.11)
let vancouverCam = GMSCameraUpdate.setTarget(vancouver)
mapView.animate(with: vancouverCam)
      

// Center the camera on Vancouver, Canada
CLLocationCoordinate2D vancouver = CLLocationCoordinate2DMake(49.26, -123.11);
GMSCameraUpdate *vancouverCam = [GMSCameraUpdate setTarget:vancouver];
[mapView animateWithCameraUpdate:vancouverCam];
      

Costruisci un oggetto GMSCameraUpdate

Costruisci un oggetto GMSCameraUpdate utilizzando uno dei suoi metodi.

zoomIn: e zoomOut:

Modifica il livello di zoom corrente di 1,0, mantenendo invariate tutte le altre proprietà.

zoomTo:

Modifica il livello di zoom in base al valore specificato, mantenendo invariate tutte le altre proprietà.

zoomBy:

Aumenta (o diminuisce, se il valore è negativo) il livello di zoom del valore specificato.

zoomBy:atPoint:

Aumenta (o diminuisce, se il valore è negativo) il livello di zoom del valore specificato, mantenendo la posizione del punto specificata sullo schermo.

setTarget:

Modifica la latitudine e la longitudine della videocamera, mantenendo tutte le altre proprietà.

setTarget:zoom:

Modifica la latitudine, la longitudine e lo zoom della videocamera, mantenendo tutte le altre proprietà.

setCamera:

Imposta un nuovo GMSCameraPosition.

scrollByX:Y:

Modifica la latitudine e la longitudine della fotocamera per spostare la mappa del numero specificato di punti. Un valore x positivo fa sì che la fotocamera si sposti verso destra, in modo che la mappa sembri spostata a sinistra. Un valore y positivo comporta lo spostamento della fotocamera verso il basso, in modo che la mappa sembri spostata in alto. Lo scorrimento è relativo all'orientamento attuale della fotocamera. Ad esempio, se la fotocamera ha una inclinazione di 90 gradi, l'est è "verso l'alto".

fitBounds:

Trasforma la fotocamera per centrare i limiti specificati sullo schermo al massimo livello di zoom possibile. Applica una spaziatura interna predefinita ai limiti di 64 punti.

fitBounds:withPadding:

Trasforma la videocamera per centrare i limiti specificati sullo schermo al massimo livello di zoom possibile. Utilizza questo metodo per specificare la stessa spaziatura interna, in punti, per tutti i lati del riquadro di delimitazione.

fitBounds:withEdgeInsets:

Trasforma la videocamera per centrare i limiti specificati sullo schermo al massimo livello di zoom possibile. Con UIEdgeInsets, puoi specificare la spaziatura interna per ogni lato del riquadro di delimitazione in modo indipendente.

Utilizza GMSMapView per modificare una singola proprietà

GMSMapView offre diversi metodi che ti consentono di spostare la videocamera senza utilizzare un oggetto GMSCameraPosition o GMSCameraUpdate. Con questi metodi, come animateToLocation: o animateToZoom:, puoi animare una modifica a una singola proprietà della fotocamera.

Ad esempio, utilizza il metodo toViewingAngle: per animare una modifica all'inclinazione della fotocamera.

mapView.animate(toViewingAngle: 45)
      

[mapView animateToViewingAngle:45];
      

Imposta target (località)

La posizione determina il centro della mappa. Le località sono specificate da latitudine e longitudine e rappresentate in modo programmatico da un CLLocationCoordinate2D, creato con CLLocationCoordinate2DMake.

Usa GMSCameraPosition per cambiare la località. In questo esempio, la mappa si aggancia alla nuova posizione.

let target = CLLocationCoordinate2D(latitude: -33.868, longitude: 151.208)
mapView.camera = GMSCameraPosition(target: target, zoom: 6)
      

CLLocationCoordinate2D target =
    CLLocationCoordinate2DMake(-33.868, 151.208);
mapView.camera = [GMSCameraPosition cameraWithTarget:target zoom:6];
      

Per animare la modifica e eseguire la panoramica della mappa sulla nuova posizione, puoi utilizzare il metodo animateToCameraPosition: anziché impostare la proprietà camera. In alternativa, utilizza il metodo animateToLocation: su GMSMapView.

mapView.animate(toLocation: CLLocationCoordinate2D(latitude: -33.868, longitude: 151.208))
      

[mapView animateToLocation:CLLocationCoordinate2DMake(-33.868, 151.208)];
      

Puoi anche creare un oggetto GMSCameraUpdate per spostare la videocamera. Utilizza il metodo integrato scrollByX:Y: per specificare il numero di punti in cui far scorrere la fotocamera nelle direzioni X e Y. In questo esempio, scorri la fotocamera di 200 punti verso destra e 100 verso il basso:

// Move the camera 200 points to the right, and 100 points downwards
let downwards = GMSCameraUpdate.scrollBy(x: 200, y: 100)
mapView.animate(with: downwards)
      

// Move the camera 200 points to the right, and 100 points downwards
GMSCameraUpdate *downwards = [GMSCameraUpdate scrollByX:200.0 Y:100.0];
[mapView animateWithCameraUpdate:downwards];
      

Imposta orientamento (orientamento)

La direzione è la direzione della bussola, misurata in gradi dal vero nord, per il bordo superiore della mappa. Ad esempio, un rilevamento di 90 gradi genera una mappa in cui il bordo superiore è rivolto verso est.

Imposta il rilevamento in modo programmatico con GMSCameraPosition o GMSCameraUpdate o con il metodo animateToBearing: di GMSMapView.

mapView.animate(toBearing: 0)
      

[mapView animateToBearing:0];
      

Imposta l'inclinazione (angolo di visualizzazione)

L'angolo di visione è la posizione della fotocamera su un arco tra la posizione centrale della mappa e la superficie della Terra, misurata in gradi dal nadir (la direzione che punta direttamente sotto la fotocamera). Quando modifichi l'angolo di visualizzazione, la mappa viene mostrata in prospettiva, con gli elementi tra la fotocamera e la posizione della mappa che appaiono proporzionalmente più grandi, mentre quelli oltre la posizione sulla mappa appaiono proporzionalmente più piccoli, generando un effetto tridimensionale.

L'angolo di visualizzazione può variare da 0 (punta verso il basso verso il basso sulla mappa) e fino a un massimo dipendente dal livello di zoom. Per livelli di zoom a partire da 16, l'angolo massimo è di 65 gradi. Per livelli di zoom 10 e inferiori, l'angolo massimo è di 30 gradi.

Imposta l'angolo di visione in modo programmatico utilizzando GMSCameraPosition o GMSCameraUpdate oppure con il metodo animateToViewingAngle: di GMSMapView.

mapView.animate(toViewingAngle: 45)
      

[mapView animateToViewingAngle:45];
      

Imposta lo zoom

Il livello di zoom della fotocamera determina la scala della mappa. A livelli di zoom più grandi puoi vedere più dettagli sullo schermo, mentre a livelli più piccoli puoi vedere una porzione maggiore del mondo.

Imposta lo zoom in modo programmatico con GMSCameraPosition o GMSCameraUpdate o con il metodo animateToZoom: di GMSMapView.

mapView.animate(toZoom: 12)
      

[mapView animateToZoom:12];
      

L'esempio seguente utilizza il metodo zoomIn: per creare un oggetto GMSCameraUpdate al fine di animare uno zoom in avanti di un livello rispetto a quello corrente.

// Zoom in one zoom level
let zoomCamera = GMSCameraUpdate.zoomIn()
mapView.animate(with: zoomCamera)
      

// Zoom in one zoom level
GMSCameraUpdate *zoomCamera = [GMSCameraUpdate zoomIn];
[mapView animateWithCameraUpdate:zoomCamera];
      

Stabilisci dei limiti

Per spostare la videocamera in modo che un'intera area di interesse sia visibile al massimo livello di zoom possibile, imposta i confini per l'area inquadrata dalla videocamera. Ad esempio, se vuoi visualizzare tutte le stazioni di servizio entro cinque miglia dalla posizione corrente dell'utente, sposta la videocamera in modo che siano tutte visibili sullo schermo:

1. Calcola il valore GMSCoordinateBounds che vuoi che sia visibile sullo schermo.
2. Utilizza il metodo cameraForBounds:insets: di GMSMapView per restituire un nuovo GMSCameraPosition.

L'impostazione di questi limiti garantisce che l'elemento GMSCoordinateBounds specificato si adatti completamente alle dimensioni della mappa corrente. Tieni presente che questo metodo imposta l'inclinazione e l'orientamento della mappa su 0.

L'esempio seguente mostra come cambiare la videocamera in modo che le città di Vancouver e Calgary vengano visualizzate nella stessa vista.

let vancouver = CLLocationCoordinate2D(latitude: 49.26, longitude: -123.11)
let calgary = CLLocationCoordinate2D(latitude: 51.05,longitude: -114.05)
let bounds = GMSCoordinateBounds(coordinate: vancouver, coordinate: calgary)
let camera = mapView.camera(for: bounds, insets: UIEdgeInsets())!
mapView.camera = camera
      

CLLocationCoordinate2D vancouver = CLLocationCoordinate2DMake(49.26, -123.11);
CLLocationCoordinate2D calgary = CLLocationCoordinate2DMake(51.05, -114.05);
GMSCoordinateBounds *bounds =
    [[GMSCoordinateBounds alloc] initWithCoordinate:vancouver coordinate:calgary];
GMSCameraPosition *camera = [mapView cameraForBounds:bounds insets:UIEdgeInsetsZero];
mapView.camera = camera;
      

Limitare la panoramica dell'utente a una determinata area

Negli scenari precedenti, imposti i limiti della mappa, ma l'utente può poi scorrere o eseguire la panoramica al di fuori di questi limiti. Puoi invece limitare i confini centrali latitudine/longitudine del punto focale della mappa (target della fotocamera) in modo che gli utenti possano scorrere ed eseguire la panoramica solo all'interno di questi limiti.

Ad esempio, un'app di vendita al dettaglio per un centro commerciale o un aeroporto può voler limitare la mappa a limiti specifici, in modo che gli utenti possano scorrere e spostarsi all'interno di questi limiti.

Per limitare il panning a limiti specifici, imposta la proprietà cameraTargetBounds di GMSMapView su un oggetto GMSCoordinateBounds che definisce i limiti richiesti. Per rimuovere la limitazione in un secondo momento, imposta cameraTargetBounds su zero.

mapView.cameraTargetBounds = bounds
      

mapView.cameraTargetBounds = bounds;
      

Il seguente diagramma illustra uno scenario in cui l'obiettivo della videocamera è limitato a un'area leggermente più grande dell'area visibile. L'utente può scorrere ed eseguire la panoramica, a condizione che l'obiettivo della videocamera rimanga all'interno dell'area delimitata. La croce rappresenta l'obiettivo della videocamera:

La mappa riempie sempre l'area visibile, anche se l'area visibile mostra aree al di fuori dei confini definiti. Ad esempio, se posizioni il target della videocamera in un angolo dell'area delimitata, l'area oltre l'angolo sarà visibile nell'area visibile, ma gli utenti non potranno scorrere ulteriormente in quell'area. Il seguente diagramma illustra questo scenario. La croce rappresenta il target della fotocamera:

Nel seguente diagramma, l'obiettivo della videocamera ha limiti molto ristretti, offrendo all'utente pochissime opportunità di scorrere o eseguire la panoramica della mappa. La croce rappresenta l'obiettivo della videocamera:

Impostare uno zoom minimo o massimo

Le costanti globali kGMSMinZoomLevel e kGMSMaxZoomLevel definiscono i valori di zoom minimi o massimi. Per impostazione predefinita, le proprietà minZoom e maxZoom di GMSMapView sono impostate su queste costanti.

Per limitare la gamma di livelli di zoom disponibili per la mappa, imposta un livello di zoom minimo e massimo. Il seguente codice limita il livello di zoom a un valore compreso tra 10 e 15.

let camera = GMSCameraPosition(
  latitude: 41.887,
  longitude: -87.622,
  zoom: 12
)
let mapView = GMSMapView(frame: .zero, camera: camera)
mapView.setMinZoom(10, maxZoom: 15)
      

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:41.887
                                                       longitude:-87.622
                                                             zoom:12];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero
                                        camera:camera];
[mapView setMinZoom:10 maxZoom:15];
      

Devi impostare l'intervallo di zoom con il metodo setMinZoom:maxZoom:; tuttavia, puoi leggere i valori correnti utilizzando le proprietà minZoom e maxZoom. Questo approccio è utile quando limiti solo uno dei valori. Il codice seguente modifica solo il livello di zoom minimo.

mapView.setMinZoom(12, maxZoom: mapView.maxZoom)
      

[mapView setMinZoom:12 maxZoom:mapView.maxZoom];
      

Se, dopo aver aggiornato lo zoom minimo e massimo, il livello di zoom della fotocamera viene impostato su un valore al di fuori del nuovo intervallo, lo zoom corrente viene aggiornato automaticamente per mostrare il valore valido più vicino. Ad esempio, nel codice che segue, lo zoom originale è definito come 4. Se in un secondo momento la gamma di zoom viene impostata su 10-15, lo zoom corrente viene aggiornato a 10.

// Sets the zoom level to 4.
let camera2 = GMSCameraPosition(
  latitude: 41.887,
  longitude: -87.622,
  zoom: 4
)
let mapView2 = GMSMapView(frame: .zero, camera: camera)

// The current zoom, 4, is outside of the range. The zoom will change to 10.
mapView.setMinZoom(10, maxZoom: 15)
      

// Sets the zoom level to 4.
GMSCameraPosition *camera2 = [GMSCameraPosition cameraWithLatitude:41.887
                                                         longitude:-87.622
                                                              zoom:4];
GMSMapView *mapView2 = [GMSMapView mapWithFrame:CGRectZero
                                         camera:camera];
// The current zoom, 4, is outside of the range. The zoom will change to 10.
[mapView setMinZoom:10 maxZoom:15];