Street View

Seleziona la piattaforma: Android iOS JavaScript

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

La copertura disponibile tramite l'API Android v2 di Google Maps è 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, consulta Informazioni su Street View.

La classe StreetViewPanorama modella la panoramica in Street View nella tua applicazione. Nella UI, una panoramica è rappresentata da un oggetto StreetViewPanoramaFragment o StreetViewPanoramaView.

Esempi di codice

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

Campioni di Kotlin:

Esempi Java:

Panoramica di Street View in Maps SDK for Android

Maps SDK for Android offre 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 offre una visione completa a 360° da un'unica posizione. Le immagini si adattano alla proiezione equirettangolare (Plate Carrée), che contiene 360 gradi di vista orizzontale (tutto attorno) e 180 gradi di vista verticale (dall'alto verso il basso). La panoramica a 360° risultante definisce una proiezione su una sfera con l'immagine a capo sulla superficie bidimensionale di quella sfera.

StreetViewPanorama consente di visualizzare il panorama come una sfera con una fotocamera al centro. Puoi modificare la StreetViewPanoramaCamera per controllare lo zoom e l'orientamento (inclinazione e orientamento) della fotocamera.

Inizia

Configura un progetto

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

Controlla la disponibilità delle panoramiche in Street View prima di aggiungere una panoramica

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 dei campioni.

La libreria di utilità di Maps SDK for Android è una libreria open source di classi utili per una vasta gamma di applicazioni. Nel repository GitHub è inclusa l'utilità per i metadati di Street View. Questa utilità verifica se una località è supportata da Street View. Per evitare errori durante l'aggiunta di una panoramica di Street View a un'app per Android, richiama questa utilità di metadati e aggiungi un panorama di Street View solo se la risposta è OK.

Utilizzare l'API

Segui le istruzioni riportate di seguito per aggiungere una panoramica Street View a un frammento Android. Si tratta del modo più semplice per aggiungere Street View alla tua applicazione. Poi, scopri di più su frammenti, visualizzazioni e personalizzazione del panorama.

Aggiungi una panoramica in Street View

Per aggiungere una panoramica in Street View come questa:

Demo panoramica in Street View

In sintesi:

  1. Aggiungi un oggetto Fragment all'elemento Activity che gestirà la panoramica in 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 ciascun 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"/>

Aggiungi codice Street View

Per lavorare con la panoramica di Street View all'interno dell'app, devi implementare l'interfaccia OnStreetViewPanoramaReadyCallback 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 {
    // ...
}

      

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

      

Per ottenere un handle per il frammento, chiama 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.

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 della panoramica di Street View tramite XML. Tuttavia, puoi configurare il panorama in modo programmatico passando un 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));

      

Altro su StreetViewPanoramaFragment

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

StreetViewPanoramaView

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

Personalizza la funzionalità controllata dall'utente

Per impostazione predefinita, l'utente ha a disposizione la seguente funzionalità quando visualizza la panoramica in Street View: panoramica, zoom e viaggio verso panoramiche adiacenti. Puoi attivare e disattivare i gesti controllati dall'utente tramite i metodi su StreetViewPanorama. Le modifiche programmatiche sono comunque possibili anche quando il gesto è disabilitato.

Imposta 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.

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

La sorgente è utile se vuoi limitare Street View alla ricerca solo per le panoramiche all'aperto. Per impostazione predefinita, i panorami di Street View potrebbero trovarsi all'interno di luoghi come musei, edifici pubblici, bar e attività. 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 località in base all'ID panorama passando un panoId a StreetViewPanorama.setPosition().

Per recuperare l'ID panorama per le 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);
}

      

Aumentare e diminuire lo zoom

Puoi cambiare 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.

Il seguente snippet usa StreetViewPanoramaCamera.Builder() per costruire una nuova videocamera con l'inclinazione e l'orientamento 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();

      

Imposta l'orientamento della fotocamera (punto di vista)

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

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

Il seguente snippet utilizza StreetViewPanoramaCamera.Builder() per costruire una nuova videocamera con lo zoom e l'inclinazione della videocamera esistente, modificando il cuscinetto 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 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();

      

Animazione dei movimenti della videocamera

Per animare i movimenti della videocamera, chiama StreetViewPanorama.animateTo(). L'animazione si interpola tra gli attributi della videocamera correnti 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);

      

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

Demo dell&#39;animazione della panoramica in Street View