Street View

Wybierz platformę: Android iOS JavaScript

Google Street View udostępnia panoramiczne widoki 360 stopni z wyznaczonych dróg w obsługiwanym obszarze.

Z tego filmu dowiesz się, jak za pomocą usługi Street View możesz zapewnić użytkownikom realistyczny widok adresu na mapie, dostarczając im przydatnych informacji o miejscu docelowym lub dowolnym innym miejscu, które ich interesuje.

Zasięg dostępny w interfejsie Google Maps Android API w wersji 2 jest taki sam jak w aplikacji Mapy Google na urządzeniu z Androidem. Więcej informacji o Street View i obsługiwanych obszarach znajdziesz na interaktywnej mapie w artykule Informacje o Street View.

Klasa StreetViewPanorama modeluje panoramę Street View w Twojej aplikacji. W interfejsie użytkownika panorama jest reprezentowana przez obiekt StreetViewPanoramaFragment lub StreetViewPanoramaView.

Przykładowe fragmenty kodu

Repozytorium ApiDemos w GitHubie zawiera przykłady pokazujące, jak korzystać ze Street View.

Przykłady w Kotlinie:

Przykłady w Javie:

Omówienie Street View w Maps SDK na Androida

Maps SDK na Androida udostępnia usługę Street View, która umożliwia uzyskiwanie i modyfikowanie zdjęć używanych w Google Street View. Obrazy są zwracane jako panoramy.

Każda panorama Street View to obraz lub zestaw obrazów, który zapewnia pełny widok 360 stopni z jednej lokalizacji. Obrazy są zgodne z projekcją równoprostokątną (Plate Carrée), która obejmuje 360 stopni widoku poziomego (pełny obrót) i 180 stopni widoku pionowego (od góry do dołu). Wynikowa panorama 360 stopni definiuje projekcję na sferze, w której obraz jest owinięty wokół dwuwymiarowej powierzchni tej sfery.

StreetViewPanorama udostępnia przeglądarkę, która renderuje panoramę jako sferę z kamerą w jej środku. Możesz manipulować obiektem StreetViewPanoramaCamera, aby kontrolować powiększenie i orientację (pochylenie i kierunek) kamery.

Rozpocznij

Konfigurowanie projektu

Aby skonfigurować projekt aplikacji na Androida Maps SDK na Androida, postępuj zgodnie z przewodnikiem dla początkujących.

Sprawdzanie dostępności panoramy Street View przed dodaniem panoramy

Biblioteka klienta pakietu usług Google Play SDK zawiera kilka przykładów Street View, które możesz zaimportować do swojego projektu i wykorzystać jako podstawę do programowania. Więcej informacji o importowaniu przykładów znajdziesz we wstępie.

Maps SDK dla biblioteki narzędzi Androida to biblioteka open source zawierająca klasy przydatne w różnych aplikacjach. Repozytorium GitHub zawiera narzędzie do metadanych Street View. To narzędzie sprawdza, czy lokalizacja jest obsługiwana przez Street View. Aby uniknąć błędów podczas dodawania panoramy Street View do aplikacji na Androida, wywołaj to narzędzie do metadanych i dodaj panoramę Street View tylko wtedy, gdy odpowiedź to OK.

Korzystanie z interfejsu API

Aby dodać panoramę Street View do fragmentu Androida, postępuj zgodnie z instrukcjami poniżej. Jest to najprostszy sposób na dodanie Street View do aplikacji. Następnie przeczytaj więcej o fragmentach, widokach i dostosowywaniu panoramy.

Dodawanie panoramy Street View

Aby dodać panoramę Street View, taką jak ta:

Wersja demonstracyjna panoramy Street View

Podsumowanie:

  1. Dodaj obiekt Fragment do aktywności, która będzie obsługiwać panoramę Street View. Najprostszym sposobem jest dodanie elementu <fragment> do pliku układu Activity.
  2. Zaimplementuj interfejs OnStreetViewPanoramaReadyCallback i użyj metody wywołania zwrotnego onStreetViewPanoramaReady(StreetViewPanorama) , aby uzyskać uchwyt do obiektu StreetViewPanorama.
  3. Aby zarejestrować wywołanie zwrotne, wywołaj metodę getStreetViewPanoramaAsync() w fragmencie.

Poniżej znajdziesz więcej informacji o poszczególnych czynnościach.

Dodawanie fragmentu

Aby zdefiniować obiekt Fragment, dodaj element <fragment> do pliku układu aktywności. W tym elemencie ustaw atrybut class na com.google.android.gms.maps.StreetViewPanoramaFragment (lub SupportStreetViewPanoramaFragment).

Oto przykład fragmentu w pliku układu:

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

Dodawanie kodu Street View

Aby pracować z panoramą Street View w aplikacji, musisz zaimplementować OnStreetViewPanoramaReadyCallback interfejs i ustawić instancję wywołania zwrotnego w obiekcie StreetViewPanoramaFragment lub StreetViewPanoramaView. W tym samouczku używamy StreetViewPanoramaFragment, ponieważ jest to najprostszy sposób na dodanie Street View do aplikacji. Pierwszym krokiem jest zaimplementowanie interfejsu wywołania zwrotnego:

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

W metodzie onCreate() aktywności Activityustaw plik układu jako widok treści. Jeśli na przykład plik układu ma nazwę main.xml, użyj tego kodu:

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

Aby uzyskać uchwyt do fragmentu, wywołaj metodę FragmentManager.findFragmentById(), przekazując jej identyfikator zasobu elementu <fragment>. Pamiętaj, że identyfikator zasobu R.id.streetviewpanorama jest automatycznie dodawany do projektu aplikacji na Androida podczas tworzenia pliku układu.

Następnie użyj getStreetViewPanoramaAsync() , aby ustawić wywołanie zwrotne w fragmencie.

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

