Street View

Seleziona la piattaforma: Android iOS JavaScript

Google Street View fornisce viste panoramiche a 360 gradi da strade designate in tutta la sua 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 contesto significativo sulla destinazione o su qualsiasi luogo di loro interesse.

La copertura disponibile tramite l'API Android di Google Maps v2 è la stessa dell'app Google Maps sul tuo dispositivo Android. Per saperne di più su Street View e visualizzare le aree supportate su una mappa interattiva, visita la pagina Informazioni su Street View.

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

Esempi di codice

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

Esempi di Kotlin:

Esempi 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 panorami.

Ogni panoramica in Street View è un'immagine, o una serie di immagini, che fornisce una Visualizzazione a 360 gradi da un'unica posizione. Le immagini sono conformi alla proiezione equirettangolare (piastra quadrata), che contiene una visuale orizzontale a 360 gradi (una panoramica completa) e una visuale verticale a 180 gradi (dall'alto verso il basso). La panoramica a 360° risultante definisce una proiezione su una sfera con l'immagine posizionata sulla superficie bidimensionale di tale sfera.

StreetViewPanorama fornisce uno spettatore che esegue il rendering il panorama sotto forma di sfera con una fotocamera al centro. Puoi utilizzare il pulsante StreetViewPanoramaCamera per controllare lo zoom e l'orientamento (inclinazione e orientamento) della videocamera.

Inizia

Configura un progetto

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

Verifica la disponibilità di panoramiche in Street View prima di aggiungerne una

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

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

Utilizzare l'API

Per aggiungere una panoramica di Street View a un dispositivo Android, procedi nel seguente modo. . Questo è il modo più semplice per aggiungere Street View alla tua applicazione. Poi, scopri di più su frammenti, visualizzazioni e personalizzazione del panorama.

Aggiungere una panoramica di Street View

Per aggiungere un panorama di Street View come questo:

Demo panoramica in Street View

In sintesi:

  1. Aggiungi un oggetto Fragment all'Attività che gestirà la panoramica 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 per l'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 Fragment. 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 di Street View

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

Kotlin

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

Java

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

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 frammento richiamando FragmentManager.findFragmentById(), passando l'ID risorsa dell'elemento <fragment>. Tieni presente che l'ID risorsa R.id.streetviewpanorama viene aggiunto automaticamente al progetto Android quando viene compilato il file di layout.

Quindi, utilizza getStreetViewPanoramaAsync() per impostare il callback sul frammento.

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 metodo di callback onStreetViewPanoramaReady(StreetViewPanorama) per recuperare un'istanza non null 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 del panorama di Street View tramite XML. Tuttavia, puoi configurare il panorama in modo programmatico, passando Oggetto StreetViewPanoramaOptions 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 del Android Fragment e ti consente di inserire un panoramica in un frammento Android. Gli oggetti StreetViewPanoramaFragment fungono da contenuti per il panorama e forniscono l'accesso all'oggetto StreetViewPanorama.

StreetViewPanoramaView

StreetViewPanoramaView, una sottoclasse del modello View, ti consente di inserire un'immagine di Street View panoramica in un Android View. Un View rappresenta una regione rettangolare schermo ed è un componente di base fondamentale per i widget e le app Android. Proprio come un StreetViewPanoramaFragment, il StreetViewPanoramaView agisce un contenitore per la panoramica, che espone le funzionalità di base attraverso StreetViewPanorama oggetto. Gli utenti di questa classe devono inoltrare tutti i metodi di 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, l'utente ha a disposizione le seguenti funzionalità durante la visualizzazione Panoramica di Street View: panoramica, zoom e spostamento alle panoramiche adiacenti. Puoi attivare e disattivare i gesti controllati dall'utente tramite i metodi su StreetViewPanorama. Programmatici sono comunque possibili anche quando il gesto è disattivato.

Impostare la posizione del panorama

Per impostare la posizione della panoramica di Street View, chiama StreetViewPanorama.setPosition(), passando un LatLng. Puoi anche trasmettere 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 indica che il panorama deve essere collegato esattamente al LatLng specificato. Il raggio predefinito è di 50 metri. Se nell'area corrispondente è presente più di un panorama, l'API restituirà la migliore corrispondenza.

Un'origine è utile se vuoi limitare Street View a cercare solo panorami all'aperto. Per impostazione predefinita, i panorami di Street View possono trovarsi all'interno di luoghi come musei, edifici pubblici, bar e attività commerciali. Tieni presente che le panoramiche di esterni potrebbero non esistere per la posizione 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 all'ID di una panoramica trasmettendo un Da panoId a StreetViewPanorama.setPosition().

Per recuperare l'ID delle panoramiche adiacenti, utilizza innanzitutto getLocation() per recuperare un StreetViewPanoramaLocation. Questo oggetto contiene l'ID del panorama corrente e un array di oggetti StreetViewPanoramaLink, ciascuno dei quali contiene l'ID di un panorama collegato a quello 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 Impostando lo zoom su 1,0, l'immagine verrà ingrandita. di un fattore 2.

Il seguente snippet utilizza StreetViewPanoramaCamera.Builder() per creare una nuova videocamera con l'inclinazione e l'azimut della videocamera esistente, aumentando al contempo 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 fotocamera (punto di vista)

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

bearing
La direzione in cui è rivolta la fotocamera, specificata in gradi in senso orario dal vero nord, intorno al locus 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 va da -90 a 0 e 90, con -90 con lo sguardo rivolto verso il basso, con 0 centrato sull'orizzonte e con 90 in linea con l'orizzonte 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'inclinazione predefinita non orizzontale.

Il seguente snippet utilizza StreetViewPanoramaCamera.Builder() per creare un nuova videocamera con lo zoom e l'inclinazione di quella esistente, mentre modifichi orientamento di 30 gradi verso 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 che segue inclina la fotocamera 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 fotocamera

Per animare i movimenti della fotocamera, chiama StreetViewPanorama.animateTo(). L'animazione esegue l'interpolazione tra gli attributi della fotocamera attuali e quelli della nuova fotocamera. 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 di cui sopra ogni 2000 millisecondi, utilizzando Handler.postDelayed():

Demo dell&#39;animazione panoramica in Street View