Контрол Street View

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

Street View является частью инфраструктуры Google Maps и тесно интегрирован с объектом карты. Контрол позволяет:

  • открывать панорамы улиц непосредственно на карте;
  • проверять наличие фотографий Street View для выбранной области;
  • переключаться между картой и панорамой;
  • использовать навигацию внутри панорам;
  • программно управлять отображением Street View;
  • изменять положение контрола на карте;
  • отключать или включать его при необходимости.

По умолчанию контрол отображается в правой нижней части карты.

Включение контрола Street View

При создании карты контрол Street View обычно активирован автоматически.

const map = new google.maps.Map(
    document.getElementById("map"),
    {
        center: {
            lat: 40.7128,
            lng: -74.0060
        },
        zoom: 14
    }
);

В данном примере кнопка Street View будет присутствовать на карте без дополнительной настройки.

Явное включение Street View

Для повышения читаемости конфигурации нередко используется явное указание параметра streetViewControl.

const map = new google.maps.Map(
    document.getElementById("map"),
    {
        center: {
            lat: 40.7128,
            lng: -74.0060
        },
        zoom: 14,
        streetViewControl: true
    }
);

Свойство принимает логическое значение:

Значение Описание
true Контрол отображается
false Контрол скрыт

Отключение контрола Street View

Во многих интерфейсах режим панорам не требуется. Например:

  • корпоративные геоинформационные системы;
  • панели мониторинга;
  • карты складов;
  • внутренние сервисы логистики.

В таких случаях контрол можно отключить.

const map = new google.maps.Map(
    document.getElementById("map"),
    {
        center: {
            lat: 55.7558,
            lng: 37.6176
        },
        zoom: 12,
        streetViewControl: false
    }
);

После отключения кнопка Street View исчезает из интерфейса.

Изменение расположения контрола

Google Maps позволяет разместить контрол практически в любой области карты.

Для этого используется свойство streetViewControlOptions.

const map = new google.maps.Map(
    document.getElementById("map"),
    {
        center: {
            lat: 48.8566,
            lng: 2.3522
        },
        zoom: 13,

        streetViewControl: true,

        streetViewControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT
        }
    }
);

Возможные позиции

Позиция определяется перечислением google.maps.ControlPosition.

Наиболее востребованные варианты:

google.maps.ControlPosition.TOP_LEFT
google.maps.ControlPosition.TOP_CENTER
google.maps.ControlPosition.TOP_RIGHT

google.maps.ControlPosition.LEFT_TOP
google.maps.ControlPosition.RIGHT_TOP

google.maps.ControlPosition.LEFT_CENTER
google.maps.ControlPosition.RIGHT_CENTER

google.maps.ControlPosition.BOTTOM_LEFT
google.maps.ControlPosition.BOTTOM_CENTER
google.maps.ControlPosition.BOTTOM_RIGHT

Пример размещения в левом верхнем углу:

streetViewControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT
}

Получение объекта Street View

Каждая карта содержит связанный объект панорамы.

Получение осуществляется через метод getStreetView().

const panorama = map.getStreetView();

Полученный объект относится к классу google.maps.StreetViewPanorama.

Через него выполняется всё программное управление режимом Street View.

Открытие Street View программно

Street View может быть открыт без использования встроенного контрола.

const panorama = map.getStreetView();

panorama.setPosition({
    lat: 40.7580,
    lng: -73.9855
});

panorama.setVisible(true);

После выполнения кода карта переключится в режим панорамы.

Закрытие Street View программно

Для возврата к обычной карте используется метод:

panorama.setVisible(false);

Полный пример:

const panorama = map.getStreetView();

document
    .getElementById("closeStreetView")
    .addEventListener("click", () => {
        panorama.setVisible(false);
    });

Проверка состояния панорамы

Определить, отображается ли Street View в данный момент, позволяет метод getVisible().

if (panorama.getVisible()) {
    console.log("Панорама открыта");
}

Либо:

const isVisible = panorama.getVisible();

console.log(isVisible);

Отслеживание открытия и закрытия Street View

Событие visible_changed вызывается при изменении видимости панорамы.

panorama.addListener(
    "visible_changed",
    () => {

        if (panorama.getVisible()) {
            console.log("Street View открыт");
        } else {
            console.log("Street View закрыт");
        }

    }
);

Такой подход часто используется для:

  • изменения интерфейса;
  • показа дополнительных панелей;
  • скрытия элементов карты;
  • синхронизации состояния приложения.

Изменение точки панорамы

Панорама может быть перемещена на другую географическую позицию.

panorama.setPosition({
    lat: 51.5007,
    lng: -0.1246
});

Получение текущей позиции:

const position = panorama.getPosition();