Użyj metody wywołania zwrotnego onStreetViewPanoramaReady(StreetViewPanorama) , aby pobrać instancję StreetViewPanoramao wartości innej niż null, która jest gotowa do użycia.

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

Więcej informacji o konfigurowaniu stanu początkowego

W przeciwieństwie do mapy nie można skonfigurować stanu początkowego panoramy Street View za pomocą kodu XML. Możesz jednak skonfigurować panoramę programowo, przekazując obiekt StreetViewPanoramaOptions zawierający określone opcje.

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

Więcej informacji o StreetViewPanoramaFragment

StreetViewPanoramaFragment to podklasa klasy Fragment na Androida, która umożliwia umieszczenie panoramy Street View we fragmencie Androida. StreetViewPanoramaFragment obiekty działają jako kontenery panoramy i zapewniają dostęp do obiektu StreetViewPanorama.

StreetViewPanoramaView

StreetViewPanoramaView, podklasa klasy View na Androida, umożliwia umieszczenie panoramy Street View w View na Androida. View reprezentuje prostokątny obszar ekranu i jest podstawowym elementem aplikacji na Androida i widżetów. Podobnie jak a StreetViewPanoramaFragment, StreetViewPanoramaView działa jako kontener panoramy, udostępniając główne funkcje za pomocą obiektu StreetViewPanorama. Użytkownicy tej klasy muszą przekazywać wszystkie metody cyklu życia działania, takie jak onCreate(), onDestroy(), onResume() i onPause()), do odpowiednich metod w klasie StreetViewPanoramaView.

Dostosowywanie funkcji sterowanych przez użytkownika

Domyślnie podczas wyświetlania panoramy Street View użytkownik może korzystać z tych funkcji: przesuwanie, powiększanie i przechodzenie do sąsiednich panoram. Gesty sterowane przez użytkownika możesz włączać i wyłączać za pomocą metod w StreetViewPanorama. Gdy gest jest wyłączony, nadal można wprowadzać zmiany programowo.

Ustawianie lokalizacji panoramy

Aby ustawić lokalizację panoramy Street View, wywołaj StreetViewPanorama.setPosition(), przekazując LatLng. Możesz też przekazać opcjonalne parametry radius i source.

Promień jest przydatny, jeśli chcesz rozszerzyć lub zawęzić obszar, w którym Street View będzie szukać pasującej panoramy. Promień 0 oznacza, że panorama musi być połączona dokładnie z określonym LatLng. Domyślny promień to 50 metrów. Jeśli w pasującym obszarze znajduje się więcej niż 1 panorama, interfejs API zwróci najlepsze dopasowanie.

Źródło jest przydatne, jeśli chcesz ograniczyć Street View do wyszukiwania tylko panoram, które znajdują się na zewnątrz. Domyślnie panoramy Street View mogą znajdować się w miejscach takich jak muzea, budynki publiczne, kawiarnie i firmy. Pamiętaj, że w określonej lokalizacji mogą nie istnieć panoramy zewnętrzne.

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

Możesz też ustawić lokalizację na podstawie identyfikatora panoramy, przekazując panoId do StreetViewPanorama.setPosition().

Aby pobrać identyfikator panoramy dla sąsiednich panoram, najpierw użyj getLocation() do pobrania StreetViewPanoramaLocation. Ten obiekt zawiera identyfikator bieżącej panoramy i tablicę obiektów StreetViewPanoramaLink, z których każdy zawiera identyfikator panoramy połączonej z bieżącą.

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

Powiększanie i pomniejszanie

Poziom powiększenia możesz zmienić programowo, ustawiając StreetViewPanoramaCamera.zoom. Ustawienie powiększenia na 1,0 spowoduje powiększenie obrazu 2-krotnie.

Poniższy fragment kodu używa StreetViewPanoramaCamera.Builder(), aby utworzyć nową kamerę z pochyleniem i kierunkiem istniejącej kamery, zwiększając jednocześnie powiększenie o 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();

Ustawianie orientacji kamery (punktu widzenia)

Orientację kamery Street View możesz określić ustawiając kierunek i pochylenie w StreetViewPanoramaCamera.

bearing
Kierunek, w którym jest skierowana kamera, określony w stopniach zgodnie z ruchem wskazówek zegara od północy geograficznej wokół środka kamery. Północ geograficzna to 0, wschód to 90, południe to 180, a zachód to 270.
tilt
Pochylenie w górę lub w dół osi Y. Zakres wynosi od -90 do 90, przy czym -90 oznacza widok prosto w dół, 0 – widok na horyzont, a 90 – widok prosto w górę. Odchylenie jest mierzone od początkowego domyślnego pochylenia kamery, które jest często (ale nie zawsze) poziome. Na przykład obraz zrobiony na wzgórzu prawdopodobnie będzie miał domyślne pochylenie, które nie jest poziome.

Poniższy fragment kodu używa StreetViewPanoramaCamera.Builder(), aby utworzyć nową kamerę z powiększeniem i pochyleniem istniejącej kamery, zmieniając jednocześnie kierunek o 30 stopni w lewo.

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

Poniższy fragment kodu pochyla kamerę o 30 stopni w górę.

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

Animowanie ruchów kamery

Aby animować ruchy kamery, wywołaj metodę StreetViewPanorama.animateTo(). Animacja interpoluje między bieżącymi atrybutami kamery a nowymi atrybutami kamery. Jeśli chcesz przejść bezpośrednio do kamery bez animacji, możesz ustawić czas trwania na 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);

Ten obraz pokazuje wynik, gdy zaplanujesz uruchamianie powyższej animacji co 2000 milisekund za pomocą Handler.postDelayed():

Animacja demonstracyjna panoramy Street View