Все готово!

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

Активация Google Maps JavaScript API

Чтобы помочь вам освоиться, мы покажем, как выполнить некоторые необходимые действия в консоли разработчика Google:

  1. Создание или выбор проекта
  2. Активация Google Maps JavaScript API и связанных служб
  3. Создание соответствующих ключей

Служба Street View

Обзор

Google Street View предоставляет круговые панорамы из указанных мест в пределах области покрытия. Область покрытия Street View API такая же, как и у приложения Google Maps (https://maps.google.com/). Список поддерживаемых городов для Street View доступен на[сайте Google Maps].

Ниже показан пример панорамы Street View.


Google Maps JavaScript API предоставляет службу Street View для получения и работы с изображениями, используемыми в Google Maps Street View. Служба Street View поддерживается встроенными возможностями браузера.

Использование карт с панорамами Street View

Хотя службу Street View можно использовать в отдельных элементах DOM, она наиболее полезна при указании точек на карте. По умолчанию служба Street View на карте включена, а элемент управления Pegman для этой службы интегрирован в панель навигации (масштаб и панорамирование). Этот элемент управления можно скрыть в свойствах карты MapOptions, установив для параметра streetViewControl значение false. Также вы можете изменить положение элемента управления Street View по умолчанию, установив для свойства streetViewControlOptions.position объекта Map новое значение ControlPosition.

Элемент управления Pegman службы Street View позволяет просматривать панорамы Street View непосредственно на карте. Когда пользователь нажимает его и удерживает кнопку нажатой, улицы с панорамами Street View обводятся синим контуром, как в интерфейсе приложения Google Maps.

Когда пользователь устанавливает маркер Pegman на улицу, на карте отображается панорама Street View для указанного места.

Панорамы Street View

Панорамы Street View отображаются с помощью объекта StreetViewPanorama, который предоставляет API со средством просмотра панорам Street View. Каждая карта содержит панораму Street View, вызываемую по умолчанию методом карты getStreetView(). Когда вы добавляете на карту элемент управления Street View, устанавливая для параметра streetViewControl значение true, вы автоматически соединяете элемент управления Pegman с этой панорамой Street View, вызываемой по умолчанию.

Вы также можете создать собственный объект StreetViewPanorama и настроить карту так, чтобы она использовала его вместо объекта по умолчанию. Для этого нужно явно указать этот объект в свойстве streetView карты. Вы можете заменить стандартную панораму, если хотите изменить поведение по умолчанию, например автоматическое общее использование наложений картой и панорамой. (См. раздел Наложения в панорамах Street View ниже).

Контейнеры Street View

Панорамы StreetViewPanorama также можно отображать в отдельных элементах DOM (обычно используются элементы <div>). Для этого просто передайте элемент DOM в конструкторе StreetViewPanorama. Для оптимального вывода изображений мы рекомендуем минимальный размер 200 х 200 пикселей.

Примечание. Хотя функция Street View разработана для использования с картой, это не обязательно. Вы можете использовать объекты Street View отдельно от карты.

Места Street View и точка обзора

Конструктор StreetViewPanorama также позволяет устанавливать места Street View и точки обзора с помощью параметра StreetViewOptions. Для изменения места и точки обзора вы можете вызывать для объекта методы setPosition() и setPov() после его создания.

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

  • heading (по умолчанию 0) – определяет угол поворота вокруг местоположения камеры в градусах от истинного севера. Направление измеряется по часовой стрелке (90 градусов соответствует истинному востоку).
  • pitch (по умолчанию 0) – определяет угол наклона камеры (вверх или вниз) от положения по умолчанию, которое в большинстве случаев (но не всегда) является горизонтальным. (Например, при съемке панорамы на холме угол наклона по умолчанию не будет горизонтальным.) При указании угла наклона положительное значение означает направление вверх (до +90 градусов вверх перпендикулярно углу наклона по умолчанию), а отрицательное – направление вниз (до -90 градусов вниз перпендикулярно углу наклона по умолчанию).

Объект StreetViewPov чаще всего используется для определения точки обзора камеры Street View. Вы также можете указать точку обзора фотографа – обычно это направление движения автомобиля или велосипеда. Для этого нужно использовать метод StreetViewPanorama.getPhotographerPov().

Следующий код отображает карту Бостона с исходным видом на парк Фенвей. Если выбрать элемент управления Pegman и перетащить его в поддерживаемое место на карте, панорама Street View изменится:

function initialize() {
  var fenway = {lat: 42.345573, lng: -71.098326};
  var map = new google.maps.Map(document.getElementById('map'), {
    center: fenway,
    zoom: 14
  });
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: fenway,
        pov: {
          heading: 34,
          pitch: 10
        }
      });
  map.setStreetView(panorama);
}
<div id="map"></div>
<div id="pano"></div>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map, #pano {
  float: left;
  height: 100%;
  width: 45%;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>
