Street View

Wybierz platformę: Android iOS JavaScript

Google Street View oferuje panoramiczne widoki 360° z wyznaczonych dróg na całym obszarze, na którym się znajdujesz.

W tym filmie pokazujemy, jak za pomocą usługi Street View pokazać użytkownikom miejsce na mapie w prawdziwym świecie i zapewnić im znaczący kontekst dotyczący miejsca docelowego lub miejsca, które ich interesują.

Zasięg interfejsu API Map Google na Androida w wersji 2 jest taki sam jak w przypadku aplikacji Mapy Google na urządzeniu z Androidem. Więcej informacji o Street View i obsługiwanych obszarach na interaktywnej mapie znajdziesz w artykule Street View – informacje.

Klasa StreetViewPanorama modeluje panoramę Street View w Twojej aplikacji. Panorama w interfejsie jest reprezentowana przez obiekt StreetViewPanoramaFragment lub StreetViewPanoramaView.

Przykładowe fragmenty kodu

Repozytorium API Demos na GitHubie zawiera przykłady przedstawiające korzystanie ze Street View.

Próbki Kotlin:

Przykłady w języku Java:

Omówienie funkcji Street View w pakiecie SDK Map Google na Androida

Pakiet Maps SDK na Androida obejmuje usługę Street View służącą do pozyskiwania zdjęć używanych w Google Street View i manipulowania nimi. Obrazy są zwracane jako Panoramy.

Każda panorama Street View to zdjęcie, czyli zbiór zdjęć, które dają pełny widok 360 stopni z jednego miejsca. Obrazy są przystosowane do odwzorowania walcowego równoodległościowego (Plate Carrée), które obejmuje widok w poziomie o zakresie 360 stopni (pełny obraz) oraz 180 stopni w pionie (z pionu i w dół). Powstała 360-stopniowa panorama to odwzorowanie kuli z obrazem nałożonym na dwuwymiarową powierzchnię kuli.

StreetViewPanorama to przeglądarka, która renderuje panoramę jako sferę, a na środku znajduje się aparat. Za pomocą przycisku StreetViewPanoramaCamera możesz sterować powiększeniem oraz orientacją (przechylenie i odchyleniem) kamery.

Rozpocznij

Konfigurowanie projektu

Wykonaj przewodnik dla początkujących, aby skonfigurować projekt pakietu SDK Map Google na Androida.

Zanim dodasz panoramę, sprawdź dostępność panoramy Street View

Biblioteka klienta pakietu SDK Usług Google Play zawiera kilka przykładów Street View, które możesz zaimportować do projektu i wykorzystać jako podstawę do tworzenia kolejnych wersji. Wskazówki dotyczące importowania przykładów znajdziesz we wprowadzeniu.

Biblioteka narzędziowa pakietu Maps SDK na Androida to biblioteka klas open source, która jest przydatna w różnych aplikacjach. W repozytorium GitHub znajduje się narzędzie do metadanych Street View. To narzędzie sprawdza, czy dana 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 edytowania metadanych i dodaj panoramę Street View tylko wtedy, gdy odpowiedź to OK.

Korzystanie z interfejsu API

Wykonaj poniższe instrukcje, aby dodać panoramę Street View do fragmentu Androida. To najprostszy sposób dodania Street View do aplikacji. Następnie poczytaj więcej o fragmentach, widokach i dostosowywaniu panoramy.

Dodawanie panoramy Street View

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

Prezentacja panoramy Street View

W skrócie:

  1. Dodaj obiekt Fragment do działania którego będzie obsługiwać panorama Street View. Najłatwiejszym sposobem jest dodanie elementu <fragment> do pliku układu interfejsu Activity.
  2. Zaimplementuj interfejs OnStreetViewPanoramaReadyCallback i użyj metody wywołania zwrotnego onStreetViewPanoramaReady(StreetViewPanorama), aby uzyskać uchwyt do obiektu StreetViewPanorama.
  3. Wywołaj getStreetViewPanoramaAsync() we fragmencie, aby zarejestrować wywołanie zwrotne.

Poniżej znajdziesz więcej informacji o poszczególnych krokach.

Dodaj fragment

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"/>

Dodaj kod Street View

Aby wykonywać w aplikacji panoramę Street View, musisz wdrożyć interfejs OnStreetViewPanoramaReadyCallback i skonfigurować wystąpienie wywołania zwrotnego w obiekcie StreetViewPanoramaFragment lub StreetViewPanoramaView. W tym samouczku używamy interfejsu StreetViewPanoramaFragment, ponieważ to najprostszy sposób, aby dodać Street View do aplikacji. Pierwszym krokiem jest zaimplementowanie interfejsu wywołania zwrotnego:

Kotlin



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

Java


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

W metodzie onCreate() metody Activity ustaw 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);
}

Uzyskaj nick dla fragmentu, wywołując metodę FragmentManager.findFragmentById(), przekazując mu identyfikator zasobu elementu <fragment>. Zauważ, że identyfikator zasobu R.id.streetviewpanorama jest automatycznie dodawany do projektu Androida podczas tworzenia pliku układu.

