Street View

Seleziona piattaforma: Android iOS JavaScript

Google Street View offre viste panoramiche a 360° dalle strade designate lungo l'area di copertura.

Questo video mostra come utilizzare il servizio Street View per offrire agli utenti un'esperienza reale di un indirizzo sulla mappa, fornendo loro un significato significativo sulla destinazione o su qualsiasi luogo di loro interesse.

La copertura disponibile tramite l'API Google Maps per Android v2 è la stessa dell'app Google Maps sul tuo dispositivo Android. Per scoprire di più su Street View e sulle aree supportate su una mappa interattiva, consulta Informazioni su Street View.

La classe StreetViewPanorama modella il panorama di Street View nella tua applicazione. All'interno dell'interfaccia utente, un panorama è rappresentato da un oggetto StreetViewPanoramaFragment o StreetViewPanoramaView.

Esempi di codice

Il repository ApiDemos su GitHub include esempi che dimostrano l'uso di Street View.

Esempi Java:

Esempi di Kotlin:

Panoramica di Street View nell'SDK Maps per Android

L'SDK Maps per Android fornisce un servizio Street View per ottenere e manipolare le immagini utilizzate in Google Street View. Le immagini vengono restituite come panorami.

Ogni panorama di Street View è un'immagine o un insieme di immagini che offre una visione completa a 360 gradi da un'unica posizione. Le immagini sono conformi alla proiezione equirettangolare (Plate Carrée), che contiene una visione orizzontale a 360 gradi (a tutto tondo) e una visione verticale a 180 gradi (da dritto in alto a destra). Il risultante panorama a 360° definisce una proiezione su una sfera con l'immagine aggregata sulla superficie bidimensionale della sfera.

StreetViewPanorama offre un visualizzatore che esegue il rendering del panorama come una sfera con una fotocamera al centro. Puoi manipolare l'StreetViewPanoramaCamera per controllare lo zoom e l'orientamento (inclinazione e rilevamento) della fotocamera.

Inizia

Segui la guida introduttiva per configurare un progetto Maps SDK for Android. quindi aggiungi una panoramica di Street View, come descritto di seguito.

La libreria client dell'SDK Google Play Services include alcuni esempi di Street View che puoi importare nel tuo progetto e utilizzare come base per lo sviluppo. Consulta l'introduzione per le linee guida sull'importazione degli esempi.

Utilizzare l'API

Segui le istruzioni riportate di seguito per aggiungere una panoramica di Street View a un frammento Android. Questo è il modo più semplice per aggiungere Street View alla tua applicazione. Quindi scopri di più su frammenti, viste e personalizzazione del panorama.

Aggiungere una panoramica di Street View

Per aggiungere una panoramica di Street View come questa:

Demo per una panoramica di Street View

In breve:

  1. Aggiungi un oggetto Frammento all'Attività che gestirà il panorama di Street View. Il modo più semplice per farlo è aggiungere un elemento <fragment> al file di layout per Activity.
  2. Implementa l'interfaccia OnStreetViewPanoramaReadyCallback e utilizza il metodo di callback onStreetViewPanoramaReady(StreetViewPanorama) per ottenere un handle all'oggetto StreetViewPanorama.
  3. Chiama getStreetViewPanoramaAsync() sul frammento per registrare il callback.

Di seguito sono riportati ulteriori dettagli su ogni passaggio.

Aggiungi un frammento

Aggiungi un elemento <fragment> al file di layout dell'attività per definire un oggetto Frammento. In questo elemento, imposta l'attributo class su com.google.android.gms.maps.StreetViewPanoramaFragment (o SupportStreetViewPanoramaFragment).

Ecco un esempio di frammento in un file di layout:

<fragment
    android:name="com.google.android.gms.maps.StreetViewPanoramaFragment"
    android:id="@+id/streetviewpanorama"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Aggiungere il codice Street View

Per lavorare con il panorama di Street View all'interno della tua app, devi implementare l'interfaccia OnStreetViewPanoramaReadyCallback e impostare un'istanza del callback su un oggetto StreetViewPanoramaFragment o StreetViewPanoramaView. Questo tutorial utilizza un elemento StreetViewPanoramaFragment, perché è il modo più semplice per aggiungere Street View alla tua app. Il primo passaggio consiste nell'implementare l'interfaccia di callback:

Java


class StreetViewActivity extends AppCompatActivity implements OnStreetViewPanoramaReadyCallback {
    // ...
}

      

Kotlin


class StreetViewActivity : AppCompatActivity(), OnStreetViewPanoramaReadyCallback {
    // ...
}

      

Nel metodo onCreate() di Activity, imposta il file di layout come visualizzazione di contenuti. Ad esempio, se il file di layout è denominato main.xml, utilizza questo codice:

Java


@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_street_view);
    SupportStreetViewPanoramaFragment streetViewPanoramaFragment =
        (SupportStreetViewPanoramaFragment) getSupportFragmentManager()
            .findFragmentById(R.id.street_view_panorama);
    streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);
}

      

Kotlin