function initialize() {
  var fenway = {lat: 42.345573, lng: -71.098326};
  var map = new google.maps.Map(document.getElementById('map'), {
    center: fenway,
    zoom: 14
  });
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: fenway,
        pov: {
          heading: 34,
          pitch: 10
        }
      });
  map.setStreetView(panorama);
}

Просмотр примера (streetview-simple.html).

Отслеживание движения на мобильных устройствах

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

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

  • Включение или отключение функции отслеживания движения. Отслеживание движения включено по умолчанию на всех поддерживающих его устройствах. В следующем примере кода отключается отслеживание движения, но элемент управления отслеживанием движения остается видимым. (Пользователь может включить отслеживание движения, нажав элемент управления).
    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTracking: false
        });
    
  • Скрытие или отображение элемента управления отслеживанием движения. Элемент управления по умолчанию отображается на устройствах, которые поддерживают отслеживание движения. Пользователь может коснуться элемента управления, чтобы включить или отключить отслеживание движения. Если устройство не поддерживает отслеживание движения, элемент управления не отображается вне зависимости от значения параметра motionTrackingControl.

    В следующем примере кода отключаются отслеживание движения и элемент управления отслеживанием движения. В этом случае пользователь не может включить отслеживание движения.

    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTracking: false,
          motionTrackingControl: false
        });
    
  • Изменение положения по умолчанию элемента управления отслеживанием движения. Элемент управления по умолчанию отображается в нижнем правом углу панорамы (позиция RIGHT_BOTTOM). В следующем примере кода устанавливается позиция элемента управления в левом нижнем углу.
    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTrackingControlOptions: {
            position: google.maps.ControlPosition.LEFT_BOTTOM
          }
        });
    

Чтобы увидеть, как работает отслеживание движения, просмотрите следующий пример на мобильном устройстве (или любом другом устройстве, поддерживающем события изменния ориентации устройства):


Просмотр примера на новой странице (streetview-embed.html).

Наложения в панорамах Street View

Используемый по умолчанию объект StreetViewPanorama обеспечивает встроенную поддержку отображения наложений карты. Наложения обычно отображаются на уровне улиц и прикреплены к позициям LatLng. (Например, указатели отображаемых маркеров крепятся к горизонтальной плоскости места на панораме Street View.)

В настоящее время панорамы Street View поддерживают только следующие типы наложений: Marker, InfoWindow и собственные OverlayView. Наложения, отображаемые на карте, могут быть выведены на панораме Street View, если воспринимать ее, как замену объекта Map. Для этого нужно вызвать метод setMap() и передать в него аргумент StreetViewPanorama вместо карты. Также в панорамах Street View можно открывать информационные окна, передавая в метод open() аргумент StreetViewPanorama() вместо карты.

Кроме того, при создании карты со стандартным объектом StreetViewPanorama все создаваемые на карте маркеры автоматически отображаются на связанной с картой панораме Street View при условии, что эта панорама видимая. Чтобы получить панораму Street View по умолчанию, нужно вызвать метод getStreetView() для объекта Map. Если явно установить для свойства streetView карты значение StreetViewPanorama с собственной панорамой, то стандартная панорама будет заменена и автоматическое общее использование наложений будет отключено.

В следующем примере показаны маркеры, обозначающие различные места в районе Астор Плейс в Нью-Йорке (США). Переключите изображение на просмотр улиц для отображения общих маркеров в панораме StreetViewPanorama.

var panorama;

