Street View

Plattform auswählen: Android iOS JavaScript

Auf Google Street View können Nutzer 360°-Aufnahmen bestimmter Straßen ansehen, die bisher über den Dienst weltweit erfasst wurden.

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 zeigen. Sie können ihnen so auch weitere wichtige Informationen zu ihrem Ziel oder gesuchten Ort zur Verfügung zu stellen.

Die Aufnahmen, die über die Google Maps Android API Version 2 verfügbar sind, entsprechen denen der Google Maps App auf Ihrem Android-Gerät. Weitere Informationen zu Street View und den unterstützten Gebieten

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

Kotlin

Street View im Maps SDK for Android – Übersicht

Das Maps SDK for Android enthält einen Dienst über den Google Street View-Bilder abgerufen und bearbeitet werden können. Bilder werden als Panoramen zurückgegeben.

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

StreetViewPanorama stellt einen Viewer bereit, mit dem das Panorama als Kugel mit einer Kamera im Mittelpunkt gerendert wird. Sie können StreetViewPanoramaCamera bearbeiten, um den Zoom und die Ausrichtung (Neigung und Lage) 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 des Google Play Services SDK enthält einige Street View-Beispiele, die Sie in Ihr Projekt importieren und als Grundlage verwenden können. Richtlinien zum Importieren von Beispielen finden Sie in der Einführung.

API verwenden

Folgen Sie der nachstehenden Anleitung, um ein Street View-Panorama zu einem Android-Fragment hinzuzufügen. 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. Dazu können Sie der Layoutdatei für die Activity einfach ein <fragment>-Element hinzufügen.
  2. Implementieren Sie die OnStreetViewPanoramaReadyCallback-Oberfläche und verwenden Sie die Callback-Methode onStreetViewPanoramaReady(StreetViewPanorama), um einen Handle für das StreetViewPanorama-Objekt 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 OnStreetViewPanoramaReadyCallback-Oberfläche implementieren und eine Instanz des Callbacks in einem StreetViewPanoramaFragment- oder StreetViewPanoramaView-Objekt festlegen. In dieser Anleitung wird ein StreetViewPanoramaFragment verwendet, weil das die einfachste Methode ist, einer App Street View hinzuzufügen. Im ersten Schritt wird die Callback-Oberfläche implementiert:

Java


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

Kotlin


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

Legen Sie in der onCreate()-Methode der 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 abgeleitete Klasse 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 abgeleiteten Klasse 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 Hauptfunktionen ü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.

Benutzergesteuerte Funktionen anpassen

Standardmäßig stehen dem Nutzer folgende Funktionen bei der Ansicht von Street View-Panoramen zur Verfügung: Schwenken, Zoomen und Wechseln zu benachbarten Panoramen. Sie können benutzergesteuerte Touch-Gesten mithilfe von Methoden in StreetViewPanorama aktivieren und deaktivieren. Programmatische Ä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-Wert. 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 für den entsprechenden Bereich mehrere Panoramen verfügbar sind, 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 innerhalb von Gebäuden, also 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() ein StreetViewPanoramaLocation-Objekt ab. Es enthält die ID des aktuellen Panoramas und ein Array mit StreetViewPanoramaLink-Objekten, die wiederum jeweils die ID eines Panoramas enthalten, 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 konfigurieren. Wenn Sie den Zoom auf „1.0“ festlegen, wird das Bild um den Faktor 2 vergrößert.

Im nachfolgenden Snippet wird StreetViewPanoramaCamera.Builder() verwendet, um eine neue Kamera mit derselben Neigung und Lage 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 angeben, indem Sie Lage 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 Lage um 30° 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° 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() so planen, dass sie alle 2.000 Millisekunden ausgeführt wird:

Demo für Street View-Panoramaanimation