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 onload="initialize()">
<div id="map_canvas" 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 onload="initialize()">
<div id="map_canvas" style="width: 600px; height: 400px; top: 5px;"></div>
<div id="pano" 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;
heading — 34;
pitch — 10;
zoom — 1
Третий пример, в котором расположение меток, мы задаем в виде массива координат.
При щелчке по метке, открывается информационное окно (балун) с панорамой в данной точке.
Четвертый пример, основное окно — панорама, в правом нижнем углу расположена миникарта для управления местоположением камеры.
Пятый пример, при щелчке на маркере, отображается балун с панорамой и дополнительным элементом управления масштабом панорамы.
Подробнее об использовании сервис Street View можно прочитать в документации
Загрузить архив с файлами примеров
В заключении заметки несколько ссылок на виртуальные прогулки по многим парковым ансамблям и вокруг памятников архитектуры.
Москва и Московская область
- Московский Кремль и Красная площадь
- Государственный музей-заповедник «Царицыно»
- Усадьба Кусково
- Усадьба Коломенское
- Сад «Эрмитаж»
- Центральный парк культуры и отдыха имени Горького
- Музей техники Вадима Задорожного
- Парк на речном вокзале, Cеверный речной порт
- Свято-Троицкая Сергиева Лавра
- Церковь Знамения Пресвятой Богородицы в Дубровицах
- Храм святителя Митрофания Воронежского
- Благовещенский храм
Санкт-Петербург и Ленинградская область
Казань
Спасибо, отличные полезные вещи у вас, постоянно захожу смотреть новые вещи. Порадовали, очень нужная штука!
Спасибо автору! Только вопрос — можно ли это использовать на карте, кот. выводится в описании объекта каталога sobi2 (встроенной)? И если можно, то не могли бы вы пояснить, как? Большое спасибо.
В sobi2 используется карта API Google Maps v2, там со Street View нужно по другому работать, чем в API Google Maps v3.
Вот ссылка на документацию
Здравствуйте, а возможно ли(если да, то как) добавить кнопку для полноэкранного просмотра панорам