function initMap() {
  var astorPlace = {lat: 40.729884, lng: -73.990988};

  // Set up the map
  var map = new google.maps.Map(document.getElementById('map'), {
    center: astorPlace,
    zoom: 18,
    streetViewControl: false
  });

  // Set up the markers on the map
  var cafeMarker = new google.maps.Marker({
      position: {lat: 40.730031, lng: -73.991428},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
      title: 'Cafe'
  });

  var bankMarker = new google.maps.Marker({
      position: {lat: 40.729681, lng: -73.991138},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
      title: 'Bank'
  });

  var busMarker = new google.maps.Marker({
      position: {lat: 40.729559, lng: -73.990741},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
      title: 'Bus Stop'
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView();
  panorama.setPosition(astorPlace);
  panorama.setPov(/** @type {google.maps.StreetViewPov} */({
    heading: 265,
    pitch: 0
  }));
}

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}
<div id="floating-panel">
  <input type="button" value="Toggle Street View" onclick="toggleStreetView();"></input>
</div>
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  margin-left: -100px;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
var panorama;

function initMap() {
  var astorPlace = {lat: 40.729884, lng: -73.990988};

  // Set up the map
  var map = new google.maps.Map(document.getElementById('map'), {
    center: astorPlace,
    zoom: 18,
    streetViewControl: false
  });

  // Set up the markers on the map
  var cafeMarker = new google.maps.Marker({
      position: {lat: 40.730031, lng: -73.991428},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
      title: 'Cafe'
  });

  var bankMarker = new google.maps.Marker({
      position: {lat: 40.729681, lng: -73.991138},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
      title: 'Bank'
  });

  var busMarker = new google.maps.Marker({
      position: {lat: 40.729559, lng: -73.990741},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
      title: 'Bus Stop'
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView();
  panorama.setPosition(astorPlace);
  panorama.setPov(/** @type {google.maps.StreetViewPov} */({
    heading: 265,
    pitch: 0
  }));
}

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

Просмотр примера (streetview-overlays.html).

События Street View

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

  • pano_changed – возникает при изменении идентификатора отдельной панорамы. Это событие не указывает на изменение каких-либо данных панорамы (например, ссылок), в момент его возникновения. Оно лишь указывает на то, что идентификатор панорамы изменился. Идентификатор панорамы (который можно использовать для ссылки на эту панораму) остается постоянным только в текущем сеансе браузера.
  • position_changed – возникает при изменении позиции панорамы (LatLng). При повороте панорамы это событие не возникает. Вы можете изменить позицию панорамы, не меняя ее идентификатор, поскольку API автоматически привязывает ближайший идентификатор панорамы к позиции панорамы.
  • pov_changed – возникает при изменении параметра StreetViewPov панорамы Street View. Это событие может возникнуть, даже если позиция и идентификатор панорамы остаются без изменений.
  • links_changed – возникает при изменении ссылок панорамы Street View. Это событие может возникнуть асинхронно после сообщения об изменении идентификатора панорамы в событии pano_changed.
  • visible_changed – возникает при изменении видимости панорамы Street View. Это событие может возникнуть асинхронно после сообщения об изменении идентификатора панорамы в событии pano_changed.

В следующем примере кода показано, как эти события могут обрабатываться для сбора данных о соответствующей панораме StreetViewPanorama:

function initPano() {
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat: 37.869, lng: -122.255},
        pov: {
          heading: 270,
          pitch: 0
        },
        visible: true
  });

  panorama.addListener('pano_changed', function() {
      var panoCell = document.getElementById('pano-cell');
      panoCell.innerHTML = panorama.getPano();
  });

  panorama.addListener('links_changed', function() {
      var linksTable = document.getElementById('links_table');
      while (linksTable.hasChildNodes()) {
        linksTable.removeChild(linksTable.lastChild);
      }
      var links = panorama.getLinks();
      for (var i in links) {
        var row = document.createElement('tr');
        linksTable.appendChild(row);
        var labelCell = document.createElement('td');
        labelCell.innerHTML = '<b>Link: ' + i + '</b>';
        var valueCell = document.createElement('td');
        valueCell.innerHTML = links[i].description;
        linksTable.appendChild(labelCell);
        linksTable.appendChild(valueCell);
      }
  });

  panorama.addListener('position_changed', function() {
      var positionCell = document.getElementById('position-cell');
      positionCell.firstChild.nodeValue = panorama.getPosition() + '';
  });

  panorama.addListener('pov_changed', function() {
      var headingCell = document.getElementById('heading-cell');
      var pitchCell = document.getElementById('pitch-cell');
      headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
      pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
  });
}
<div id="pano"></div>
<div id="floating-panel">
<table>
  <tr>
    <td><b>Position</b></td><td id="position-cell">&nbsp;</td>
  </tr>
  <tr>
    <td><b>POV Heading</b></td><td id="heading-cell">270</td>
  </tr>
  <tr>
    <td><b>POV Pitch</b></td><td id="pitch-cell">0.0</td>
  </tr>
  <tr>
    <td><b>Pano ID</b></td><td id="pano-cell">&nbsp;</td>
  </tr>
  <table id="links_table"></table>
