Videocamera e vista

Seleziona piattaforma: Android iOS JavaScript

Le mappe nell'SDK Maps per Android possono essere inclinate e ruotate con gesti semplici, dando agli utenti la possibilità di regolare la mappa con un orientamento adatto alle loro esigenze. A qualsiasi livello di zoom, puoi eseguire una panoramica della mappa o modificarne la prospettiva con pochissima latenza grazie all'impronta più ridotta dei riquadri della mappa basati su vettori.

Esempi di codice

Il repository APIDemos su GitHub include un esempio che illustra le funzionalità della fotocamera:

Introduzione

Come Google Maps sul Web, l'SDK Maps per Android rappresenta la superficie del mondo (una sfera) sullo schermo del dispositivo (un piano piatto) utilizzando la proiezione Mercator. In direzione est e ovest, la mappa viene ripetuta all'infinito man mano che il mondo si avvolge perfettamente su se stesso. In direzione nord e sud la mappa è limitata a circa 85 gradi nord e 85 gradi sud.

Nota: una proiezione di Mercatore ha una larghezza fissa, longitudinalmente, ma un'altezza latitudinalia infinita. Abbiamo "tagliato" le immagini di mappa di base utilizzando la proiezione di Mercator a circa +/- 85 gradi per rendere quadrata la forma della mappa risultante, il che consente una logica più semplice per la selezione dei riquadri.

L'SDK Maps per Android consente di modificare il punto di vista della mappa dell'utente modificando la fotocamera della mappa.

Le modifiche apportate alla fotocamera non apportano modifiche agli indicatori, agli overlay o ad altri elementi grafici che hai aggiunto, ma potresti voler modificare le aggiunte per adattarle meglio alla nuova visualizzazione.

Poiché puoi ascoltare i gesti degli utenti sulla mappa, puoi modificarla in risposta alle richieste degli utenti. Ad esempio, il metodo di callback OnMapClickListener.onMapClick() risponde a un singolo tocco sulla mappa. Poiché il metodo riceve la latitudine e la longitudine della località toccata, puoi rispondere eseguendo la panoramica o lo zoom su quel punto. Sono disponibili metodi simili per rispondere ai tocchi sul fumetto di un indicatore o per rispondere a un gesto di trascinamento su un indicatore.

Puoi anche ascoltare i movimenti della videocamera in modo che l'app riceva una notifica quando la videocamera inizia a muoversi, è in movimento o smette di muoversi. Per informazioni dettagliate, consulta la guida agli eventi di cambio della videocamera.

La posizione della fotocamera

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

Diagramma delle proprietà della fotocamera

Target (località)

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

La latitudine può essere compresa tra -85 e 85 gradi inclusi. I valori superiori o inferiori a questo intervallo verranno limitati al valore più vicino. Ad esempio, se specifichi una latitudine di 100, il valore verrà impostato su 85. La longitudine è compresa tra -180 e 180 gradi, inclusi. I valori superiori o inferiori a questo intervallo vengono inseriti in modo tale che rientrino nell'intervallo (-180, 180). Ad esempio, i valori 480, 840 e 1200 verranno aggregati a 120 gradi.

Cuscinetto (orientamento)

Il rilevamento della fotocamera specifica la direzione della bussola, misurata in gradi dal vero nord, corrispondente al bordo superiore della mappa. Se tracci una linea verticale dal centro della mappa al bordo superiore della mappa, il rilevamento corrisponde all'intestazione della fotocamera (misurata in gradi) rispetto al nord.

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

L'API di Google Maps ti consente di cambiare il rilevamento di una mappa. Ad esempio, una persona che guida un'auto spesso ruota la mappa per allinearla alla direzione di viaggio, mentre gli escursionisti che utilizzano una mappa e una bussola di solito orientano la mappa in modo che una linea verticale punti verso nord.

Inclina (angolo di visualizzazione)

L'inclinazione definisce la posizione della fotocamera su un arco direttamente sulla posizione centrale della mappa, misurata in gradi dalla distanza nadir (la direzione diretta direttamente sotto la fotocamera). Un valore pari a 0 corrisponde a una videocamera puntata verso il basso. I valori maggiori di 0 corrispondono a una fotocamera che viene posizionata verso l'orizzonte per il numero di gradi specificato. Quando modifichi l'angolo di visione, la mappa appare in prospettiva, con elementi lontani che sembrano più piccoli e quelli nelle vicinanze più grandi. Le illustrazioni che seguono lo dimostrano.

