Street View

Wybierz platformę: Android iOS JavaScript

Google Street View udostępnia panoramiczne widoki 360° z wyznaczonych dróg na całym obszarze objętym usługą.

W tym filmie pokazujemy, jak używać usługi Street View, aby przekazywać użytkownikom możliwość zapoznania się z adresem na mapie w prawdziwym świecie, o ich celu podróży lub dowolnym miejscu, które ich interesuje.

Zakres dostępności Map Google w interfejsie API Androida w wersji 2 jest taki sam jak w aplikacji Mapy Google na urządzeniu z Androidem. Więcej informacji o Street View oraz interaktywną mapę z obsługiwanymi obszarami znajdziesz na stronie Street View – informacje.

Klasa StreetViewPanorama modeluje ulicę Wyświetl panoramę w aplikacji. W interfejsie panorama jest reprezentowana przez obiekt StreetViewPanoramaFragment lub StreetViewPanoramaView.

Przykładowe fragmenty kodu

Repozytorium API Apigee na GitHubie zawiera: przykładowe zastosowania Street View.

Przykłady kodu Kotlin:

Przykłady w języku Java:

Omówienie Street View w Maps SDK na Androida

Maps SDK na Androida zapewnia usługę Street View w zakresie na zdjęciach używanych w Google Street View. Obrazy są zwracane jako i panoramy.

Każda panorama Street View to zdjęcie lub zestaw zdjęć, które zapewniają pełny widok 360° z jednego miejsca. Obrazy są dopasowane do kształtu walcowego równoodległościowego Odwzorowanie (Plate Carrée) obejmujące 360 stopni w poziomie. (pełne zawinięcie) i od 180 stopni w pionie (od prosto w dół). Uzyskana panorama 360° definiuje projekcję na sferze, a obraz jest nałożony na dwuwymiarową powierzchnię tej sfery.

StreetViewPanorama udostępnia przeglądający, który renderuje i robić sferę z aparatem pośrodku. Możesz manipulować StreetViewPanoramaCamera aby sterować powiększeniem i orientacją (pochyleniem i położeniem kamery).

Rozpocznij

Konfigurowanie projektu

Aby skonfigurować projekt pakietu SDK Map na Androida, postępuj zgodnie z przewodnikiem po rozpoczęciu.

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

Biblioteka klienta pakietu SDK Usług Google Play zawiera kilka Przykłady ze Street View, które możesz zaimportować do swojego projektu i wykorzystywać je jako podstawę do rozwoju. We wprowadzeniu znajdziesz wytycznych na temat importowania próbek.

Biblioteka narzędziowa pakietu SDK Map na Androida to biblioteka open source zawierająca klasy przydatne w różnych aplikacjach. W repozytorium GitHub znajduje się narzędzie do obsługi metadanych Street View. Narzędzie to 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 tę funkcję narzędzia do obsługi metadanych i dodawaj panoramę Street View tylko wtedy, gdy odpowiedź to OK.

Korzystanie z interfejsu API

Aby dodać panoramę Street View do fragmentu na Androidzie, wykonaj podane niżej czynności. To najprostszy sposób dodania Street View do aplikacji. Następnie dowiedz się więcej o fragmentach, widokach i dostosowywaniu panoramy.

Dodawanie panoramy Street View

Aby dodać taką panoramę Street View:

Wersja demonstracyjna panoramy Street View

W skrócie:

  1. Dodaj do działalności obiekt Fragment, który będzie obsługiwał panoramę Street View. Najłatwiej to zrobić, dodając element <fragment> do pliku układu Activity.
  2. Zaimplementuj tag OnStreetViewPanoramaReadyCallback i użyj funkcji onStreetViewPanoramaReady(StreetViewPanorama) wywołania zwrotnego, aby pobrać uchwyt dla StreetViewPanorama obiekt.
  3. Zadzwoń pod numer getStreetViewPanoramaAsync() na aby zarejestrować wywołanie zwrotne.

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

Dodawanie fragmentu

Dodaj element <fragment> do pliku układu aktywności, aby zdefiniować Obiekt Fragment. 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 edytować panoramę Street View w aplikacji, musisz zaimplementować OnStreetViewPanoramaReadyCallback i ustawić wystąpienie wywołania zwrotnego w argumencie StreetViewPanoramaFragment lub StreetViewPanoramaView obiekt. W tym samouczku użyto StreetViewPanoramaFragment, ponieważ to najprostszy sposób dodawania Street View do Twojej aplikacji. Pierwszym krokiem jest wdrożenie interfejsu wywołania zwrotnego:

