Street View

Plattform auswählen: Android iOS JavaScript

Google Street View verwendet Aufnahmen von ausgesuchten Straßen und Gegenden weltweit und stellt so 360°-Panoramen zur Verfügung.

In diesem Video erfahren Sie, wie Sie den Street View-Dienst nutzen können, um Ihren Nutzern ein wirklichkeitsgetreues Bild einer Adresse auf der Karte zu bieten und ihnen aussagekräftige Kontextinformationen zu ihrem Ziel oder zu dem Ort ihres Interesses zu liefern.

Die über die Google Maps Android API Version 2 verfügbare Abdeckung ist dieselbe wie die der Google Maps App auf Ihrem Android-Gerät. Weitere Informationen zu Street View und den unterstützten Gebieten finden Sie unter Was ist Street View?.

Die Klasse StreetViewPanorama modelliert das Street View-Panorama in Ihrer Anwendung. Innerhalb Ihrer UI wird ein Panorama durch ein StreetViewPanoramaFragment- oder StreetViewPanoramaView-Objekt dargestellt.

Codebeispiele

Beispiele für die Verwendung von Street View finden Sie im ApiDemos-Repository auf GitHub.

Java-Beispiele:

Kotlin-Beispiele:

Street View im Maps SDK for Android – Übersicht

Das Maps SDK for Android bietet einen Street View-Dienst zum Abrufen und Bearbeiten der Bilder an, die in Google Street View verwendet werden. Bilder werden als Panoramen zurückgegeben.

Jedes Street View-Panorama besteht aus einem oder mehreren Bildern, die eine 360-Grad-Ansicht eines einzelnen Orts bilden. Die Bilder entsprechen der Equirektangularprojektion (Plate Carrée), die eine 360-Grad-Horizontalsicht (eine volle Drehung) und eine 180-Grad-Vertikalsicht (von ganz oben bis ganz unten) bietet. Das sich ergebende 360-Grad-Panorama definiert eine Projektion auf einer Kugel, wobei das Bild auf die zweidimensionale Oberfläche dieser Kugel gelegt ist.

StreetViewPanorama ergibt ein Anzeigeprogramm, mit dem das Panorama als Kugel mit einer Kamera in ihrem Mittelpunkt gerendert wird. Sie können StreetViewPanoramaCamera bearbeiten, um den Zoom und die Ausrichtung (Neigung und Peilung) der Kamera zu steuern.

Erste Schritte

Richten Sie ein Maps SDK for Android-Projekt ein. Fügen Sie anschließend ein Street View-Panorama hinzu, wie nachfolgend beschrieben.

Die Clientbibliothek von Google Play Services SDK enthält einige Street View-Beispiele, die Sie importieren und als Grundlage für Ihre Entwicklung verwenden können. Richtlinien zum Importieren von Beispielen finden Sie in der Einführung.

API verwenden

Folgen Sie der nachstehenden Anleitung, um ein Android-Fragment durch ein Street View-Panorama zu ergänzen. Das ist die einfachste Möglichkeit, um Street View zu Ihrer Anwendung hinzuzufügen. Lesen Sie anschließend mehr über Fragmente, Ansichten und die Anpassung des Panoramas.

Street View-Panorama hinzufügen

Gehen Sie wie unten beschrieben vor, um ein Street View-Panorama wie dieses hinzuzufügen:

Demo zu Street View-Panorama

Zusammenfassung:

  1. Fügen Sie dem Activity-Objekt ein Fragment-Objekt hinzu, mit dem das Street View-Panorama verarbeitet wird. Das geht am einfachsten, indem Sie der Layoutdatei für Activity ein <fragment>-Element hinzufügen.
  2. Implementieren Sie die Schnittstelle OnStreetViewPanoramaReadyCallback und verwenden Sie die Callback-Methode onStreetViewPanoramaReady(StreetViewPanorama), um einen Handle für das Objekt StreetViewPanorama zu erhalten.
  3. Rufen Sie getStreetViewPanoramaAsync() für das Fragment auf, um den Callback zu registrieren.

