Просмотр улиц

Выберите платформу: Android iOS JavaScript

Google Street View обеспечивает панорамный 360-градусный вид с обозначенных дорог по всей зоне покрытия.

В этом видео показано, как вы можете использовать службу Просмотра улиц, чтобы дать пользователям реальный опыт работы с адресом на карте, предоставляя им содержательный контекст о пункте назначения или любом интересующем их месте.

Покрытие, доступное через Google Maps Android API v2, такое же, как и для приложения Google Maps на вашем устройстве Android. Вы можете узнать больше о просмотре улиц и увидеть поддерживаемые области на интерактивной карте в разделе О просмотре улиц .

Класс StreetViewPanorama моделирует панораму Просмотра улиц в вашем приложении. В пользовательском интерфейсе панорама представлена ​​объектом StreetViewPanoramaFragment или StreetViewPanoramaView .

Примеры кода

Репозиторий ApiDemos на GitHub содержит примеры, демонстрирующие использование просмотра улиц.

Образцы Java:

Образцы Котлина:

Обзор просмотра улиц в Maps SDK для Android

Maps SDK для Android предоставляет службу Street View для получения изображений, используемых в Google Street View, и управления ими. Изображения возвращаются в виде панорам.

Каждая панорама Просмотра улиц представляет собой изображение или набор изображений, обеспечивающих полный обзор на 360 градусов из одного места. Изображения соответствуют равнопрямоугольной проекции (Plate Carrée), которая содержит 360 градусов по горизонтали (полный охват) и 180 градусов по вертикали (от прямо вверх до прямо вниз). Результирующая 360-градусная панорама определяет проекцию на сферу с изображением, обернутым на двухмерную поверхность этой сферы.

StreetViewPanorama предоставляет средство просмотра, отображающее панораму в виде сферы с камерой в центре. Вы можете манипулировать StreetViewPanoramaCamera , чтобы управлять масштабированием и ориентацией (наклоном и азимутом) камеры.

Начать

Следуйте руководству по началу работы , чтобы настроить проект Maps SDK для Android. Затем добавьте панораму Просмотра улиц, как описано ниже.

В клиентской библиотеке SDK сервисов Google Play есть несколько примеров Просмотра улиц, которые вы можете импортировать в свой проект и использовать в качестве основы для разработки. Инструкции по импорту образцов см. во введении.

Используйте API

Следуйте приведенным ниже инструкциям, чтобы добавить панораму просмотра улиц во фрагмент Android. Это самый простой способ добавить Просмотр улиц в свое приложение. Тогда читайте больше о фрагментах, видах и настройке панорамы.

Добавьте панораму просмотра улиц

Выполните следующие действия, чтобы добавить панораму просмотра улиц, подобную этой:

Street View panorama demo

В итоге:

  1. Добавьте объект Fragment в Activity , который будет обрабатывать панораму Street View. Самый простой способ сделать это — добавить элемент <fragment> в файл макета для Activity .
  2. Реализуйте интерфейс OnStreetViewPanoramaReadyCallback и используйте метод обратного вызова onStreetViewPanoramaReady(StreetViewPanorama) , чтобы получить дескриптор объекта StreetViewPanorama .
  3. Вызовите getStreetViewPanoramaAsync() для фрагмента, чтобы зарегистрировать обратный вызов.

Ниже более подробно о каждом шаге.

Добавить фрагмент

Добавьте элемент <fragment> в файл макета действия, чтобы определить объект Fragment . В этом элементе задайте для атрибута class значение com.google.android.gms.maps.StreetViewPanoramaFragment (или SupportStreetViewPanoramaFragment ).

Вот пример фрагмента в файле макета:

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

Добавить код просмотра улиц

Чтобы работать с панорамой Просмотра улиц в приложении, вам потребуется реализовать интерфейс OnStreetViewPanoramaReadyCallback и установить экземпляр обратного вызова в объекте StreetViewPanoramaFragment или StreetViewPanoramaView . В этом руководстве используется StreetViewPanoramaFragment , так как это самый простой способ добавить Просмотр улиц в ваше приложение. Первым шагом является реализация интерфейса обратного вызова:

Джава


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

Котлин


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

В методе onCreate() вашей Activity установите файл макета в качестве представления содержимого. Например, если файл макета имеет имя main.xml , используйте этот код:

Джава


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

Котлин


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

Получите дескриптор фрагмента, вызвав FragmentManager.findFragmentById() и передав ему идентификатор ресурса вашего элемента <fragment> . Обратите внимание, что идентификатор ресурса R.id.streetviewpanorama автоматически добавляется в проект Android при создании файла макета.

Затем используйте getStreetViewPanoramaAsync() , чтобы установить обратный вызов для фрагмента.

Джава


SupportStreetViewPanoramaFragment streetViewPanoramaFragment =
    (SupportStreetViewPanoramaFragment) getSupportFragmentManager()
        .findFragmentById(R.id.street_view_panorama);
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);

Котлин


val streetViewPanoramaFragment =
    supportFragmentManager
        .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this)

Используйте метод обратного вызова onStreetViewPanoramaReady(StreetViewPanorama) , чтобы получить ненулевой экземпляр StreetViewPanorama , готовый к использованию.

Джава


@Override
public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) {
    LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
    streetViewPanorama.setPosition(sanFrancisco);
}

Котлин


override fun onStreetViewPanoramaReady(streetViewPanorama: StreetViewPanorama) {
    val sanFrancisco = LatLng(37.754130, -122.447129)
    streetViewPanorama.setPosition(sanFrancisco)
}

Подробнее о настройке начального состояния

В отличие от карты, исходное состояние панорамы Просмотра улиц невозможно настроить с помощью XML. Однако вы можете настроить панораму программно, передав объект StreetViewPanoramaOptions , содержащий указанные вами параметры.

Джава


LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
StreetViewPanoramaView view = new StreetViewPanoramaView(this,
    new StreetViewPanoramaOptions().position(sanFrancisco));

Котлин


val sanFrancisco = LatLng(37.754130, -122.447129)
val view = StreetViewPanoramaView(
    this,
    StreetViewPanoramaOptions().position(sanFrancisco)
)

Подробнее о StreetViewPanoramaFragment

StreetViewPanoramaFragment является подклассом класса Android Fragment и позволяет размещать панораму просмотра улиц во фрагменте Android. Объекты StreetViewPanoramaFragment действуют как контейнеры для панорамы и обеспечивают доступ к объекту StreetViewPanorama .

StreetViewПанорамаView

StreetViewPanoramaView , подкласс класса Android View , позволяет размещать панораму Street View в Android View . View представляет собой прямоугольную область экрана и является основным строительным блоком для приложений и виджетов Android. Как и StreetViewPanoramaFragment , StreetViewPanoramaView выступает в качестве контейнера для панорамы, предоставляя основные функции через объект StreetViewPanorama . Пользователи этого класса должны переадресовывать все методы жизненного цикла активности (такие как onCreate() , onDestroy() , onResume() и onPause()) соответствующим методам в классе StreetViewPanoramaView .

Настройте управляемую пользователем функциональность

По умолчанию пользователю доступны следующие функции при просмотре панорамы Просмотра улиц: панорамирование, масштабирование и переход к соседним панорамам. Вы можете включать и отключать жесты, управляемые пользователем, с помощью методов StreetViewPanorama . Программные изменения по-прежнему возможны, когда жест отключен.

Установить местоположение панорамы

Чтобы установить местоположение панорамы Street View, вызовите StreetViewPanorama.setPosition() , передав LatLng . Вы также можете передать radius и source в качестве необязательных параметров.