override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_street_view)
    val streetViewPanoramaFragment =
        supportFragmentManager
            .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment
    streetViewPanoramaFragment.getStreetViewPanoramaAsync(this)
}

      

Ottieni un handle al frammento chiamando FragmentManager.findFragmentById(), passandogli l'ID risorsa del tuo elemento <fragment>. Tieni presente che l'ID risorsa R.id.streetviewpanorama viene aggiunto automaticamente al progetto Android quando crei il file di layout.

quindi usa getStreetViewPanoramaAsync() per impostare il callback sul frammento.

Java


SupportStreetViewPanoramaFragment streetViewPanoramaFragment =
    (SupportStreetViewPanoramaFragment) getSupportFragmentManager()
        .findFragmentById(R.id.street_view_panorama);
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);

      

Kotlin


val streetViewPanoramaFragment =
    supportFragmentManager
        .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this)

      

Utilizza il metodo di callback onStreetViewPanoramaReady(StreetViewPanorama) per recuperare un'istanza non null di StreetViewPanorama, pronta per essere utilizzata.

Java


@Override
public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) {
    LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
    streetViewPanorama.setPosition(sanFrancisco);
}

      

Kotlin


override fun onStreetViewPanoramaReady(streetViewPanorama: StreetViewPanorama) {
    val sanFrancisco = LatLng(37.754130, -122.447129)
    streetViewPanorama.setPosition(sanFrancisco)
}

      

Scopri di più sulla configurazione dello stato iniziale

A differenza di una mappa, non è possibile configurare lo stato iniziale del panorama di Street View tramite XML. Tuttavia, puoi configurare il panorama in modo programmatico passando un oggetto StreetViewPanoramaOptions contenente le opzioni specificate.

Java


LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
StreetViewPanoramaView view = new StreetViewPanoramaView(this,
    new StreetViewPanoramaOptions().position(sanFrancisco));

      

Kotlin


val sanFrancisco = LatLng(37.754130, -122.447129)
val view = StreetViewPanoramaView(
    this,
    StreetViewPanoramaOptions().position(sanFrancisco)
)

      

Altro su StreetViewPanoramaFragment

StreetViewPanoramaFragment è una sottoclasse della classe Android Fragment e ti consente di inserire una panoramica Street View in un frammento Android. Gli oggetti StreetViewPanoramaFragment fungono da contenitori per il panorama e forniscono l'accesso all'oggetto StreetViewPanorama.

Immagine Street View

StreetViewPanoramaView, una sottoclasse della classe View Android, ti consente di inserire una panoramica Street View in una View Android. Un View rappresenta una regione rettangolare dello schermo ed è un elemento fondamentale per le applicazioni e i widget Android. Proprio come un StreetViewPanoramaFragment, StreetViewPanoramaView funge da contenitore per il panorama, esponendo le funzionalità di base tramite l'oggetto StreetViewPanorama. Gli utenti di questo corso devono inoltrare tutti i metodi del ciclo di vita dell'attività (ad esempio onCreate(), onDestroy(), onResume() e onPause()) ai metodi corrispondenti nella classe StreetViewPanoramaView.

Personalizzare la funzionalità controllata dall'utente

Per impostazione predefinita, la seguente funzionalità è a disposizione dell'utente quando visualizza il panorama di Street View: panoramica, zoom e viaggio nelle panoramiche adiacenti. Puoi attivare e disattivare i gesti controllati dall'utente tramite metodi su StreetViewPanorama. Le modifiche programmatiche sono ancora possibili quando il gesto è disattivato.

Imposta la posizione del panorama

Per impostare la posizione del panorama di Street View, chiama StreetViewPanorama.setPosition(), superando un LatLng. Puoi anche passare radius e source come parametri facoltativi.

Un raggio è utile se vuoi ampliare o restringere l'area in cui Street View cercherà un panorama corrispondente. Se il raggio è pari a 0, significa che il panorama deve essere collegato esattamente al LatLng specificato. Il raggio predefinito è di 50 metri. Se nell'area di corrispondenza è presente più di un panorama, l'API restituirà la corrispondenza migliore.

Una sorgente è utile se vuoi limitare Street View in modo da cercare solo i panorami all'aperto. Per impostazione predefinita, le panoramiche di Street View potrebbero trovarsi all'interno di luoghi quali musei, edifici pubblici, caffè e attività commerciali. Tieni presente che le panoramiche all'esterno potrebbero non esistere per la posizione specificata.

Java


LatLng sanFrancisco = new LatLng(37.754130, -122.447129);

// Set position with LatLng only.
streetViewPanorama.setPosition(sanFrancisco);

// Set position with LatLng and radius.
streetViewPanorama.setPosition(sanFrancisco, 20);

// Set position with LatLng and source.
streetViewPanorama.setPosition(sanFrancisco, StreetViewSource.OUTDOOR);

// Set position with LaLng, radius and source.
streetViewPanorama.setPosition(sanFrancisco, 20, StreetViewSource.OUTDOOR);

      

Kotlin


val sanFrancisco = LatLng(37.754130, -122.447129)

// Set position with LatLng only.
streetViewPanorama.setPosition(sanFrancisco)

