Вставка панорам Яндекса
Отображение панорамы на странице
API плеера панорам позволяет размещать на странице сайта интерактивные панорамы Яндекса.
Панорама добавляется на страницу отдельно от карты, в любой DOM-элемент блочного типа. Для отображения панорамы используется технология Canvas2D либо WebGL.
Внимание
Запросы к API плеера панорам тарифицируются.
Совместимость с браузерами
Чтобы проверить, будет ли работать плеер панорам в браузере пользователя, можно воспользоваться статической функцией panorama.isSupported():
if (panorama.isSupported()) {
console.log("API поддерживает данный браузер.");
} else {
console.log("Данный браузер не поддерживается.");
}
Получение объекта панорамы
Панорама описывается объектом Panorama. В свойствах этого объекта содержатся метаданные панорамы — ее название, тип (воздушная или наземная) и географические координаты точки, к которой привязана панорама. Также объект Panorama
содержит необходимую служебную информацию — геометрию панорамы, размер и URL тайлов и др.
Вся информация о панораме хранится на серверах Яндекса. Чтобы получить эту информацию и на ее основе сформировать объект Panorama
, необходимо воспользоваться функцией panorama.locate(). На вход ей передаются географические координаты точки, для которой требуется получить панораму. Если в заданной точке панорамы не существует, то будет выполнен поиск ближайшей панорамы в окрестностях этой точки.
// Получение объекта Panorama.
var locateRequest = ymaps.panorama.locate([55.83403, 37.623370]);
// Функция ymaps.panorama.locate возвращает Promise-объект,
// который разрешится массивом с найденной панорамой либо пустым
// массивом, если в окрестностях точки панорам не нашлось.
locateRequest.then(
function (panoramas) {
if (panoramas.length) {
console.log("Ура, нашлась панорама " + panoramas[0]);
} else {
console.log("Для заданной точки не найдено ни одной панорамы.");
}
},
function (err) {
console.log("При попытке получить панораму возникла ошибка.");
}
);
Отображение панорамы на странице
Чтобы показать панораму на странице, необходимо создать экземпляр класса panorama.Player. Его конструктору следует передать идентификатор DOM-элемента, в который будет встроена панорама, а также объект панорамы (см. Получение объекта панорамы).
locateRequest.then(
function (panoramas) {
if (panoramas.length) {
// Создание на странице плеера панорам.
var player = new ymaps.panorama.Player('div_id', panoramas[0], {
// Опции панорамы.
// direction - направление взгляда.
direction: [0, -50]
});
} else {
console.log("В заданной точке нет панорам.");
}
}
);
API предоставляет набор функций, с помощью которых можно управлять отображением панорамы — изменять направление взгляда или уровень масштабирования, переходить на смежную панораму и др. Подробнее см. Управление отображением панорамы.
Примечание
API не позволяет изменять стандартный внешний вид объектов на панораме (маркеров с номерами домов и стрелки переходов).
Вспомогательная функция для работы с панорамой
Показать панораму на странице можно также при помощи вспомогательной функции panorama.createPlayer(). В качестве параметров ей нужно передать идентификатор DOM-элемента, в который будет встроена панорама, а также координаты точки, для которой требуется открыть панораму. Функция автоматически выполнит проверку на наличие панорамы в окрестностях заданной точки и в случае успеха создаст на странице экземпляр плеера (объект panorama.Player) с найденной панорамой.
// Отображение панорамы на странице с помощью вспомогательной функции.
var createPlayer = ymaps.panorama.createPlayer('div_id', [55.83403, 37.623370], {
// Опции панорамы.
layer: 'yandex#airPanorama'
});
// В случае успеха Promise-объект разрешится плеером.
createPlayer.then(function (player) {
console.log("Имя панорамы: " + player.getPanorama().getName());
// Установим новое направление взгляда.
player.setDirection([10, 10]);
});