0

Помогите разобраться. Хочу добавить панораму на свою карту на своем сайте. Есть идея добавить метку на карту и при нажатии на него открывается панорама. Не знаю как это сделать с технической стороны. Может, кто знает? Или есть какие-нибудь другие способы добавить панораму на карту?

1
  • Давайте хотя бы скриншот того что хотите сделать. Commented 19 янв. 2018 в 7:48

1 ответ 1

1

В JS API Яндекс.Карт есть функциональность для добавления плеера панорам на сайт. Подробное руководство есть в документации и там же интерактивные примеры:

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

Как сделать панораму из собственных снимков

Как отобразить панораму в балуне метки

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

Вот простейший пример создания плеера панорам:

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

});
html,
body,
.player {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;load=package.full"></script>
<div id="player1" class="player"></div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.