// Set position with LatLng and radius.
streetViewPanorama.setPosition(sanFrancisco, 20)

// Set position with LatLng and source.
streetViewPanorama.setPosition(sanFrancisco, StreetViewSource.OUTDOOR)

// Set position with LaLng, radius and source.
streetViewPanorama.setPosition(sanFrancisco, 20, StreetViewSource.OUTDOOR)

      

In alternativa, puoi impostare la località in base a un ID panorama passando un elemento panoId a StreetViewPanorama.setPosition().

Per recuperare l'ID del panorama per i panorami adiacenti, usa prima getLocation() per recuperare un StreetViewPanoramaLocation. Questo oggetto contiene l'ID della panoramica corrente e un array di oggetti StreetViewPanoramaLink, ognuno dei quali contiene l'ID di una panoramica collegata a quella corrente.

Java


StreetViewPanoramaLocation location = streetViewPanorama.getLocation();
if (location != null && location.links != null) {
    streetViewPanorama.setPosition(location.links[0].panoId);
}

      

Kotlin


streetViewPanorama.location.links.firstOrNull()?.let { link: StreetViewPanoramaLink ->
    streetViewPanorama.setPosition(link.panoId)
}

      

Zoom avanti e indietro

Puoi modificare il livello di zoom in modo programmatico impostando StreetViewPanoramaCamera.zoom. Se imposti lo zoom su 1.0, l'immagine verrà ingrandita di 2.

Lo snippet seguente utilizza StreetViewPanoramaCamera.Builder() per costruire una nuova fotocamera con l'inclinazione e il rilevamento della fotocamera esistente, aumentando allo stesso tempo lo zoom del cinquanta percento.

Java


float zoomBy = 0.5f;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom + zoomBy)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing)
    .build();

      

Kotlin


val zoomBy = 0.5f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom + zoomBy)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing)
    .build()

      

Imposta l'orientamento della fotocamera (punto di vista)

Puoi determinare l'orientamento della fotocamera Street View impostando il cuscinetto e l'inclinazione su StreetViewPanoramaCamera.

bearing
La direzione in cui punta la fotocamera, specificata in gradi in senso orario da vero nord, intorno al luogo della fotocamera. Il vero nord è 0, l'est è 90, il sud è 180, l'ovest è 270.
inclinazione
L'asse Y si inclina verso l'alto o verso il basso. L'intervallo è compreso tra -90 e 0-90, con -90 dall'alto verso il basso, 90 verso l'orizzonte e 90 verso l'alto. La varianza viene misurata in base al tono iniziale iniziale della videocamera, che è spesso (ma non sempre) orizzontale a schermo piatto. Ad esempio, un'immagine scattata su una collina probabilmente avrà un tono predefinito non orizzontale.

Lo snippet che segue utilizza StreetViewPanoramaCamera.Builder() per creare una nuova fotocamera con lo zoom e l'inclinazione della fotocamera esistente, cambiando il supporto di 30 gradi a sinistra.

Java


float panBy = 30;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing - panBy)
    .build();

      

Kotlin


val panBy = 30f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing - panBy)
    .build()

      

Il seguente snippet inclina la videocamera di 30 gradi verso l'alto.

Java


float tilt = streetViewPanorama.getPanoramaCamera().tilt + 30;
tilt = (tilt > 90) ? 90 : tilt;

StreetViewPanoramaCamera previous = streetViewPanorama.getPanoramaCamera();

StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder(previous)
    .tilt(tilt)
    .build();

      

Kotlin


var tilt = streetViewPanorama.panoramaCamera.tilt + 30
tilt = if (tilt > 90) 90f else tilt
val previous = streetViewPanorama.panoramaCamera
val camera = StreetViewPanoramaCamera.Builder(previous)
    .tilt(tilt)
    .build()

      

Animazione dei movimenti della videocamera

Per animare i movimenti della videocamera, chiama StreetViewPanorama.animateTo(). L'animazione si interpola tra gli attributi della videocamera attuali e quelli nuovi. Se vuoi passare direttamente alla videocamera senza animazione, puoi impostare la durata su 0.

Java


// Keeping the zoom and tilt. Animate bearing by 60 degrees in 1000 milliseconds.
long duration = 1000;
StreetViewPanoramaCamera camera =
    new StreetViewPanoramaCamera.Builder()
        .zoom(streetViewPanorama.getPanoramaCamera().zoom)
        .tilt(streetViewPanorama.getPanoramaCamera().tilt)
        .bearing(streetViewPanorama.getPanoramaCamera().bearing - 60)
        .build();
streetViewPanorama.animateTo(camera, duration);

      

Kotlin


// Keeping the zoom and tilt. Animate bearing by 60 degrees in 1000 milliseconds.
val duration: Long = 1000
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing - 60)
    .build()
streetViewPanorama.animateTo(camera, duration)

      

L'immagine seguente mostra il risultato quando pianifichi l'esecuzione dell'animazione precedente ogni 2000 millisecondi utilizzando Handler.postDelayed():

Demo di animazione panoramica di Street View