Nelle immagini di seguito, l'angolo di visualizzazione è di 0 gradi. La prima immagine mostra uno schema di questo aspetto; la posizione 1 è la posizione della fotocamera e la posizione 2 è la posizione corrente sulla mappa. Sotto viene mostrata la mappa risultante.

Screenshot di una mappa con una fotocamera posizionata a un angolo di visione di 0°, con un livello di zoom di 18.
La mappa viene visualizzata con l'angolo di visualizzazione predefinito della videocamera.
Diagramma che mostra la posizione predefinita della fotocamera, direttamente sopra la posizione della mappa, con un angolo di 0 gradi.
L'angolo di visione predefinito della videocamera.

Nelle immagini di seguito, l'angolo di visione è di 45 gradi. Tieni presente che la videocamera si sposta a metà dell'arco tra il cielo dritto (0 gradi) e il suolo (90 gradi), in posizione 3. La fotocamera è ancora rivolta verso il punto centrale della mappa, ma ora l'area rappresentata dalla linea in posizione 4 è visibile.

Screenshot di una mappa con una fotocamera posizionata a un angolo di visione di 45°, con livello di zoom 18.
Mappa visualizzata con un angolo di visione di 45 gradi.
Diagramma che mostra l'angolo di visione della videocamera impostato su 45°, con il livello di zoom ancora impostato su 18.
Un angolo di visione di 45 gradi della videocamera.

La mappa in questo screenshot è ancora centrata allo stesso punto della mappa originale, ma nella parte superiore della mappa sono state visualizzate altre funzionalità. Man mano che aumenti l'angolo oltre i 45 gradi, gli elementi tra la fotocamera e la posizione della mappa appaiono proporzionalmente maggiori, mentre gli elementi oltre la posizione della mappa appaiono proporzionalmente più piccoli, con un effetto tridimensionale.

Assumi una prospettiva

Il livello di zoom della fotocamera determina la scala della mappa. A livelli di zoom maggiori, possono essere visualizzati più dettagli sullo schermo, mentre a livelli di zoom più piccoli possono essere visualizzati più elementi del mondo. Al livello di zoom 0, la scala della mappa è tale che il mondo intero ha una larghezza di circa 256dp (pixel indipendenti dalla densità).

Se aumenti il livello di zoom di 1, la larghezza del mondo sullo schermo raddoppia. Pertanto al livello di zoom N, la larghezza del mondo è di circa 256 * 2N dp. Ad esempio, con il livello di zoom 2, il mondo intero è di circa 1024 dp.

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 target, tipo di mappa e dimensioni dello schermo. Qualsiasi numero al di fuori dell'intervallo verrà convertito nel valore valido successivo, 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
Le seguenti immagini mostrano l'aspetto visivo dei diversi livelli di zoom:
Screenshot di una mappa a livello di zoom 5
Una mappa al livello di zoom 5.
Screenshot di una mappa a livello di zoom 15
Una mappa al livello di zoom 15.
Screenshot di una mappa al livello di zoom 20
Una mappa al livello di zoom 20.

Spostamento della videocamera in corso...

L'API di Google Maps consente di modificare la porzione del mondo visibile sulla mappa. A tal fine, devi modificare la posizione della fotocamera (anziché spostare la mappa).

Quando cambi fotocamera, hai la possibilità di animare il movimento della videocamera risultante. L'animazione si interpola tra gli attributi attuali della videocamera e quelli nuovi. Puoi anche controllare la durata dell'animazione.

Per cambiare la posizione della videocamera, devi specificare il punto in cui vuoi spostarla utilizzando un CameraUpdate. L'API di Google Maps ti consente di creare diversi tipi di CameraUpdate utilizzando CameraUpdateFactory. Sono disponibili le seguenti opzioni:

Modificare il livello di zoom e impostare lo zoom minimo/massimo

CameraUpdateFactory.zoomIn() e CameraUpdateFactory.zoomOut() forniscono un CameraUpdate che modifica il livello di zoom di 1,0, mantenendo invariate le altre proprietà.

