Вставка на страницу панорам Яндекса

Open in CodeSandbox

API Яндекс.Карт позволяет отображать на страницах сайта панорамы Яндекса.

Панорама реализуется объектом Panorama. Этот объект содержит необходимую информацию о панораме: ее название, географические координаты, связи со смежными панорамами и др.

Для добавления панорамы на страницу предназначен объект panorama.Player (далее плеер). Плеер формирует запросы за тайлами и создает на странице элемент <canvas> для отображения панорамы. Чтобы вставить панораму на страницу, достаточно передать конструктору плеера объект панорамы (Panorama).

Получить объект панорамы можно с помощью функции panorama.locate. На вход ей подаются географические коордианты точки, для которой нужно получить панораму. Функция возвращает массив панорам, найденных в окрестностях заданной точки. Панорамы в массиве отсортированы по расстоянию.

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

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Вставка на страницу панорам Яндекса</title>
        <meta charset="utf-8" />

        <style>
            html,
            body,
            .player {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            .player {
                height: 50%;
            }
        </style>
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"></script>
        <script src="panorama_basics.js"></script>
    </head>
    <body>
        <div id="player1" class="player"></div>
        <div id="player2" class="player"></div>
    </body>
</html>

ymaps.ready(function () {
    // Для начала проверим, поддерживает ли плеер браузер пользователя.
    if (!ymaps.panorama.isSupported()) {
        // Если нет, то просто ничего не будем делать.
        return;
    }

    // Ищем панораму в переданной точке.
    ymaps.panorama.locate([55.733685, 37.588264]).done(
        function (panoramas) {
            // Убеждаемся, что найдена хотя бы одна панорама.
            if (panoramas.length > 0) {
                // Создаем плеер с одной из полученных панорам.
                var player = new ymaps.panorama.Player(
                    "player1",
                    // Панорамы в ответе отсортированы по расстоянию
                    // от переданной в panorama.locate точки. Выбираем первую,
                    // она будет ближайшей.
                    panoramas[0],
                    // Зададим направление взгляда, отличное от значения
                    // по умолчанию.
                    { direction: [256, 16] }
                );
            }
        },
        function (error) {
            // Если что-то пошло не так, сообщим об этом пользователю.
            alert(error.message);
        }
    );

    // Для добавления панорамы на страницу также можно воспользоваться
    // методом panorama.createPlayer. Этот метод ищет ближайщую панораму и
    // в случае успеха создает плеер с найденной панорамой.
    ymaps.panorama
        .createPlayer(
            "player2",
            [59.938557, 30.316198],
            // Ищем воздушную панораму.
            { layer: "yandex#airPanorama" }
        )
        .done(function (player) {
            // player – это ссылка на экземпляр плеера.
        });
});