</table>
</div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#pano {
  width: 50%;
  height: 100%;
  float: left;
}
#floating-panel {
  width: 45%;
  height: 100%;
  float: right;
  text-align: left;
  overflow: auto;
  position: static;
  border: 0px solid #999;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano">
</script>
function initPano() {
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat: 37.869, lng: -122.255},
        pov: {
          heading: 270,
          pitch: 0
        },
        visible: true
  });

  panorama.addListener('pano_changed', function() {
      var panoCell = document.getElementById('pano-cell');
      panoCell.innerHTML = panorama.getPano();
  });

  panorama.addListener('links_changed', function() {
      var linksTable = document.getElementById('links_table');
      while (linksTable.hasChildNodes()) {
        linksTable.removeChild(linksTable.lastChild);
      }
      var links = panorama.getLinks();
      for (var i in links) {
        var row = document.createElement('tr');
        linksTable.appendChild(row);
        var labelCell = document.createElement('td');
        labelCell.innerHTML = '<b>Link: ' + i + '</b>';
        var valueCell = document.createElement('td');
        valueCell.innerHTML = links[i].description;
        linksTable.appendChild(labelCell);
        linksTable.appendChild(valueCell);
      }
  });

  panorama.addListener('position_changed', function() {
      var positionCell = document.getElementById('position-cell');
      positionCell.firstChild.nodeValue = panorama.getPosition() + '';
  });

  panorama.addListener('pov_changed', function() {
      var headingCell = document.getElementById('heading-cell');
      var pitchCell = document.getElementById('pitch-cell');
      headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
      pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
  });
}

Просмотр примера (streetview-events.html).

Элементы управления Street View

При отображении панорамы StreetViewPanorama на ней по умолчанию отображаются различные элементы управления. Эти элементы управления можно включить или отключить, установив в соответствующие поля параметров StreetViewPanoramaOptions значения true или false:

  • panControl – обеспечивает возможность вращения панорамы. Этот элемент управления отображается по умолчанию как стандартный встроенный компас и элемент управления панорамированием. Вы можете изменить положение элемента управления, используя параметр PanControlOptions в поле panControlOptions.
  • zoomControl – позволяет увеличивать изображение. По умолчанию этот элемент управления отображается в районе правого нижнего угла панорамы. Вы можете изменить вид этого элемента управления, используя параметр ZoomControlOptions в поле zoomControlOptions.
  • addressControl – выводит текстовое наложение, которое указывает адрес соответствующего места и содержит ссылку, позволяющую открыть это место в Google Maps. Вы можете изменить внешний вид элемента управления, используя параметр StreetViewAddressControlOptions в поле addressControlOptions.
  • Элемент управления fullscreenControl позволяет открыть панораму Street View в полноэкранном режиме. Вид элемента управления можно изменить, используя параметры FullscreenControlOptions в поле fullscreenControlOptions.
  • Элемент управления motionTrackingControl позволяет включить или отключить отслеживание движения на мобильных устройствах. Он отображается только на устройствах, поддерживающих события изменения ориентации устройства. По умолчанию элемент управления отображается в правом нижнем углу панорамы. Положение элемента управления можно изменить с помощью параметров MotionTrackingControlOptions. Дополнительную информацию см. в разделе по отслеживанию движения.
  • linksControl – стрелки направления, позволяющие переместиться на соседние изображения панорамы.
  • Элемент управления Close позволяет пользователю закрыть средство просмотра панорам Street View. Вы можете включить или отключить элемент управления Close, установив для параметра enableCloseButton значение true или false.

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

Просмотреть пример в полноэкранном режиме.

function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('map'), {
        position: {lat: 42.345573, lng: -71.098326},
        addressControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        linksControl: false,
        panControl: false,
        enableCloseButton: false
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano">
</script>
function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('map'), {
        position: {lat: 42.345573, lng: -71.098326},
        addressControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        linksControl: false,
        panControl: false,
        enableCloseButton: false
  });
}

Просмотр примера (streetview-controls.html).

Прямой доступ к данным Street View

Доступность данных Street View можно определить программным способом. Также можно получить информацию об определенных панорамах без прямых манипуляций с картой или панорамой. Для этого можно использовать объект StreetViewService, обеспечивающий интерфейс для работы с данными, которые хранятся в службе Google Street View.

Запросы службы Street View

Доступ к службе Street View осуществляется асинхронно, поскольку интерфейсу Google Maps API требуется отправить вызов на внешний сервер. Поэтому вам необходимо передать метод обратного вызова, который будет выполнен после завершения запроса. Этот метод обратного вызова обрабатывает результаты.