Радиус полезен, если вы хотите расширить или сузить область, в которой Просмотр улиц будет искать подходящую панораму. Радиус 0 означает, что панорама должна быть связана именно с указанным LatLng . Радиус по умолчанию составляет 50 метров. Если в совпадающей области находится более одной панорамы, API вернет наилучшее совпадение.

Источник полезен, если вы хотите ограничить Просмотр улиц, чтобы искать только панорамы, которые находятся на открытом воздухе. По умолчанию панорамы Street View могут быть внутри таких мест, как музеи, общественные здания, кафе и предприятия. Обратите внимание, что наружные панорамы могут не существовать для указанного местоположения.

Джава


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

Котлин


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)

Кроме того, вы можете установить местоположение на основе идентификатора панорамы, передав panoId в StreetViewPanorama.setPosition() .

Чтобы получить идентификатор панорамы для соседних панорам, сначала используйте getLocation() для получения StreetViewPanoramaLocation . Этот объект содержит идентификатор текущей панорамы и массив объектов StreetViewPanoramaLink , каждый из которых содержит идентификатор панорамы, связанной с текущей.

Джава


StreetViewPanoramaLocation location = streetViewPanorama.getLocation();
if (location != null && location.links != null) {
    streetViewPanorama.setPosition(location.links[0].panoId);
}

Котлин


streetViewPanorama.location.links.firstOrNull()?.let { link: StreetViewPanoramaLink ->
    streetViewPanorama.setPosition(link.panoId)
}

Увеличение и уменьшение масштаба

Вы можете изменить уровень масштабирования программно, установив StreetViewPanoramaCamera.zoom . Установка масштаба на 1,0 увеличит изображение в 2 раза.

В следующем фрагменте используется StreetViewPanoramaCamera.Builder() для создания новой камеры с наклоном и азимутом существующей камеры при увеличении масштаба на пятьдесят процентов.

Джава


float zoomBy = 0.5f;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom + zoomBy)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing)
    .build();

Котлин


val zoomBy = 0.5f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom + zoomBy)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing)
    .build()

Установите ориентацию камеры (точку зрения)

Вы можете определить ориентацию камеры просмотра улиц, установив азимут и наклон на StreetViewPanoramaCamera .

несущий
Направление, в котором указывает камера, указанное в градусах по часовой стрелке от истинного севера вокруг геометрического места камеры. Истинный север — 0, восток — 90, юг — 180, запад — 270.
наклон
Ось Y наклоняется вверх или вниз. Диапазон составляет от -90 до 0 и 90, где -90 смотрит прямо вниз, 0 по центру горизонта и 90 смотрит прямо вверх. Дисперсия измеряется от исходного шага камеры по умолчанию, который часто (но не всегда) является плоским по горизонтали. Например, изображение, снятое на холме, вероятно, будет иметь не горизонтальный шаг по умолчанию.

В следующем фрагменте используется StreetViewPanoramaCamera.Builder() для создания новой камеры с масштабированием и наклоном существующей камеры с изменением азимута на 30 градусов влево.

Джава


float panBy = 30;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing - panBy)
    .build();

Котлин


val panBy = 30f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing - panBy)
    .build()

Следующий фрагмент наклоняет камеру вверх на 30 градусов.

Джава


float tilt = streetViewPanorama.getPanoramaCamera().tilt + 30;
tilt = (tilt > 90) ? 90 : tilt;

StreetViewPanoramaCamera previous = streetViewPanorama.getPanoramaCamera();

StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder(previous)
    .tilt(tilt)
    .build();

Котлин


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

Анимируйте движения камеры

Чтобы анимировать движения камеры, вызовите StreetViewPanorama.animateTo() . Анимация интерполирует текущие атрибуты камеры и новые атрибуты камеры. Если вы хотите перейти прямо к камере без анимации, вы можете установить продолжительность на 0.

Джава


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

Котлин


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

На следующем изображении показан результат, когда вы запланировали выполнение вышеуказанной анимации каждые 2000 миллисекунд с помощью Handler.postDelayed() :

Street View panorama animation demo