Street View

Seleziona la piattaforma: Android iOS JavaScript

Google Street View fornisce viste panoramiche a 360 gradi dalle strade designate all'interno della sua area di copertura.

Questo video mostra come utilizzare il servizio Street View per offrire agli utenti un'esperienza realistica di un indirizzo sulla mappa, fornendo loro un contesto 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. Puoi scoprire di più su Street View e vedere le aree supportate su una mappa interattiva nella pagina Informazioni su Street View.

La classe StreetViewPanorama modella la panoramica di Street View nella tua applicazione. All'interno della UI, una panoramica è rappresentata da un StreetViewPanoramaFragment o StreetViewPanoramaView oggetto.

Esempi di codice

Il repository ApiDemos su GitHub include esempi che mostrano l'utilizzo di Street View.

Esempi di Kotlin:

Esempi di Java:

Panoramica di Street View in Maps SDK for Android

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

Ogni panoramica in Street View è un'immagine o un insieme di immagini che fornisce una visuale completa a 360 gradi da una singola posizione. Le immagini sono conformi alla proiezione equirettangolare (Plate Carrée), che contiene 360 gradi di visuale orizzontale (un avvolgimento completo) e 180 gradi di visuale verticale (da dritto in alto a dritto in basso). La panoramica a 360 gradi risultante definisce una proiezione su una sfera con l'immagine avvolta sulla superficie bidimensionale di quella sfera.

StreetViewPanorama fornisce un visualizzatore che esegue il rendering della panoramica come una sfera con una videocamera al centro. Puoi manipolare il StreetViewPanoramaCamera per controllare lo zoom e l'orientamento (inclinazione e direzione) della videocamera.

Inizia

Configura un progetto

Segui la guida introduttiva per configurare un progetto Maps SDK for Android.

Controlla la disponibilità della panoramica in Street View prima di aggiungerne una

La libreria client dell'SDK di 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.

La libreria di utilità di Maps SDK for Android è una libreria open source di classi utili per una serie di applicazioni. Nel repository GitHub è inclusa l' utilità per i metadati di Street View. Questa utilità verifica se una località è supportata da Street View. Puoi evitare errori quando aggiungi una panoramica in Street View a un'app per Android chiamando questa utilità per i metadati e aggiungendo una panoramica in Street View solo se la risposta è OK.

Utilizzare l'API

Segui le istruzioni riportate di seguito per aggiungere una panoramica di Street View a un fragment Android. Questo è il modo più semplice per aggiungere Street View alla tua applicazione. Poi, scopri di più su fragment, visualizzazioni e personalizzazione della panoramica.

Aggiungere una Panoramica in Street View

Segui i passaggi riportati di seguito per aggiungere una panoramica in Street View come questa:

Demo di panoramica in Street View

In breve:

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

Di seguito sono riportati maggiori dettagli su ogni passaggio.

Aggiungere un fragment

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

Ecco un esempio di fragment 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 di Street View

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

Kotlin

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

    private fun newView() {
        val sanFrancisco = LatLng(37.754130, -122.447129)
        val view = StreetViewPanoramaView(
            this,
            StreetViewPanoramaOptions().position(sanFrancisco)
        )
    }

    private fun setLocationOfThePanorama(streetViewPanorama: StreetViewPanorama) {
        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)

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

    private fun zoom(streetViewPanorama: StreetViewPanorama) {
        val zoomBy = 0.5f
        val camera = StreetViewPanoramaCamera.Builder()
            .zoom(streetViewPanorama.panoramaCamera.zoom + zoomBy)
            .tilt(streetViewPanorama.panoramaCamera.tilt)
            .bearing(streetViewPanorama.panoramaCamera.bearing)
            .build()
    }

    private fun pan(streetViewPanorama: StreetViewPanorama) {
        val panBy = 30f
        val camera = StreetViewPanoramaCamera.Builder()
            .zoom(streetViewPanorama.panoramaCamera.zoom)
            .tilt(streetViewPanorama.panoramaCamera.tilt)
            .bearing(streetViewPanorama.panoramaCamera.bearing - panBy)
            .build()
    }

    private fun tilt(streetViewPanorama: StreetViewPanorama) {
        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()
    }

    private fun animate(streetViewPanorama: StreetViewPanorama) {
        // 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)
    }
}

Java

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

    private void newView() {
        LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
        StreetViewPanoramaView view = new StreetViewPanoramaView(this,
            new StreetViewPanoramaOptions().position(sanFrancisco));
    }

    private void setLocationOfThePanorama(StreetViewPanorama streetViewPanorama) {
        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);

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

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

    private void pan(StreetViewPanorama streetViewPanorama) {
        float panBy = 30;
        StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
            .zoom(streetViewPanorama.getPanoramaCamera().zoom)
            .tilt(streetViewPanorama.getPanoramaCamera().tilt)
            .bearing(streetViewPanorama.getPanoramaCamera().bearing - panBy)
            .build();
    }

    private void tilt(StreetViewPanorama streetViewPanorama) {
        float tilt = streetViewPanorama.getPanoramaCamera().tilt + 30;
        tilt = (tilt > 90) ? 90 : tilt;

        StreetViewPanoramaCamera previous = streetViewPanorama.getPanoramaCamera();

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

    private void animate(StreetViewPanorama streetViewPanorama) {
        // 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);
    }
}

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

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)
}

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);
}

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