Вы можете направлять в службу StreetViewService два типа запросов:

  • Запрос StreetViewPanoRequest возвращает данные панорамы по уникальному идентификатору панорамы. Уникальные идентификаторы остаются постоянными только пока существуют изображения соответствующей панорамы.
  • Запрос StreetViewLocationRequest выполняет поиск данных панорамы в области, заданной с помощью параметра LatLng.

Ответы службы Street View

Методу getPanorama() требуется запустить функцию обратного вызова после получения результатов от службы Street View. Эта функция обратного вызова возвращает набор данных панорамы в объекте StreetViewPanoramaData и код StreetViewStatus, обозначающий состояние запроса (именно в этом порядке).

Определение объекта StreetViewPanoramaData содержит метаданные панорамы Street View в следующем виде:

{
  "location": {
    "latLng": LatLng,
    "description": string,
    "pano": string
  },
  "copyright": string,
  "links": [{
      "heading": number,
      "description": string,
      "pano": string,
      "roadColor": string,
      "roadOpacity": number
    }],
  "tiles": {
    "worldSize": Size,
    "tileSize": Size,
    "centerHeading": number
  }
}

Этот объект данных сам по себе не является объектом StreetViewPanorama. Для создания объекта Street View на основе этих данных нужно создать объект StreetViewPanorama и вызвать метод setPano(), передав ему идентификатор, указанный в возвращаемом поле location.pano.

Код status может возвращать одно из следующих значений:

  • OK – указывает, что служба нашла панораму, соответствующую запросу.
  • ZERO_RESULTS – указывает, что службе не удалось найти панораму, соответствующую критериям запроса.
  • UNKNOWN_ERROR – указывает, что запрос Street View не удалось обработать по неизвестной причине.

Следующий код создает объект StreetViewService, который реагирует на нажатия карты пользователем, создавая маркеры, при нажатии которых отображается панорама StreetViewPanorama для соответствующего места. В коде используется содержимое панорамы StreetViewPanoramaData, возвращаемое службой.

/*
 * Click the map to set a new location for the Street View camera.
 */

var map;
var panorama;

function initMap() {
  var berkeley = {lat: 37.869085, lng: -122.254775};
  var sv = new google.maps.StreetViewService();

  panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));

  // Set up the map.
  map = new google.maps.Map(document.getElementById('map'), {
    center: berkeley,
    zoom: 16,
    streetViewControl: false
  });

  // Set the initial Street View camera to the center of the map
  sv.getPanorama({location: berkeley, radius: 50}, processSVData);

  // Look for a nearby Street View panorama when the map is clicked.
  // getPanoramaByLocation will return the nearest pano when the
  // given radius is 50 meters or less.
  map.addListener('click', function(event) {
    sv.getPanorama({location: event.latLng, radius: 50}, processSVData);
  });
}

function processSVData(data, status) {
  if (status === 'OK') {
    var marker = new google.maps.Marker({
      position: data.location.latLng,
      map: map,
      title: data.location.description
    });

    panorama.setPano(data.location.pano);
    panorama.setPov({
      heading: 270,
      pitch: 0
    });
    panorama.setVisible(true);

    marker.addListener('click', function() {
      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID.
      panorama.setPano(markerPanoID);
      panorama.setPov({
        heading: 270,
        pitch: 0
      });
      panorama.setVisible(true);
    });
  } else {
    console.error('Street View data not found for this location.');
  }
}
<div id="map" style="width: 45%; height: 100%;float:left"></div>
<div id="pano" style="width: 45%; height: 100%;float:left"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
/*
 * Click the map to set a new location for the Street View camera.
 */

var map;
var panorama;

function initMap() {
  var berkeley = {lat: 37.869085, lng: -122.254775};
  var sv = new google.maps.StreetViewService();

  panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));

  // Set up the map.
  map = new google.maps.Map(document.getElementById('map'), {
    center: berkeley,
    zoom: 16,
    streetViewControl: false
  });

  // Set the initial Street View camera to the center of the map
  sv.getPanorama({location: berkeley, radius: 50}, processSVData);

  // Look for a nearby Street View panorama when the map is clicked.
  // getPanoramaByLocation will return the nearest pano when the
  // given radius is 50 meters or less.
  map.addListener('click', function(event) {
    sv.getPanorama({location: event.latLng, radius: 50}, processSVData);
  });
}