Nachfolgend erhalten Sie ausführlichere Informationen zu den einzelnen Schritten.

Fragment hinzufügen

Fügen Sie der Layoutdatei der Aktivität ein <fragment>-Element hinzu, um ein Fragment-Objekt zu definieren. Legen Sie in diesem Element das Attribut class auf com.google.android.gms.maps.StreetViewPanoramaFragment (oder SupportStreetViewPanoramaFragment) fest.

Hier sehen Sie ein Beispiel eines Fragments in einer Layoutdatei:

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

Street View-Code hinzufügen

Wenn Sie mit dem Street View-Panorama in der App arbeiten möchten, müssen Sie die Schnittstelle OnStreetViewPanoramaReadyCallback implementieren und eine Instanz des Callbacks in einem StreetViewPanoramaFragment- oder StreetViewPanoramaView-Objekt festlegen. In dieser Anleitung wird ein StreetViewPanoramaFragment verwendet, weil das die gängigste Methode ist, um einer App Street View hinzuzufügen. Im ersten Schritt wird die Callback-Schnittstelle implementiert:

Java


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

      

Kotlin


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

      

Legen Sie in der onCreate()-Methode von Activity die Layoutdatei als Inhaltsansicht fest. Wenn die Layoutdatei beispielsweise den Namen main.xml hat, verwenden Sie diesen Code:

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

      

Erstellen Sie einen Handle zum Fragment, indem Sie FragmentManager.findFragmentById() aufrufen und die Ressourcen-ID des <fragment>-Elements übergeben. Die Ressourcen-ID R.id.streetviewpanorama wird dem Android-Projekt automatisch hinzugefügt, wenn Sie die Layoutdatei erstellen.

Verwenden Sie dann getStreetViewPanoramaAsync(), um den Callback für das Fragment festzulegen.

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)

      

Verwenden Sie die Callback-Methode onStreetViewPanoramaReady(StreetViewPanorama), um eine Nicht-NULL-Instanz von StreetViewPanorama abzurufen, die sofort verwendet werden kann.

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

      

Weitere Informationen zum Konfigurieren des Anfangszustands

Im Gegensatz zu einer Karte kann der Anfangszustand des Street View-Panoramas nicht über XML konfiguriert werden. Sie können das Panorama jedoch programmatisch konfigurieren, indem Sie ein StreetViewPanoramaOptions-Objekt übergeben, das die von Ihnen angegebenen Optionen enthält.

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

      

Weitere Informationen zu „StreetViewPanoramaFragment“

StreetViewPanoramaFragment ist eine Unterklasse der Android Fragment-Klasse und ermöglicht das Festlegen eines Street View-Panoramas in einem Android-Fragment. StreetViewPanoramaFragment-Objekte dienen als Container für das Panorama und bieten Zugriff auf das StreetViewPanorama-Objekt.

StreetViewPanoramaView

Mit StreetViewPanoramaView, einer Unterklasse der Android-View-Klasse, können Sie ein Street View-Panorama in einer Android-View platzieren. Ein View-Element repräsentiert einen rechteckigen Bereich des Bildschirms und ist ein Grundbaustein für Android-Apps und ‑Widgets. Ähnlich wie StreetViewPanoramaFragment fungiert StreetViewPanoramaView als Container für das Panorama und stellt dabei Kernfunktionen über das Objekt StreetViewPanorama bereit. Nutzer dieser Klasse müssen alle Methoden des Aktivitätslebenszyklus, z. B. onCreate(), onDestroy(), onResume() und onPause()), an die entsprechenden Methoden in der StreetViewPanoramaView-Klasse weiterleiten.

Benutzerdefinierte Funktionen anpassen

Standardmäßig stehen dem Nutzer folgende Funktionen bei der Anzeige von Street View-Panoramen zur Verfügung: Schwenken, Zoomen und Wechseln zu benachbarten Panoramen. Sie können benutzergesteuerte Gesten mithilfe von Methoden in StreetViewPanorama aktivieren und deaktivieren. Programmgesteuerte Änderungen sind auch nach dem Deaktivieren der Geste weiterhin möglich.