Poi, utilizza getStreetViewPanoramaAsync() per impostare il callback sul fragment.

Kotlin

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

Java

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

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

Kotlin

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

Java

@Override
public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) {
    LatLng sanFrancisco = new 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 della panoramica di Street View tramite XML. Tuttavia, puoi configurare la panoramica in modo programmatico passando un StreetViewPanoramaOptions oggetto contenente le opzioni specificate.

Kotlin

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

Java

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

Scopri di più su StreetViewPanoramaFragment

StreetViewPanoramaFragment è una sottoclasse della classe Fragment di Android e ti consente di inserire una Panoramica in Street View in un fragment Android. StreetViewPanoramaFragment oggetti fungono da container per la panoramica e forniscono l'accesso all'oggetto StreetViewPanorama.

StreetViewPanoramaView

StreetViewPanoramaView, una sottoclasse della classe View di Android, ti consente di inserire una Panoramica in Street View in una View di Android. Una View rappresenta una regione rettangolare dello schermo ed è un componente di base fondamentale per le app per Android e i widget. Analogamente a un StreetViewPanoramaFragment, il StreetViewPanoramaView funge da container per la panoramica, esponendo le funzionalità principali tramite l'oggetto StreetViewPanorama. Gli utenti di questa classe devono inoltrare tutti i metodi del ciclo di vita dell'attività, come onCreate(), onDestroy(), onResume() e onPause()) ai metodi corrispondenti nella classe StreetViewPanoramaView.

Personalizzare la funzionalità controllata dall'utente

Per impostazione predefinita, la seguente funzionalità è disponibile per l'utente quando visualizza la Panoramica in Street View: panning, zoom e spostamento alle panoramiche adiacenti. Puoi attivare e disattivare i gesti controllati dall'utente tramite i metodi di StreetViewPanorama. Le modifiche programmatiche sono comunque possibili quando il gesto è disattivato.

Impostare la posizione della panoramica

Per impostare la posizione della panoramica in Street View, chiama StreetViewPanorama.setPosition(), passando 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à una panoramica corrispondente. Un raggio di 0 significa che la panoramica deve essere collegata esattamente al LatLng specificato. Il raggio predefinito è di 50 metri. Se nell'area corrispondente è presente più di una panoramica, l'API restituirà la corrispondenza migliore.

Una sorgente è utile se vuoi limitare Street View alla ricerca di panoramiche solo all'aperto. Per impostazione predefinita, le panoramiche in Street View potrebbero trovarsi all'interno di luoghi come musei, edifici pubblici, bar e attività commerciali. Tieni presente che le panoramiche all'aperto potrebbero non esistere per la località specificata.

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)

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);

In alternativa, puoi impostare la posizione in base a un ID panoramica passando un panoId a StreetViewPanorama.setPosition().

Per recuperare l'ID panoramica delle panoramiche adiacenti, utilizza 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.

Kotlin

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

Java

StreetViewPanoramaLocation location = streetViewPanorama.getLocation();
if (location != null && location.links != null) {
    streetViewPanorama.setPosition(location.links[0].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 un fattore 2.

Lo snippet seguente utilizza StreetViewPanoramaCamera.Builder() per creare una nuova videocamera con l'inclinazione e la direzione della videocamera esistente, aumentando lo zoom del 50%.

Kotlin

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

Java

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

Impostare l'orientamento della videocamera (punto di vista)

Puoi determinare l'orientamento della videocamera di Street View impostando la direzione e l'inclinazione su StreetViewPanoramaCamera.

bearing
La direzione in cui è puntata la videocamera, specificata in gradi in senso orario rispetto al nord vero, attorno al locus della videocamera. Il nord vero è 0, l'est è 90, il sud è 180, l'ovest è 270.
tilt
L'inclinazione dell'asse Y verso l'alto o verso il basso. L'intervallo è compreso tra -90 e 90, con -90 che guarda dritto verso il basso, 0 centrato sull'orizzonte e 90 che guarda dritto verso l'alto. La varianza viene misurata dal pitch predefinito iniziale della videocamera, che è spesso (ma non sempre) orizzontale. Ad esempio, un'immagine scattata su una collina avrà probabilmente un pitch predefinito non orizzontale.

Lo snippet seguente utilizza StreetViewPanoramaCamera.Builder() per creare una nuova videocamera con lo zoom e l'inclinazione della videocamera esistente, modificando la direzione di 30 gradi a sinistra.

Kotlin

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

Java

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

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

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()

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();

Animare i movimenti della videocamera

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

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)

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);

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

Demo dell'animazione di una panoramica in Street View