Несколько примеров использования Street View от Google Maps

Несколько примеров использования Street View от Google Maps

21 февраля 2012 года использовать сервис Street View от Google Maps стало возможно в России. Были выложены отснятые панарамы Москвы, Санкт-Петербурга, а также и других населенных пунктов: Химки, Мытищи, Подольск, Домодедово, Петергоф, Пушкин, Павловск, Кронштадт и Ломоносов.

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

Первый вариант, это использование специального элемента управления (оранжевого человечка).

Сразу после загрузки страницы с примером, мы наблюдаем карту Санкт-Петербурга.

Стандартно, с левой стороны мы видим элементы управления картой.

Над элементом управления масштабом карты расположен рисунок в виде оранжевого человечка.

Если подвести к нему курсор мыши, то он откланяется, нажав левую кнопку мыши мы можем тащить его на карту.

В это время все улицы, для которых существуют панорамы подсвечиваются синим цветом, мы опускаем человечка в нужном месте и наблюдаем панораму данной улицы.

Код файла примера:

<!DOCTYPE html> <html DIR="LTR" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Пример Google Maps JavaScript API v3 - слой просмотра улиц (Street View)</title> <link rel="nofollow" href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <script type="text/javascript"> function initialize() < var moscow = new google.maps.LatLng(59.933836,30.307698); var mapOptions = < center: moscow, zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP >; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); > </script> </head> <body <div style="width: 800px; height: 600px"></div> </body> </html>

Второй пример, одновременное отображение двух окон — с картой и панорамой.

Код файла примера:

<!DOCTYPE html> <html DIR="LTR" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Пример Google Maps JavaScript API v3 - совместное отображение карты и слоя просмотра улиц (Street View)</title> <link rel="nofollow" href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <script type="text/javascript"> function initialize() < var moscow = new google.maps.LatLng(59.939448, 30.328264); var mapOptions = < center: moscow, zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP >; var map = new google.maps.Map( document.getElementById("map_canvas"), mapOptions); var panoramaOptions = < position: moscow, pov: < heading: 34, pitch: 10, zoom: 1 >>; var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions); map.setStreetView(panorama); > </script> </head> <body <div style="width: 600px; height: 400px; top: 5px;"></div> <div style="position:absolute; left:610px; top: 5px; width: 600px; height: 400px;"></div> </body> </html>

Обратите внимание, как задаются параметры для отображения панорамы.

Координаты определяют только позицию камеры, ее ориентация задается тремя свойствами:

heading (по умолчанию 0) – определяет угол поворота вокруг позиции камеры в градусах относительно истинного севера. Компасные курсы измеряются по часовой стрелке (90 градусов – истинный восток).

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

zoom (по умолчанию 1) – определяет уровень масштабирования данного просмотра (эффективно ограничивая поле зрения), где 0 означает полное уменьшение изображения. Большинство местоположений просмотра улиц поддерживают уровни масштабирования от 0 до 3 включительно.

Для нашего примера:

позиция камеры — 59.939448, 30.328264;

Третий пример, в котором расположение меток, мы задаем в виде массива координат.

При щелчке по метке, открывается информационное окно (балун) с панорамой в данной точке.

Четвертый пример, основное окно — панорама, в правом нижнем углу расположена миникарта для управления местоположением камеры.

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

Подробнее об использовании сервис Street View можно прочитать в документации

В заключении заметки несколько ссылок на виртуальные прогулки по многим парковым ансамблям и вокруг памятников архитектуры.

Москва и Московская область

Санкт-Петербург и Ленинградская область

Казань

Несколько примеров использования Street View от Google Maps : 4 комментария

Спасибо, отличные полезные вещи у вас, постоянно захожу смотреть новые вещи. Порадовали, очень нужная штука!

Спасибо автору! Только вопрос — можно ли это использовать на карте, кот. выводится в описании объекта каталога sobi2 (встроенной)? И если можно, то не могли бы вы пояснить, как? Большое спасибо.

В sobi2 используется карта API Google Maps v2, там со Street View нужно по другому работать, чем в API Google Maps v3. Вот ссылка на документацию

Здравствуйте, а возможно ли(если да, то как) добавить кнопку для полноэкранного просмотра панорам

📎📎📎📎📎📎📎📎📎📎