function processSVData(data, status) {
  if (status === 'OK') {
    var marker = new google.maps.Marker({
      position: data.location.latLng,
      map: map,
      title: data.location.description
    });

    panorama.setPano(data.location.pano);
    panorama.setPov({
      heading: 270,
      pitch: 0
    });
    panorama.setVisible(true);

    marker.addListener('click', function() {
      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID.
      panorama.setPano(markerPanoID);
      panorama.setPov({
        heading: 270,
        pitch: 0
      });
      panorama.setVisible(true);
    });
  } else {
    console.error('Street View data not found for this location.');
  }
}

Просмотр примера (streetview-service.html).

Предоставление собственных панорам Street View

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

Для настройки набора собственных изображений панорам необходимо выполнить следующие шаги:

  • Создайте базовое панорамное изображение для каждой собственной панорамы. Это базовое изображение должно иметь самое высокое разрешение, требуемое для желаемого уровня масштабирования.
  • Необязательный, но рекомендуемый шаг – создайте набор листов панорам с разными уровнями масштабирования на основе базового изображения.
  • Создайте ссылки между собственными панорамами.
  • Необязательный шаг – определите "входные" панорамы из существующих изображений Google Street View и настройте ссылки между стандартным и собственным наборами панорам.
  • Определите метаданные каждого панорамного изображения в объекте StreetViewPanoramaData.
  • Реализуйте метод, определяющий собственные данные и изображения панорамы, и укажите этот метод в качестве собственного обработчика в объекте StreetViewPanorama.

Данная процедура разъясняется в следующих разделах.

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

Каждая панорама Street View представляет собой изображение или набор изображений, которые обеспечивают полный круговой обзор из одной точки. Объект StreetViewPanorama использует изображения, соответствующие равнопромежуточной проекции (проекции Плате-Карре). Такая проекция содержит 360-градусный горизонтальный обзор (полный оборот) и 180-градусный вертикальный обзор (от направления строго вверх до направления строго вниз). С этими полями обзора получается изображение с соотношением сторон 2:1. Ниже показана панорама с круговым обзором.

Панорамные изображения обычно получаются из нескольких снимков, сделанных из одной точки и соединенных с помощью панорамного программного обеспечения. (Дополнительную информацию см. в статье Comparison of photo stitching applications в Википедии.) Точка съемки всех изображений панорамы должны быть одной и той же. Полученная 360-градусная панорама определяет проекцию на сфере с помощью переноса изображения на двухмерную поверхность этой сферы.

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

Создание собственных листов панорам

Street View также поддерживает разные уровни детализации изображений, используя элемент управления масштабированием стандартного представления. Обычно служба Street View предоставляет пять уровней масштабирования любого изображения панорамы. Если бы для всех уровней масштабирования использовалось одно изображение, оно должно было бы иметь довольно большой размер, что замедлило бы работу приложения, или очень низкое разрешение при высоких уровнях масштабирования, от чего пострадало бы качество изображения. К счастью, для панорам можно использовать такую же систему изображений, как и для листов карт Google, предоставляя изображения в соответствующем разрешении для каждого уровня масштабирования.

При первой загрузке StreetViewPanorama по умолчанию выводится изображение размером 25% (90 градусов угла обзора) от ширины панорамы при уровне масштабирования 1. Это изображение примерно соответствует обычному полю зрения человека. При уменьшении стандартного изображения поле и угол обзора расширяются, а при увеличении – сокращаются. StreetViewPanorama автоматически рассчитывает поле обзора для выбранного уровня масштабирования и выбирает наиболее подходящие изображения для этого разрешения, используя набор листов, примерно соответствующий размерам горизонтального поля обзора. Уровням масштабирования Street View соответствуют следующие поля обзора:

Уровень масштабирования Street View Поле обзора (градусы)
0 180
1 (по умолчанию) 90
2 45
3 22,5
4 11,25

Размер изображения панорамы Street View полностью зависит от экранного размера (ширины) контейнера Street View. Если указать более широкий контейнер, служба будет использовать одно и тоже поле обзора для любого указанного уровня масштабирования, хотя при этом она может выбирать листы, более подходящие для соответствующего разрешения.

Поскольку каждая панорама использует равнопромежуточную проекцию, создавать листы панорамы довольно просто. Поскольку проекция предоставляет изображение с соотношением сторон 2:1, проще использовать листы с таким же соотношением, хотя квадратные листы могут обеспечить более высокую производительность на квадратных картах (поскольку поле обзора будет квадратным).