CameraUpdateFactory.zoomTo(float) ti fornisce un CameraUpdate che cambia il livello di zoom sul valore specificato, mantenendo invariate le altre proprietà.

CameraUpdateFactory.zoomBy(float) e CameraUpdateFactory.zoomBy(float, Point) forniscono una CameraUpdate che aumenta (o diminuisce, se il valore è negativo) del livello di zoom in base al valore specificato. Quest'ultimo corregge il punto specifico sullo schermo in modo che rimanga nella stessa posizione (latitudine/longitudine) e potrebbe cambiare la posizione della videocamera per raggiungere questo obiettivo.

Potrebbe essere utile impostare un livello di zoom minimo e/o massimo preferito. Ad esempio, è utile per controllare l'esperienza dell'utente se la tua app mostra un'area definita intorno a un punto d'interesse o se utilizzi un overlay di riquadri personalizzati con un insieme limitato di livelli di zoom.

Java


private GoogleMap map;
    map.setMinZoomPreference(6.0f);
    map.setMaxZoomPreference(14.0f);

      

Kotlin


private lateinit var map: GoogleMap

    map.setMinZoomPreference(6.0f)
    map.setMaxZoomPreference(14.0f)

      

Tieni presente che esistono considerazioni tecniche che potrebbero impedire all'API di consentire agli utenti di aumentare lo zoom troppo basso o troppo alto. Ad esempio, il satellite o il rilievo potrebbero avere uno zoom massimo inferiore rispetto ai riquadri della mappa di base.

Modifica della posizione della fotocamera

Esistono due metodi pratici per cambiare spesso la posizione. CameraUpdateFactory.newLatLng(LatLng) fornisce un CameraUpdate che modifica la latitudine e la longitudine della videocamera, preservando tutte le altre proprietà. CameraUpdateFactory.newLatLngZoom(LatLng, float) fornisce una CameraUpdate che modifica la latitudine, la longitudine e lo zoom della videocamera, mantenendo inalterate tutte le altre proprietà.

Per la massima flessibilità nel cambiare la posizione della fotocamera, usa CameraUpdateFactory.newCameraPosition(CameraPosition) che offre un CameraUpdatespostamento della fotocamera nella posizione specificata. È possibile ottenere un CameraPosition direttamente, utilizzando new CameraPosition() o con un CameraPosition.Builder utilizzando new CameraPosition.Builder().

Panoramica (scorrimento)

CameraUpdateFactory.scrollBy(float, float) fornisce un CameraUpdate che modifica la latitudine e la longitudine della fotocamera in modo tale che la mappa si muova in base al numero di pixel specificato. Un valore x positivo fa spostare la fotocamera a destra, in modo che la mappa sembri spostato a sinistra. Un valore y positivo provoca lo spostamento della videocamera verso il basso, perciò la mappa sembra che si sia spostata verso l'alto. Al contrario, valori x negativi fanno sì che la fotocamera si muova a sinistra, in modo che la mappa sembri aver spostato a destra e che i valori y negativi causino lo spostamento verso l'alto della fotocamera. Lo scorrimento è relativo all'orientamento attuale della videocamera. Ad esempio, se la videocamera ha una portata di 90 gradi, "est" è "alzata".

Definizione dei confini

Impostazione dei confini della mappa

A volte è utile spostare la videocamera in modo che un'intera area di interesse sia visibile al massimo livello di zoom possibile. Ad esempio, se stai visualizzando tutte le stazioni di servizio entro cinque miglia dalla posizione attuale dell'utente, potresti voler spostare la videocamera in modo che sia visibile sullo schermo. Per farlo, devi prima calcolare LatLngBounds che vuoi rendere visibile sullo schermo. Puoi quindi utilizzare CameraUpdateFactory.newLatLngBounds(LatLngBounds bounds, int padding) per ottenere un CameraUpdate che modifichi la posizione della fotocamera in modo che l'LatLngBounds specificato si adatti interamente alla mappa, tenendo conto della spaziatura interna (in pixel) specificata. Il CameraUpdate restituito assicura che lo spazio (in pixel) tra i limiti specificati e il bordo della mappa sarà almeno pari alla spaziatura interna specificata. Tieni presente che l'inclinazione e il supporto della mappa saranno entrambi pari a 0.

Java


