Обработка клика на маркере панорамы

Open in CodeSandbox

В этом примере показано, как можно подписаться на события плеера панорам и добавлять метки на карту при клике по маркерам панорамы.

У каждой карты есть менеджер панорам panorama.Manager, ссылку на который можно получить через метод getPanoramaManager(). С помощью методов этого менеджера можно включать и выключать поиск панорам на карте, открывать и скрывать плеер панорам и др.

После получения panorama.Player вы можете подписаться на события этого плеера. 

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Обработка клика на маркере панорамы</title>
        <meta charset="utf-8" />
        <!--
        Укажите свой 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_events.js"></script>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
            #map {
                width: 100%;
                height: 85%;
                padding: 0;
                margin: 0;
            }
            p {
                font-family: Sans-Serif;
                font-size: 12px;
                padding: 12px 0px 12px 10px;
                margin: 0px;
            }
        </style>
    </head>
    <body>
        <p>
            Нажмите на номер дома на панораме, чтобы добавить его на карту
        </p>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(function () {
    var myMap = new ymaps.Map("map", {
            center: [55.759142, 37.639987],
            zoom: 18,
            type: "yandex#map",
            controls: ["typeSelector"],
        }),
        // Создаём коллекцию, в которой будем хранить точки на карте.
        collection = new ymaps.GeoObjectCollection();
    // Добавляем коллекцию на карту.
    myMap.geoObjects.add(collection);

    // Получим менеджер панорамы карты.
    myMap.getPanoramaManager().then(function (manager) {
        // Включаем режим поиска панорам на карте.
        manager.enableLookup();
        // Открываем плеер панорам.
        manager.openPlayer(myMap.getCenter());
        // Подпишемся на событие открытия плеера панорам.
        manager.events.add("openplayer", function () {
            // Получим текущий плеер панорам.
            var player = manager.getPlayer();
            // При закрытии плеера или смене панорамы удаляем добавленные точки.
            player.events.add(["panoramachange", "destroy"], function () {
                collection.removeAll();
            });
            // При клике по свернутому маркеру добавим метку в коллекцию на карте.
            player.events.add("markerexpand", function (e) {
                // Получим координаты дома, по которому кликнул пользователь.
                var position = e.get("marker").getPosition(),
                    coords = position.slice(0, 2);

                // Добавим в коллекцию метку с координатами дома.
                collection.add(
                    new ymaps.Placemark(
                        coords,
                        {},
                        {
                            openBalloonOnClick: false,
                            iconLayout: "default#image",
                            iconImageHref: "circle.svg",
                            // Размеры метки.
                            iconImageSize: [10, 10],
                            // Смещение левого верхнего угла иконки относительно точки привязки.
                            iconImageOffset: [-5, -5],
                        }
                    )
                );
            });
            // При клике по раскрытому маркеру удалим метку из коллекции на карте.
            player.events.add("markercollapse", function (e) {
                // Получим координаты дома, по которому кликнул пользователь.
                var position = e.get("marker").getPosition(),
                    coords = position.slice(0, 2);
                // Найдём метку в коллекции по координатам и удалим её.
                collection.each(function (obj) {
                    if (
                        ymaps.util.math.areEqual(
                            obj.geometry.getCoordinates(),
                            coords
                        )
                    ) {
                        collection.remove(obj);
                    }
                });
            });
        });
    });
});