При использовании листов с соотношением сторон 2:1 на уровне масштабирования 0 вся панорама состоит из одного изображения (базовое изображение). Каждый следующий уровень масштабирования выводит 4zoomLevel листов. (Например, на уровне масштабирования 2 панорама состоит из 16 листов.) Примечание. Уровни масштабирования в листах Street View не связаны напрямую с уровнями масштабирования, указанными с помощью элемента управления Street View. При установке уровня масштабирования Street View с помощью элемента управления выбирается поле обзора, по которому выбираются соответствующие листы.

Обычно листам изображения присваивают имена, позволяющие выбрать их программным образом. Схема присвоения имен описывается ниже в разделе Работа с запросами собственных панорам.

Работа с запросами собственных панорам

Использование собственных панорам указывается регистрацией собственного метода панорам в поле panoProvider объекта StreetViewPanoramaOptions или явным вызовом метода StreetViewPanorama.registerPanoProvider(). Метод поставщика панорам представляет собой функцию, которая возвращает объект StreetViewPanoramaData и имеет следующий синтаксис:

Function(pano,zoom,tileX,tileY):StreetViewPanoramaData

Объект StreetViewPanoramaData имеет следующий вид:

{
  copyright: string,
  location: {
    description: string,
    latLng: google.maps.LatLng,
    pano: string
  },
  tiles: {
    tileSize: google.maps.Size,
    worldSize: google.maps.Size,
    heading: number,
    getTileUrl: Function
  },
  links: [
    description: string,
    heading: number,
    pano: string,
    roadColor: string,
    roadOpacity: number
  ]
}

Для отображения собственной панорамы можно просто установить собственное значение свойства pano объекта StreetViewPanorama, установить параметр panoProvider и передать значение pano в метод поставщика собственной панорамы, который создает объект StreetViewPanoramaData и возвращает его.

Примечание. Если вы хотите отобразить собственную панораму, не нужно явно устанавливать значение position для панорамы StreetViewPanorama, поскольку в этом случае служба Street View запросит стандартное изображение Street View рядом с указанным местом. Вместо этого установите нужную позицию в поле location.latLng собственного объекта StreetViewPanoramaData.

В следующем примере показана собственная панорама офиса Google в Сиднее. Обратите внимание на то, что здесь мы вообще не используем карту (или стандартные изображения Street View).

function initPano() {
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function. Set the StreetView to display
  // the custom panorama 'reception' which we check for below.
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('map'), {
      pano: 'reception',
      visible: true,
      panoProvider: getCustomPanorama
  });
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
  // Note: robust custom panorama methods would require tiled pano data.
  // Here we're just using a single tile, set to the tile size and equal
  // to the pano "world" size.
  return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/panoReception1024-0.jpg';
}

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano, zoom, tileX, tileY) {
  if (pano === 'reception') {
    return {
      location: {
        pano: 'reception',
        description: 'Google Sydney - Reception'
      },
      links: [],
      // The text for the copyright control.
      copyright: 'Imagery (c) 2010 Google',
      // The definition of the tiles for this panorama.
      tiles: {
        tileSize: new google.maps.Size(1024, 512),
        worldSize: new google.maps.Size(1024, 512),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl
      }
    };
  }
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano">
</script>
function initPano() {
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function. Set the StreetView to display
  // the custom panorama 'reception' which we check for below.
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('map'), {
      pano: 'reception',
      visible: true,
      panoProvider: getCustomPanorama
  });
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
  // Note: robust custom panorama methods would require tiled pano data.
  // Here we're just using a single tile, set to the tile size and equal
  // to the pano "world" size.
  return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/panoReception1024-0.jpg';
}

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano, zoom, tileX, tileY) {
  if (pano === 'reception') {
    return {
      location: {
        pano: 'reception',
        description: 'Google Sydney - Reception'
      },
      links: [],
      // The text for the copyright control.
      copyright: 'Imagery (c) 2010 Google',
      // The definition of the tiles for this panorama.
      tiles: {
        tileSize: new google.maps.Size(1024, 512),
        worldSize: new google.maps.Size(1024, 512),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl
      }
    };
  }
}

Просмотр примера (streetview-custom-simple.html).

Обратите внимание, что в предыдущем примере было возвращено только одно изображение, и что при увеличении его разрешение было низким. Вместо этого мы могли бы использовать набор листов, создав их изображения и изменив panoProvider для возврата листов с учетом переданного идентификатора панорамы, уровня масштабирования и координат листа панорамы.