console.log(position.lat());
console.log(position.lng());

Управление направлением обзора

После открытия Street View можно задать направление камеры.

Используется метод setPov().

panorama.setPov({
    heading: 90,
    pitch: 0
});

Параметры:

Свойство Назначение
heading Горизонтальный угол
pitch Вертикальный угол

Пример поворота на восток

panorama.setPov({
    heading: 90,
    pitch: 0
});

Пример взгляда вверх

panorama.setPov({
    heading: 180,
    pitch: 30
});

Пример взгляда вниз

panorama.setPov({
    heading: 180,
    pitch: -30
});

Получение текущего направления

const pov = panorama.getPov();

console.log(pov.heading);
console.log(pov.pitch);

Это полезно при сохранении пользовательского положения камеры.

Реакция на изменение направления

Когда пользователь вращает панораму, возникает событие pov_changed.

panorama.addListener(
    "pov_changed",
    () => {

        const pov = panorama.getPov();

        console.log(pov.heading);
        console.log(pov.pitch);

    }
);

Отслеживание изменения позиции

При переходе по улицам Street View генерирует событие position_changed.

panorama.addListener(
    "position_changed",
    () => {

        const position = panorama.getPosition();

        console.log(
            position.lat(),
            position.lng()
        );

    }
);

Это позволяет:

  • обновлять координаты в интерфейсе;
  • сохранять маршрут пользователя;
  • синхронизировать другие карты.

Работа с идентификатором панорамы

Каждая панорама обладает собственным идентификатором.

Получение:

const panoId = panorama.getPano();

console.log(panoId);

Установка:

panorama.setPano(
    "F:1234567890"
);

Использование идентификаторов особенно полезно при сохранении конкретных панорам в базе данных.

Настройка пользовательского интерфейса Street View

Для панорамы доступны собственные элементы управления.

const panorama = map.getStreetView();

panorama.setOptions({
    zoomControl: true,
    panControl: true,
    addressControl: true
});

Управление масштабированием

panorama.setOptions({
    zoomControl: false
});

Отключает кнопки изменения масштаба внутри панорамы.

Управление адресной строкой

panorama.setOptions({
    addressControl: false
});

Скрывает отображаемый адрес текущего местоположения.

Управление кнопкой закрытия

panorama.setOptions({
    enableCloseButton: false
});

При такой конфигурации закрытие панорамы должно выполняться собственными средствами приложения.

Полная настройка Street View

const panorama = map.getStreetView();

panorama.setOptions({
    addressControl: true,
    linksControl: true,
    panControl: true,
    zoomControl: true,
    enableCloseButton: true
});

Параметры:

Параметр Назначение
addressControl Отображение адреса
linksControl Стрелки навигации
panControl Управление обзором
zoomControl Масштабирование
enableCloseButton Кнопка закрытия

Использование отдельного контейнера для панорамы

Street View необязательно открывать поверх карты. Панорама может отображаться в отдельном HTML-блоке.

<div id="map"></div>
<div id="street-view"></div>
const panorama =
    new google.maps.StreetViewPanorama(
        document.getElementById("street-view"),
        {
            position: {
                lat: 40.7580,
                lng: -73.9855
            },
            pov: {
                heading: 0,
                pitch: 0
            }
        }
    );

Такой подход используется в профессиональных картографических системах, где карта и панорама отображаются одновременно.

Связывание карты и отдельной панорамы

const map = new google.maps.Map(
    document.getElementById("map"),
    {
        center: {
            lat: 40.7580,
            lng: -73.9855
        },
        zoom: 15
    }
);

const panorama =
    new google.maps.StreetViewPanorama(
        document.getElementById("street-view"),
        {
            position: {
                lat: 40.7580,
                lng: -73.9855
            }
        }
    );

map.setStreetView(panorama);

Теперь карта и панорама будут работать как единая система.

Практический пример управления Street View

const map = new google.maps.Map(
    document.getElementById("map"),
    {
        center: {
            lat: 40.7580,
            lng: -73.9855
        },
        zoom: 15,
        streetViewControl: true
    }
);

const panorama = map.getStreetView();

document
    .getElementById("open")
    .addEventListener("click", () => {

        panorama.setPosition({
            lat: 40.7580,
            lng: -73.9855
        });

        panorama.setPov({
            heading: 100,
            pitch: 5
        });

        panorama.setVisible(true);

    });

document
    .getElementById("close")
    .addEventListener("click", () => {

        panorama.setVisible(false);

    });

Данный сценарий демонстрирует полный цикл работы с контролом Street View: отображение кнопки на карте, программное открытие панорамы, настройку направления обзора и последующее закрытие режима панорамного просмотра.

Оглавление