Street View

Wybierz platformę: Android iOS JavaScript

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

Ten film pokazuje, jak za pomocą usługi Street View możesz udostępnić użytkownikom rzeczywisty widok adresu na mapie, zapewniając im przydatne informacje o miejscu docelowym lub dowolnym innym interesującym ich miejscu.

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 panoramę Street View w aplikacji. W interfejsie panorama jest reprezentowana przez obiekt StreetViewPanoramaFragment lub StreetViewPanoramaView.

Przykładowe fragmenty kodu

Repozytorium ApiDemos w GitHub zawiera przykłady, które pokazują, jak korzystać ze Street View.

Przykłady kodu Kotlin:

Przykłady w Javie:

Omówienie Street View w pakiecie SDK Map na Androida

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

Każda panorama Street View to zdjęcie lub zestaw zdjęć, które zapewniają pełny widok sferyczny 360° z jednego miejsca. Obrazy są zgodne z projekcją równokątną (Plate Carrée), która zawiera widok poziomy 360° (pełny obrót) i widok pionowy 180° (od góry do dołu). Uzyskana panorama 360° definiuje projekcję na sferze, a obraz jest nałożony na dwuwymiarową powierzchnię tej sfery.

StreetViewPanorama zawiera podgląd, który renderuje panoramę jako kulę z kamerą w środku. Możesz manipulować przyciskiem StreetViewPanoramaCamera, aby sterować zoomem i orientacją (przechyleniem i kierunkiem) kamery.

Rozpocznij

Konfigurowanie projektu

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

Sprawdź dostępność panoramy Street View przed dodaniem panoramy

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. Wskazówki dotyczące importowania próbek znajdziesz w wprowadzeniu.

Pakiet SDK Map Google dla biblioteki narzędziowej na Androida to biblioteka open source zawierająca klasy przydatne w różnych aplikacjach. Repozytorium GitHub zawiera 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, możesz wywołać to narzędzie do obsługi metadanych i dodać panoramę Street View tylko wtedy, gdy odpowiedź to OK.

Korzystanie z interfejsu API

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

Dodawanie panoramy Street View

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

Demonstracja panoramy Street View

W skrócie:

  1. Dodaj do Activity obiekt Fragment, który będzie obsługiwał panoramę Street View. Najłatwiej dodać element <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. Zadzwoń do fragmentu getStreetViewPanoramaAsync(), aby zarejestrować wywołanie zwrotne.

Poniżej znajdziesz więcej informacji o każdym z tych kroków.

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

Dodawanie kodu Street View

Aby korzystać z panoramy Street View w aplikacji, musisz zaimplementować interfejs OnStreetViewPanoramaReadyCallback i ustawić instancję wywołania zwrotnego w obiekcie StreetViewPanoramaFragment lub StreetViewPanoramaView. W tym samouczku używamy interfejsu StreetViewPanoramaFragment, ponieważ jest to najprostszy sposób dodawania Street View do aplikacji. Pierwszym krokiem jest wdrożenie interfejsu wywołania zwrotnego:

Kotlin

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

Java

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

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

Aby uzyskać uchwyt do fragmentu, wywołaj funkcję FragmentManager.findFragmentById(), przekazując jej identyfikator zasobu elementu <fragment>. Podczas kompilowania pliku układu identyfikator zasobu R.id.streetviewpanorama jest automatycznie dodawany do projektu na Androida.

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

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ę StreetViewPanorama, która nie jest równa null i 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 odróżnieniu od mapy nie można skonfigurować początkowego stanu panoramy Street View za pomocą 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 informacji o StreetViewPanoramaFragment

StreetViewPanoramaFragment jest podklasą klasy Android Fragment i pozwala umieszczać panoramy Street View w fragmentach Androida. Obiekty StreetViewPanoramaFragment pełnią funkcję kontenerów panoramy i zapewniają dostęp do obiektu StreetViewPanorama.

StreetViewPanoramaView

StreetViewPanoramaView, podklasa klasy View na Androida, umożliwia umieszczenie panoramy Street View w aplikacji Android View. View reprezentuje prostokątny obszar ekranu i jest podstawowym elementem aplikacji i widżetów na Androida. Podobnie jak obiekt StreetViewPanoramaFragment obiekt StreetViewPanoramaView działa jako kontener dla panoramy, udostępniając podstawowe 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 podczas wyświetlania panoramy Street View użytkownik ma do dyspozycji te funkcje: przesuwanie, powiększanie i przechodzenie do sąsiednich panoram. Gesty kontrolowane przez użytkownika możesz włączać i wyłączać za pomocą metod w StreetViewPanorama. Automatyczne zmiany są nadal możliwe, gdy gest jest wyłączony.

Ustaw lokalizację panoramy

Aby ustawić lokalizację panoramy Street View, wywołaj funkcję StreetViewPanorama.setPosition(), przekazując wartość 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ń równy 0 oznacza, że panorama musi być powiązana dokładnie z wybranym LatLng. Domyślny promień to 50 metrów. Jeśli w obszarze dopasowania znajduje się więcej niż 1 panoram, interfejs API zwróci najlepszą z nich.

Źródło jest przydatne, jeśli chcesz ograniczyć wyszukiwanie w Street View tylko do panoram na zewnątrz. Domyślnie panoramy Street View mogą znajdować się w takich miejscach jak muzea, budynki użyteczności publicznej, kawiarnie i firmy. Pamiętaj, że w przypadku wybranej 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 parametr panoId do StreetViewPanorama.setPosition().

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

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 spowoduje powiększenie obrazu dwukrotnie.

W tym fragmencie kodu użyto funkcji StreetViewPanoramaCamera.Builder(), aby utworzyć nową kamerę z taką samą orientacją i kierunkiem jak istniejąca kamera, ale z zoomem zwiększonym 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();

Ustaw orientację kamery (punkt widzenia)

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

kierunek
Kierunek, w którym skierowany jest aparat, podany w stopniach w kierunku zgodnym z ruchem wskazówek zegara od geograficznego północy wokół punktu lokalizacji aparatu. Prawdziwy kierunek północny to 0, wschód to 90, południe to 180, a zachód to 270.
przechylenie
Pochylenie osi Y w górę lub w dół. Zakres to -90 do 0 do 90, przy czym -90 oznacza patrzenie w dół, 0 – patrzenie na horyzont, a 90 – patrzenie w górę. Odchylenie jest mierzone od początkowego domyślnego pochylenia kamery, które często (ale nie zawsze) jest poziome. Na przykład zdjęcie zrobione na wzgórzu będzie prawdopodobnie mieć domyślny kąt nachylenia, który nie jest poziomy.

Ten fragment kodu używa funkcji StreetViewPanoramaCamera.Builder() do tworzenia nowej kamery z powiększeniem i przechyleniem zbliżonym do tych w istniejącej kamerze, ale z kierunkiem 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();

animować ruchy kamery,

Aby animować ruchy kamery, wywołaj 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 zaplanujesz uruchomienie tej animacji co 2000 ms za pomocą Handler.postDelayed():

Animacja panoramy Street View