LatLngBounds australiaBounds = new LatLngBounds(
    new LatLng(-44, 113), // SW bounds
    new LatLng(-10, 154)  // NE bounds
);
map.moveCamera(CameraUpdateFactory.newLatLngBounds(australiaBounds, 0));

      

Kotlin


val australiaBounds = LatLngBounds(
    LatLng((-44.0), 113.0),  // SW bounds
    LatLng((-10.0), 154.0) // NE bounds
)
map.moveCamera(CameraUpdateFactory.newLatLngBounds(australiaBounds, 0))

      

Centra la mappa all'interno di un'area

In alcuni casi, potresti voler centrare la videocamera entro i bordi anziché includendo i bordi estremi. Ad esempio, per centrare la fotocamera su un paese mantenendo uno zoom costante, In questo caso, puoi utilizzare un metodo simile, creando una LatLngBounds e utilizzando CameraUpdateFactory.newLatLngZoom(LatLng latLng, float zoom) con il LatLngBounds.Metodo getCenter(). Il metodo getCenter() restituisce il centro geografico della LatLngBounds.

Java


LatLngBounds australiaBounds = new LatLngBounds(
    new LatLng(-44, 113), // SW bounds
    new LatLng(-10, 154)  // NE bounds
);
map.moveCamera(CameraUpdateFactory.newLatLngZoom(australiaBounds.getCenter(), 10));

      

Kotlin


val australiaBounds = LatLngBounds(
    LatLng((-44.0), 113.0),  // SW bounds
    LatLng((-10.0), 154.0) // NE bounds
)
map.moveCamera(CameraUpdateFactory.newLatLngZoom(australiaBounds.center, 10f))

      

Un sovraccarico del metodo, newLatLngBounds(boundary, width, height, padding) consente di specificare una larghezza e un'altezza in pixel per un rettangolo, con l'intenzione di far corrispondere le dimensioni della mappa. Il rettangolo è posizionato in modo che il suo centro corrisponda a quello della visualizzazione della mappa (in modo che, se le dimensioni specificate sono uguali a quelle della vista della mappa, il rettangolo coincide con la vista della mappa). L'elemento CameraUpdate spostato sposterà la fotocamera in modo che l'elemento LatLngBounds specificato sia centrato sullo schermo all'interno del determinato rettangolo al maggiore livello di zoom possibile, tenendo conto della spaziatura interna richiesta.

Nota: utilizza il metodo più semplice newLatLngBounds(boundary, padding) per generare un CameraUpdate solo se verrà utilizzato per spostare la fotocamera dopo che la mappa è stata modificata. Durante il layout, l'API calcola i limiti di visualizzazione della mappa necessari per proiettare correttamente il riquadro di delimitazione. In confronto, puoi utilizzare il metodo CameraUpdate restituito dal metodo più complesso newLatLngBounds(boundary, width, height, padding) in qualsiasi momento, anche prima che la mappa sia stata sottoposta a layout, perché l'API calcola i confini di visualizzazione dagli argomenti trasmessi.

Limitare la panoramica dell'utente a un'area specifica

Negli scenari precedenti, hai impostato i limiti della mappa, ma l'utente può quindi scorrere o eseguire la panoramica al di fuori di questi limiti. Consigliamo invece di vincolare i limiti del lat/lng del punto focale della mappa (il target della fotocamera) in modo che gli utenti possano scorrere solo ed eseguire una panoramica 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 ed esplorare i confini entro i confini.

Java


// Create a LatLngBounds that includes the city of Adelaide in Australia.
LatLngBounds adelaideBounds = new LatLngBounds(
    new LatLng(-35.0, 138.58), // SW bounds
    new LatLng(-34.9, 138.61)  // NE bounds
);

// Constrain the camera target to the Adelaide bounds.
map.setLatLngBoundsForCameraTarget(adelaideBounds);

      

Kotlin


// Create a LatLngBounds that includes the city of Adelaide in Australia.
val adelaideBounds = LatLngBounds(
    LatLng(-35.0, 138.58),  // SW bounds
    LatLng(-34.9, 138.61) // NE bounds
)

// Constrain the camera target to the Adelaide bounds.
map.setLatLngBoundsForCameraTarget(adelaideBounds)

      

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