Następnie użyj funkcji getStreetViewPanoramaAsync(), aby ustawić wywołanie zwrotne dla danego fragmentu.

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

Aby pobrać niepustą instancję StreetViewPanorama, która jest gotowa do użycia, użyj metody wywołania zwrotnego onStreetViewPanoramaReady(StreetViewPanorama).

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ć początkowego stanu panoramy Street View za pomocą kodu XML. Można jednak skonfigurować panoramę automatycznie, przekazując obiekt StreetViewPanoramaOptions z określonymi opcjami.

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 o StreetViewPanoramaFragment

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

StreetViewPanoramaView

StreetViewPanoramaView, podklasa klasy Android View, umożliwia umieszczenie panoramy Street View w Androidzie View. View reprezentuje prostokątny obszar ekranu. Jest to podstawowy element składowy aplikacji i widżetów na Androida. StreetViewPanoramaView (podobnie jak StreetViewPanoramaFragment) StreetViewPanoramaView działa jako kontener na panoramę, ujawnia główne funkcje za pomocą obiektu StreetViewPanorama. Użytkownicy tej klasy muszą przekazywać wszystkie metody cyklu życia aktywności (takie jak onCreate(), onDestroy(), onResume() i onPause()) do odpowiednich metod w klasie StreetViewPanoramaView).

Dostosowywanie funkcji kontrolowanych przez użytkownika

Domyślnie użytkownik ogląda panoramę Street View z tej funkcji: przesuwania, powiększania i przechodzenia do sąsiednich panoram. Możesz włączać i wyłączać gesty sterowane przez użytkownika za pomocą metod w StreetViewPanorama. Po wyłączeniu gestu nadal można wprowadzać zmiany automatyczne.

Ustaw lokalizację panoramy

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

Promień przydaje się, gdy chcesz poszerzyć 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 obiektem LatLng. Domyślny promień to 50 metrów. Jeśli w obszarze dopasowania znajduje się więcej niż jedna panorama, interfejs API zwróci najlepszą.

Źródło przydaje się, gdy chcesz, by Street View wyszukiwało tylko panoramiczne widoki. Domyślnie Panoramy Street View mogą znajdować się wewnątrz obiektów, takich jak muzea, budynki publiczne, kawiarnie i firmy. Pamiętaj, że w przypadku podanej lokalizacji panoramy zewnętrzne mogą nie istnieć.

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 sąsiedniej panoramy, najpierw użyj getLocation() i pobierz StreetViewPanoramaLocation. Ten obiekt zawiera identyfikator bieżącej panoramy i tablicę obiektów StreetViewPanoramaLink, z których każdy zawiera identyfikator połączonej z nią panoramy.

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

Możesz zmienić poziom powiększenia automatycznie, ustawiając StreetViewPanoramaCamera.zoom. Ustawienie powiększenia na 1,0 spowoduje dwukrotne powiększenie obrazu.

Poniższy fragment kodu wykorzystuje funkcję StreetViewPanoramaCamera.Builder() do skonstruowania nowej kamery z uwzględnieniem jej przechylenia i przechylenia oraz zwiększenia powiększenia o pięćdziesiąt procent.

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 aparatu (punktu widzenia)

Możesz określić orientację aparatu Street View, ustawiając kierunek i przechylenie na StreetViewPanoramaCamera.

dźwigając
Kierunek, w który jest skierowany kamera, wyrażony w stopniach w prawo od północy rzeczywistej, wokół lokalizacji kamery. Rzeczywista północ to 0, wschód to 90, południe to 180, zachód – 270.
przechyl
Oś Y przechyla się w górę lub w dół. Zakres wynosi od -90 do 90, gdzie -90 patrzysz prosto w dół, 0 wyśrodku się na horyzoncie, a 90 patrz prosto w górę. Wariancja jest mierzona na podstawie początkowego domyślnego nachylenia kamery, które jest często (ale nie zawsze) płasko w poziomie. Na przykład zdjęcie zrobione na wzgórzu będzie prawdopodobnie mieć domyślny kąt, który nie jest poziomy.

Poniższy fragment kodu korzysta z funkcji StreetViewPanoramaCamera.Builder(), aby utworzyć nową kamerę z powiększeniem i przechyleniem istniejącej kamery, obracając jednocześnie pozycję 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();

Ten fragment pozwala przechylić kamerę do góry o 30 stopni.

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

Animuj ruch kamery

Aby animować ruch kamery, wywołaj metodę StreetViewPanorama.animateTo(). Animacja interpoluje się między bieżącymi atrybutami kamery a nowymi. Jeśli chcesz przeskoczyć 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);

Poniższy obraz pokazuje wynik, jeśli zaplanujesz uruchamianie powyższej animacji co 2000 milisekund przy użyciu funkcji Handler.postDelayed():

Wersja demonstracyjna animacji panoramicznej Street View