Standort des Panoramas festlegen

Um den Standort des Street View-Panoramas festzulegen, rufen Sie StreetViewPanorama.setPosition() auf und übergeben einen LatLng. Sie können auch radius und source als optionale Parameter übergeben.

Ein Radius ist hilfreich, wenn Sie den Bereich vergrößern oder verkleinern möchten, in dem Street View nach einem passenden Panorama sucht. Ein Radius von 0 bedeutet, dass das Panorama mit dem angegebenen LatLng verknüpft werden muss. Der Standardradius beträgt 50 Meter. Wenn sich im übereinstimmenden Bereich mehrere Panoramen befinden, gibt die API die beste Übereinstimmung zurück.

Eine Quelle ist nützlich, wenn Sie Street View nur auf Außenaufnahmen beschränken möchten. Standardmäßig können Street View-Panoramen beispielsweise in Museen, öffentlichen Gebäuden, Cafés oder Unternehmen aufgenommen werden. Es kann vorkommen, dass für den angegebenen Ort keine Außenansichten vorhanden sind.

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)

      

Alternativ können Sie den Standort anhand einer Panorama-ID festlegen. Dazu übergeben Sie eine panoId an StreetViewPanorama.setPosition().

Wenn Sie die Panorama-ID für benachbarte Panoramabilder abrufen möchten, rufen Sie zuerst mit getLocation() einen StreetViewPanoramaLocation ab. Dieses Objekt enthält die ID des aktuellen Panoramas und ein Array mit StreetViewPanoramaLink-Objekten, von denen jedes die ID eines Panoramas enthält, das mit dem aktuellen Panorama verbunden ist.

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

      

Heran- und herauszoomen

Sie können die Zoomstufe programmatisch ändern, indem Sie StreetViewPanoramaCamera.zoom festlegen. Durch Festlegen des Zooms auf 1,0 wird das Bild um den Faktor 2 vergrößert.

Im nachfolgenden Snippet wird StreetViewPanoramaCamera.Builder() verwendet, um eine neue Kamera mit derselben Neigung und Peilung wie die vorhandene Kamera und einem um 50 % erhöhten Zoom zu erstellen.

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

      

Kameraausrichtung (POV) festlegen

Sie können die Ausrichtung der Street View-Kamera bestimmen, indem Sie die Peilung und Neigung für StreetViewPanoramaCamera festlegen.

bearing
Die Richtung, in die die Kamera zeigt, angegeben in Grad im Uhrzeigersinn vom geografischen Norden um den geometrischen Kameraort. Der geografische Norden ist 0, Osten 90, Süden 180 und Westen 270.
tilt
Die Neigung der y-Achse nach oben oder unten. Der Bereich reicht von -90 über 0 bis 90, wobei -90 senkrecht nach unten, 0 zentriert am Horizont und 90 senkrecht nach oben bedeutet. Die Abweichung wird vom Standardneigungswinkel der Kamera aus gemessen, der häufig (aber nicht immer) flach horizontal ist. Ein Bild, das auf einem Berg aufgenommen wurde, wird vermutlich einen Standardneigungswinkel haben, der nicht horizontal ist.

Im folgenden Snippet wird StreetViewPanoramaCamera.Builder() verwendet, um eine neue Kamera mit dem Zoom und der Neigung der vorhandenen Kamera zu erstellen und dabei die Peilung um 30 Grad nach links zu ändern.

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

      

Mit dem folgenden Snippet wird die Kamera um 30 Grad nach oben geneigt.

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

      

Kamerabewegungen animieren

Rufen Sie zur Animation der Kamerabewegungen StreetViewPanorama.animateTo() auf. Die Animation wird zwischen den aktuellen und den neuen Kameraattributen interpoliert. Um direkt und ohne Animation zur Kamera zu springen, können Sie die Dauer mit 0 festlegen.

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)

      

Die folgende Abbildung zeigt das Ergebnis, wenn Sie die Animation oben mit Handler.postDelayed() für alle 2.000 Millisekunden planen:

Demo für Street View-Panoramaanimation