Поскольку выбор изображения зависит от этих переданных значений, рекомендуется дать изображениям имена, которые можно выбрать программным способом по переданным значениям, например, pano_zoom_tileX_tileY.png.

Следующий пример немного дополнен и включает два уровня увеличения. Он также добавляет еще одну стрелку к изображению в дополнение к стандартным стрелкам навигации Street View. Эта стрелка указывает на офис Google в г. Сидней и содержит ссылку на собственные изображения:

var panorama;

// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
var outsideGoogle;

// StreetViewPanoramaData for a custom panorama: the Google Sydney reception.
function getReceptionPanoramaData() {
  return {
    location: {
      pano: 'reception',  // The ID for this custom panorama.
      description: 'Google Sydney - Reception',
      latLng: new google.maps.LatLng(-33.86684, 151.19583)
    },
    links: [{
      heading: 195,
      description: 'Exit',
      pano: outsideGoogle.location.pano
    }],
    copyright: 'Imagery (c) 2010 Google',
    tiles: {
      tileSize: new google.maps.Size(1024, 512),
      worldSize: new google.maps.Size(2048, 1024),
      centerHeading: 105,
      getTileUrl: function(pano, zoom, tileX, tileY) {
        return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/' +
            'panoReception1024-' + zoom + '-' + tileX + '-' + tileY + '.jpg';
      }
    }
  };
}

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
      document.getElementById('street-view'),
      {
        pano: outsideGoogle.location.pano,
        // Register a provider for our custom panorama.
        panoProvider: function(pano) {
          if (pano === 'reception') {
            return getReceptionPanoramaData();
          }
        }
      });

  // Add a link to our custom panorama from outside the Google Sydney office.
  panorama.addListener('links_changed', function() {
    if (panorama.getPano() === outsideGoogle.location.pano) {
      panorama.getLinks().push({
        description: 'Google Sydney',
        heading: 25,
        pano: 'reception'
      });
    }
  });
}

function initialize() {
  // Use the Street View service to find a pano ID on Pirrama Rd, outside the
  // Google office.
  var streetviewService = new google.maps.StreetViewService;
  streetviewService.getPanorama(
      {location: {lat: -33.867386, lng: 151.195767}},
      function(result, status) {
        if (status === 'OK') {
          outsideGoogle = result;
          initPanorama();
        }
      });
}
<div id="street-view"></div>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#street-view {
  height: 100%;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>
var panorama;

// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
var outsideGoogle;

// StreetViewPanoramaData for a custom panorama: the Google Sydney reception.
function getReceptionPanoramaData() {
  return {
    location: {
      pano: 'reception',  // The ID for this custom panorama.
      description: 'Google Sydney - Reception',
      latLng: new google.maps.LatLng(-33.86684, 151.19583)
    },
    links: [{
      heading: 195,
      description: 'Exit',
      pano: outsideGoogle.location.pano
    }],
    copyright: 'Imagery (c) 2010 Google',
    tiles: {
      tileSize: new google.maps.Size(1024, 512),
      worldSize: new google.maps.Size(2048, 1024),
      centerHeading: 105,
      getTileUrl: function(pano, zoom, tileX, tileY) {
        return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/' +
            'panoReception1024-' + zoom + '-' + tileX + '-' + tileY + '.jpg';
      }
    }
  };
}

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
      document.getElementById('street-view'),
      {
        pano: outsideGoogle.location.pano,
        // Register a provider for our custom panorama.
        panoProvider: function(pano) {
          if (pano === 'reception') {
            return getReceptionPanoramaData();
          }
        }
      });

  // Add a link to our custom panorama from outside the Google Sydney office.
  panorama.addListener('links_changed', function() {
    if (panorama.getPano() === outsideGoogle.location.pano) {
      panorama.getLinks().push({
        description: 'Google Sydney',
        heading: 25,
        pano: 'reception'
      });
    }
  });
}

function initialize() {
  // Use the Street View service to find a pano ID on Pirrama Rd, outside the
  // Google office.
  var streetviewService = new google.maps.StreetViewService;
  streetviewService.getPanorama(
      {location: {lat: -33.867386, lng: 151.195767}},
      function(result, status) {
        if (status === 'OK') {
          outsideGoogle = result;
          initPanorama();
        }
      });
}

Просмотр примера (streetview-custom-tiles.html).

Оставить отзыв о...

Текущей странице
Google Maps JavaScript API
Google Maps JavaScript API
Нужна помощь? Обратитесь в службу поддержки.