Diagramma che mostra un oggetto LatLngBounds della fotocamera più grande dell'area visibile.

La mappa riempie sempre l'area visibile, anche se questa si traduce in aree esterne ai limiti definiti. Ad esempio, se posizioni la fotocamera target in un angolo dell'area delimitata, l'area oltre l'angolo è visibile nell'area visibile, ma gli utenti non possono scorrere ulteriormente in quell'area. Lo schema seguente illustra questo scenario. La croce rappresenta la fotocamera target:

Diagramma che mostra il target della fotocamera posizionato nell'angolo in basso a destra dei LatLngBounds della fotocamera.

Nel diagramma seguente, la destinazione della videocamera ha limiti molto limitati, offrendo all'utente pochissime opportunità per scorrere o esplorare la mappa. La croce rappresenta la videocamera target:

Diagramma che mostra un oggetto LatLngBounds più piccolo dell'area visibile.

Aggiornamento dell'inquadratura della fotocamera

Per applicare una CameraUpdate alla mappa, puoi spostare la fotocamera immediatamente o animarla senza problemi. Per spostare la fotocamera all'istante con il valore CameraUpdate specificato, puoi chiamare il numero GoogleMap.moveCamera(CameraUpdate).

Puoi rendere l'esperienza utente più piacevole, soprattutto per i movimenti brevi, animando la modifica. Per farlo, invece di chiamare GoogleMap.moveCamera chiama GoogleMap.animateCamera. La mappa si sposterà senza problemi verso i nuovi attributi. La forma più dettagliata di questo metodo, GoogleMap.animateCamera(cameraUpdate, duration, callback), offre tre argomenti:

cameraUpdate
La CameraUpdate che descrive dove spostare la videocamera.
callback
Un oggetto che implementa GoogleMap.CancellableCallback. Questa interfaccia generalizzata per la gestione delle attività definisce due metodi "onCancel()" e "onFinished()". Per le animazioni, i metodi vengono chiamati nelle seguenti circostanze:
onFinish()
Richiamato se l'animazione viene completata senza interruzioni.
onCancel()

Richiamato se l'animazione viene interrotta chiamando stopAnimation() o avviando un nuovo movimento della videocamera.

In alternativa, ciò può accadere anche se chiami GoogleMap.stopAnimation().

duration
Durata prevista dell'animazione, in millisecondi, espressa come int.

I seguenti snippet di codice illustrano alcuni dei metodi più comuni per spostare la videocamera.

Java


LatLng sydney = new LatLng(-33.88,151.21);
LatLng mountainView = new LatLng(37.4, -122.1);

// Move the camera instantly to Sydney with a zoom of 15.
map.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, 15));

// Zoom in, animating the camera.
map.animateCamera(CameraUpdateFactory.zoomIn());

// Zoom out to zoom level 10, animating with a duration of 2 seconds.
map.animateCamera(CameraUpdateFactory.zoomTo(10), 2000, null);

// Construct a CameraPosition focusing on Mountain View and animate the camera to that position.
CameraPosition cameraPosition = new CameraPosition.Builder()
    .target(mountainView )      // Sets the center of the map to Mountain View
    .zoom(17)                   // Sets the zoom
    .bearing(90)                // Sets the orientation of the camera to east
    .tilt(30)                   // Sets the tilt of the camera to 30 degrees
    .build();                   // Creates a CameraPosition from the builder
map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));

      

Kotlin


val sydney = LatLng(-33.88, 151.21)
val mountainView = LatLng(37.4, -122.1)

// Move the camera instantly to Sydney with a zoom of 15.
map.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, 15f))

// Zoom in, animating the camera.
map.animateCamera(CameraUpdateFactory.zoomIn())

// Zoom out to zoom level 10, animating with a duration of 2 seconds.
map.animateCamera(CameraUpdateFactory.zoomTo(10f), 2000, null)

// Construct a CameraPosition focusing on Mountain View and animate the camera to that position.
val cameraPosition = CameraPosition.Builder()
    .target(mountainView) // Sets the center of the map to Mountain View
    .zoom(17f)            // Sets the zoom
    .bearing(90f)         // Sets the orientation of the camera to east
    .tilt(30f)            // Sets the tilt of the camera to 30 degrees
    .build()              // Creates a CameraPosition from the builder
map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition))