Videocamera e vista

Con Maps SDK for iOS, puoi modificare il punto di vista dell'utente sulla mappa modificando la fotocamera della mappa.

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

Le modifiche alla videocamera non influiscono su indicatori, polilinee o altri elementi grafici che hai aggiunto, anche se potresti voler modificare queste aggiunte in modo che si adattino meglio alla nuova visualizzazione.

La visualizzazione della mappa

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

La posizione della videocamera

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

Target (località)

Il target della fotocamera è la posizione del centro della mappa, specificata come coordinate di latitudine e longitudine.

Inclinazione (orientamento)

L'azimut della fotocamera specifica la direzione della bussola, misurata in gradi dal nord vero, corrispondente al bordo superiore della mappa. Se disegni una linea verticale dal centro della mappa al suo bordo superiore, l'azimut corrisponde alla direzione della videocamera (misurata in gradi) rispetto al nord vero.

Un rilevamento pari a 0 indica che la parte superiore della mappa punta a nord vero. Un valore di rilevamento pari a 90 indica che la parte superiore della mappa punta a est (90 gradi su una bussola). Un valore di 180 indica che la parte superiore della mappa punta a sud.

L'API Maps ti consente di modificare l'azimut di una mappa. Ad esempio, chi guida un'auto spesso gira una mappa stradale per allinearla alla direzione di marcia, mentre gli escursionisti che utilizzano una mappa e una bussola di solito la orientano in modo che una linea verticale indichi nord.

Inclinazione (angolo di visualizzazione)

L'inclinazione definisce la posizione della videocamera su un arco direttamente sopra la posizione centrata della mappa, misurata in gradi dal nadir (la direzione che punta direttamente sotto la videocamera). Un valore pari a 0 corrisponde a una fotocamera rivolta direttamente verso il basso. I valori maggiori di 0 corrispondono a una fotocamera inclinata verso l'orizzonte per il numero di gradi specificato. Quando modifichi l'angolo di visualizzazione, la mappa viene visualizzata 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 visualizzazione è di 0 gradi. La prima immagine mostra un esquematico di questo; la posizione 1 è la posizione della fotocamera e la posizione 2 è la posizione attuale della mappa. La mappa risultante viene visualizzata sotto.

Nelle immagini seguenti, l'angolo di visualizzazione è di 45 gradi. Tieni presente che la fotocamera si muove a metà di un arco tra la posizione in alto (0 gradi) e il suolo (90 gradi) fino alla posizione 3. La fotocamera è ancora puntata sul punto centrale della mappa, ma ora è visibile l'area rappresentata dalla linea in posizione 4.

La mappa in questo screenshot è ancora centrata sullo stesso punto della mappa originale, ma nella parte superiore sono presenti più elementi. Man mano che aumenti l'angolo oltre i 45 gradi, gli elementi tra la fotocamera e la posizione sulla mappa appaiono proporzionalmente più grandi, mentre gli elementi oltre la posizione sulla mappa appaiono proporzionalmente più piccoli, creando un effetto tridimensionale.

Zoom

Il livello di zoom della fotocamera determina la scala della mappa. Con livelli di zoom più elevati, sullo schermo sono visibili più dettagli, mentre con livelli di zoom più ridotti, sullo schermo è visibile una porzione più ampia del mondo. Al livello di zoom 0, la scala della mappa è tale che l'intero mondo ha una larghezza di circa 256 punti.

Se aumenti il livello di zoom di 1, la larghezza del mondo sullo schermo raddoppia. Di conseguenza, a livello di zoom N, la larghezza del mondo è di circa 256 * 2^N punti. Ad esempio, a livello di zoom 2, l'intero mondo misura circa 1024 punti di larghezza.

Il livello di zoom non deve essere un numero intero. L'intervallo di livelli di zoom consentito dalla mappa dipende da una serie di fattori, tra cui target, tipo di mappa e dimensioni dello schermo. Qualsiasi numero fuori dall'intervallo verrà convertito nel valore valido più vicino successivo, che può essere il livello di zoom minimo o il livello di zoom massimo. L'elenco seguente mostra il livello approssimativo di dettaglio che puoi aspettarti di vedere a ogni livello di zoom:

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

Impostare la posizione iniziale della videocamera

Imposta la posizione iniziale della videocamera utilizzando l'oggetto GMSCameraPosition, che ti consente di impostare la latitudine e la longitudine del target, nonché la direzione, l'inclinazione e lo zoom.

Per impostare la posizione iniziale della videocamera, crea un oggetto GMSMapViewOptions e imposta la proprietà camera su un GMSCameraPosition. Quindi, passa le opzioni al costruttore di comodità GMSMapView.

let options = GMSMapViewOptions()
options.camera = GMSCameraPosition.camera(withLatitude: -33.8683, longitude: 151.2086, zoom: 16)
let mapView = GMSMapView(options:options)

GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:16];
GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];

Puoi anche creare l'oggetto GMSMapView utilizzando il metodo di inizializzazione UIView predefinito. In questo caso, la posizione della videocamera inizia dalla posizione predefinita e puoi modificarla dopo la creazione.

let options = GMSMapViewOptions()
options.frame = self.view.bounds
let mapView = GMSMapView(options:options)

GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.frame = self.view.bounds;
GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];

Modificare la posizione della videocamera

Puoi modificare la posizione della videocamera in modo programmatico per impostare la posizione, la direzione, l'inclinazione e lo zoom. Sebbene GMSMapView fornisca diversi metodi che puoi utilizzare per cambiare la posizione della videocamera, in genere utilizzi GMSCameraPosition o GMSCameraUpdate:

• GMSCameraPosition contiene proprietà e metodi che utilizzi per modificare ogni parametro di posizione della videocamera: target, orientamento, inclinazione e zoom.

• GMSCameraUpdate ti consente di modificare target, orientamento, inclinazione e zoom e contiene anche metodi di comodità aggiuntivi per supportare lo scorrimento, lo zoom avanzato, il centratura della fotocamera all'interno di confini predefiniti e altro ancora.

Quando sposti la videocamera, puoi scegliere di "agganciarla" alla nuova posizione, il che significa che non c'è animazione, oppure puoi animare il movimento. Ad esempio, se anima una modifica alla posizione target della videocamera, l'animazione esegue la panoramica dalla posizione precedente a quella nuova.

L'animazione esegue l'interpolazione tra gli attributi della fotocamera attuali e quelli della nuova fotocamera. Puoi controllare la durata dell'animazione utilizzando Core Animation.

Utilizza GMSCameraPosition

Per cambiare la fotocamera con GMSCameraPosition, crea un nuovo oggetto o copiane uno esistente e impostalo sull'oggetto GMSMapView. Utilizza l'oggetto GMSCameraPosition per scattare la fotocamera nella nuova posizione con o senza animazione.

Utilizza un oggetto GMSCameraPosition per configurare le proprietà della fotocamera, ad esempio latitudine, longitudine, zoom, orientamento e angolo di visualizzazione. Poi utilizzi questo oggetto 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 le proprietà GMSCameraPosition che vuoi impostare sul relativo valore predefinito.

Per animare il movimento, utilizza il metodo animateToCameraPosition: anziché impostare la proprietà camera.

Utilizza GMSCameraUpdate

GMSCameraUpdate ti consente di aggiornare la posizione della videocamera e di scegliere se applicare lo snap o l'animazione alla nuova posizione. Il vantaggio di GMSCameraUpdate è la praticità. Puoi utilizzare GMSCameraPosition per eseguire le stesse attività di GMSCameraUpdate, ma GMSCameraUpdate fornisce metodi di assistenza aggiuntivi per semplificare la manipolazione della videocamera.

Ad esempio, per utilizzare GMSCameraPosition per aumentare il livello di zoom corrente, devi prima determinare il livello di zoom corrente, quindi creare un oggetto GMSCameraPosition in cui impostare lo zoom su un valore maggiore di quello corrente.

In alternativa, crea un oggetto GMSCameraUpdate con il metodo zoomIn:. Aggiorna la videocamera 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 il metodo GMSMapView moveCamera: per scattare la fotocamera nella nuova posizione.

Nell'esempio seguente, utilizzi GMSCameraUpdate per animare un movimento della fotocamera per centrarla 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];
      

Crea 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 impostandolo sul valore specificato, mantenendo invariate tutte le altre proprietà.

zoomBy:

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

zoomBy:atPoint:

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

setTarget:

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

setTarget:zoom:

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

setCamera:

Imposta un nuovo GMSCameraPosition.

scrollByX:Y:

Modifica la latitudine e la longitudine della videocamera per spostare la mappa di un numero specificato di punti. Un valore x positivo fa muovere la fotocamera verso destra, in modo che la mappa sembri spostarsi verso sinistra. Un valore y positivo fa sì che la fotocamera si sposti verso il basso, in modo che la mappa sembri essere salita. Lo scorrimento è relativo all'attuale orientamento della videocamera. Ad esempio, se la fotocamera ha un'inclinazione di 90 gradi, l'est è "sopra".

fitBounds:

Trasforma la fotocamera in modo da centrare i limiti specificati sullo schermo con il livello di zoom più elevato possibile. Applica un padding predefinito ai limiti di 64 punti.

fitBounds:withPadding:

Trasforma la fotocamera in modo da centrare i limiti specificati sullo schermo con il livello di zoom più alto possibile. Utilizza questo metodo per specificare lo stesso spessore, in punti, per tutti i lati della scatola delimitante.

fitBounds:withEdgeInsets:

Trasforma la fotocamera in modo da centrare i limiti specificati sullo schermo con il livello di zoom più alto possibile. Con UIEdgeInsets, puoi specificare la spaziatura interna per ciascun 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 l'uso di un oggetto GMSCameraPosition o GMSCameraUpdate. Con questi metodi, come animateToLocation: o animateToZoom:, puoi animare una modifica a una singola proprietà della videocamera.

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

mapView.animate(toViewingAngle: 45)
      

[mapView animateToViewingAngle:45];
      

Imposta target (posizione)

La posizione determina il centro della mappa. Le località sono specificate in base alla latitudine e alla 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 fino alla 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 per scorrere la fotocamera nelle direzioni X e Y. In questo esempio, scorri la fotocamera di 200 punti verso destra e 100 punti 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];
      

Impostare la direzione (orientamento)

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

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

mapView.animate(toBearing: 0)
      

[mapView animateToBearing:0];
      

Impostare l'inclinazione (angolo di visione)

L'angolo di visualizzazione è la posizione della videocamera su un arco compreso tra la posizione del centro della mappa e la superficie della Terra, misurata in gradi dal nadir (la direzione che punta direttamente sotto la videocamera). Quando modifichi l'angolo di visualizzazione, la mappa viene visualizzata in prospettiva, con gli elementi tra la videocamera e la posizione della mappa che appaiono proporzionalmente più grandi e gli elementi oltre la posizione della mappa che appaiono proporzionalmente più piccoli, creando un effetto tridimensionale.

L'angolo di visualizzazione può variare da 0 (rivolto verso il basso sulla mappa) fino a un valore massimo dipendente dal livello di zoom. Per il livello di zoom 16 o superiore, l'angolo massimo è di 65 gradi. Per il livello di zoom 10 o inferiore, l'angolo massimo è di 30 gradi.

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

mapView.animate(toViewingAngle: 45)
      

[mapView animateToViewingAngle:45];
      

Impostare lo zoom

Il livello di zoom della fotocamera determina la scala della mappa. Con livelli di zoom più elevati, puoi vedere più dettagli sullo schermo, mentre con livelli di zoom più ridotti, puoi vedere più del mondo.

Imposta lo zoom tramite programmazione 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 per animare lo zoom in di un livello rispetto al livello 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];
      

Definisci dei limiti

Per spostare la videocamera in modo che un'intera area di interesse sia visibile con il livello di zoom più elevato possibile, imposta i confini per la visuale della videocamera. Ad esempio, se vuoi mostrare tutte le stazioni di servizio entro otto chilometri dalla posizione attuale dell'utente, sposta la fotocamera in modo che siano tutte visibili sullo schermo:

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

L'impostazione di questi limiti garantisce che GMSCoordinateBounds specificato rientri interamente nelle dimensioni della mappa corrente. Tieni presente che questo metodo imposta l'inclinazione e l'azimut della mappa su 0.

L'esempio seguente mostra come cambiare la visuale della fotocamera in modo che le città di Vancouver e Calgary appaiano entrambe nella stessa visualizzazione.

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

Questi scenari impostano i limiti della mappa, ma l'utente può scorrere o eseguire la panoramica al di fuori di questi limiti. Ti consigliamo invece di limitare i limiti di centro coordinate del punto focale della mappa (il target della fotocamera) in modo che gli utenti possano scorrere e eseguire la panoramica solo all'interno di questi limiti.

Ad esempio, un'app di vendita al dettaglio per un centro commerciale o un aeroporto potrebbe voler limitare la mappa a limiti specifici, consentendo agli utenti di scorrere e eseguire la panoramica all'interno di questi limiti.

Per limitare la panoramica 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 null.

mapView.cameraTargetBounds = bounds
      

mapView.cameraTargetBounds = bounds;
      

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

La mappa riempie sempre l'area visibile, anche se ciò comporta la visualizzazione di aree esterne ai limiti definiti. Ad esempio, se posizioni il target della fotocamera in un angolo dell'area delimitata, l'area oltre l'angolo è visibile nell'area visibile della pagina, ma gli utenti non possono continuare a scorrere in quella zona. Il seguente diagramma illustra questo scenario. La croce rappresenta il bersaglio della fotocamera:

Nel seguente diagramma, il target della fotocamera ha limiti molto limitati, 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 minimo o massimo. Per impostazione predefinita, le proprietà minZoom e maxZoom di GMSMapView sono impostate su queste costanti.

Per limitare l'intervallo di livelli di zoom disponibili per la mappa, imposta un livello di zoom minimo e massimo. Il codice seguente 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:, ma puoi leggere i valori correnti utilizzando le proprietà minZoom e maxZoom. Questo approccio è utile quando vuoi limitare solo uno dei valori. Il seguente codice 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 è impostato su un valore al di fuori del nuovo intervallo, lo zoom corrente viene aggiornato automaticamente per visualizzare il valore valido più vicino. Ad esempio, nel codice seguente, lo zoom originale è definito come 4. Quando l'intervallo di zoom viene impostato 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];