Kotlin

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

Java

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

W: Activity: onCreate() 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 uchwyt fragmentu, wywołując FragmentManager.findFragmentById() przez przekazywanie jej identyfikatora zasobu elementu <fragment>. Podczas kompilowania pliku układu identyfikator zasobu R.id.streetviewpanorama jest automatycznie dodawany do projektu Androida.

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

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 onStreetViewPanoramaReady(StreetViewPanorama) wywołania zwrotnego do pobrania niepustej instancji StreetViewPanorama, gotowy 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ć początkowego stanu Panorama Street View utworzona w pliku 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 o StreetViewPanoramaFragment

StreetViewPanoramaFragment jest podklasą klasy klasy Fragment Androida i umożliwiają umieszczanie zdjęć Street View we fragmencie Androida. Obiekty StreetViewPanoramaFragment działają jako kontenery panoramy i zapewniają dostęp do obiektu StreetViewPanorama.

StreetViewPanoramaView

StreetViewPanoramaView, podklasa Androida View, możesz umieścić zdjęcia Street View panoramę w aplikacji View z Androidem. View to prostokątny obszar ekranu, który jest podstawowym elementem aplikacji i widżetów na Androida. Podobnie jak StreetViewPanoramaFragment, element StreetViewPanoramaView działa jako kontenera na panoramę, prezentując najważniejsze funkcje za pomocą StreetViewPanorama obiekt. Użytkownicy tej klasy muszą przekazać 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 podczas przeglądania użytkownicy mają dostęp do tych funkcji panoramę Street View: przesuwanie, powiększanie i podróżowanie 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 programowe.

Ustawianie lokalizacji panoramy

Aby ustawić lokalizację panoramy Street View, wybierz StreetViewPanorama.setPosition(), uzyskując wynik LatLng. Jako parametry opcjonalne możesz też podać wartości radius i source.

Promień jest przydatny, jeśli chcesz poszerzyć lub zawęzić obszar, w którym Street View będzie szukać pasującej panoramy. Promień Wartość 0 oznacza, że panorama musi być połączona z konkretnym obiektem LatLng. Domyślny promień to 50 metrów. Jeśli w pasujący obszar, interfejs API zwróci najlepszy wynik.

Źródło jest przydatne, jeśli chcesz, aby Street View szukało tylko panoram na zewnątrz. Domyślnie panoramy Street View mogą znajdować się w muzeum, budynku użyteczności publicznej, kawiarni lub firmie. W danej lokalizacji mogą nie być dostępne panoramy na zewnątrz.

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 w ten sposób panoId do StreetViewPanorama.setPosition().

Aby pobrać identyfikator sąsiednich panoram, najpierw użyj getLocation() aby pobrać StreetViewPanoramaLocation. Ten obiekt zawiera identyfikator bieżącą panoramę i tablicę obiektów StreetViewPanoramaLink, każdy z identyfikatorem 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 wartość StreetViewPanoramaCamera.zoom. Ustawienie powiększenia na 1,0 powiększy obraz o współczynnik 2.

Ten fragment kodu używa StreetViewPanoramaCamera.Builder() do utworzenia z nową kamerą z przechylaniem i położeniem istniejącej kamery, a jednocześnie przybliżenie 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();

Ustaw orientację (punkt widzenia) aparatu.

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

kierunek
Kierunek, w którym skierowany jest aparat, podany w stopniach w prawo od prawdziwej północy, wokół lokalizacji kamery. Rzeczywista północ to 0, wschód to 90, południe to 180, a zachód to 270.
przechylenie
Przechyl oś Y w górę lub w dół. Zakres wynosi od -90 do 0–90 (przy tym -90) patrzy prosto w dół, 0 na środku horyzontu, 90 patrzące prosto w górę. Wariancję jest mierzona na podstawie początkowego domyślnego tonu kamery, który jest często (ale nie zawsze) płaska w poziomie. Na przykład zdjęcie zrobione prawdopodobnie będzie mieć domyślne odchylenie inne niż poziome.

Ten fragment kodu używa StreetViewPanoramaCamera.Builder() do utworzenia z zoomem i przechyleniem dotychczasowej kamery, jednocześnie zmieniając przesunęliśmy go 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 kodu podnosi kamerę 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();

Animowanie ruchów kamery

Aby animować ruchy kamery, wywołaj funkcję 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);

Na poniższym obrazie widać, co się stanie, gdy zaplanowana animacja będzie uruchamiana co 2000 ms przy użyciu Handler.postDelayed():

Demonstracja animacji panoramicznej Street View