Олимпийские объекты в Сочи 2014 и виртуальная прогулка

Автор: | 07.02.2014

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

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

Этот выпуск выходит в день открытия олимпиады в Сочи, поэтому для примера я использовал олимпийские объекты.

Олимпиада в Сочи 2014 - олимпийские объекты+виртуальная прогулка

Посмотрите работу примера.

А также небольшую видео инструкцию.

В начале нужно провести сбор необходимых данных и сформировать из них файл в формате JSON.

Вот как выглядит фрагмент файла для одной метки:

{
"title": "Ледовый дворец Большой",
"address": "Имеретинская низменность, Олимпийский парк",
"panarama": "http://panoramas.api-maps.yandex.ru/embed/1.x/?lang=ru_RU&l=stv&ll=39.95093622%2C43.40308599&ost=dir%3A-38.30346628196356%2C0~spn%3A89.99999987427145%2C55.35115233836648",	
"lat": "43.404408",
"lng": "39.950054"
}

Поясню значение переменных:

title — название объекта;
address — адрес;
lat и lng — координаты метки;
panarama — код панорамы.

Давайте рассмотрим как формировать ссылку для панорамы.

Мы заходим на сервис Яндекс.Карты http://maps.yandex.ru

Находим на карте нужное место, включаем отображение панорам.

Выбираем необходимый ракурс и получаем код панорамы.

Он имеет следующий вид:

<script src="http://panoramas.api-maps.yandex.ru/embed/1.x/?lang=ru_RU&amp;l=stv&amp;ll=39.721906%2C43.58674474&amp;ost=dir%3A118.19604431016373%2C0~spn%3A89.99999987427145%2C55.35115233836648&amp;size=685%2C370"></script>

Для нашего файла мы берем только код аргумента src без размеров &amp;size=685%2C370.

Т. е. для приведенного примера:

http://panoramas.api-maps.yandex.ru/embed/1.x/?lang=ru_RU&amp;l=stv&amp;ll=39.721906%2C43.58674474&amp;ost=dir%3A118.19604431016373%2C0~spn%3A89.99999987427145%2C55.35115233836648

Когда мы создали файл с данными, пишем код вывода карту:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Олимпиада в Сочи 2014 - олимпийские объекты+виртуальная прогулка</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
<script src="http://yandex.st/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<style>
#shopconteyner{
width: 100%;
}
 
#markers{ float:left;
width: 400px;
}
 
#map{
margin-left: 500px;
width: 700px;
height: 400px;
}
 
#panarama{
margin-left: 40%;
width: 700px;
height: 400px;
}
</style>  
    <script type="text/javascript">
 
        ymaps.ready(init);
 
		var myMap, myCollection;
 
        function init () {
            myMap = new ymaps.Map("map", {
                    center: [43.585278, 39.720278], 
                    zoom: 10
                });
 
		myCollection = new ymaps.GeoObjectCollection();			
 
		myMap.controls
			.add("zoomControl")
			.add("mapTools")
			.add('typeSelector');	
 
         $.getJSON("data.json", function(json){ 
 
		 var src_res = "";
 
		 for (i = 0; i < json.places.length; i++) {
			var sch = i+1;
			//console.log(json.places[i].lat+" "+json.places[i].lng);
			var placemark = new ymaps.Placemark([json.places[i].lat,json.places[i].lng], {
			iconContent: sch,			
			balloonContentHeader: '<div style="color:#ff0303;font-weight:bold">'+json.places[i].title+'</div>',
			balloonContentBody: '<div style="font-size:13px;"><div><strong>Адрес:</strong> '+json.places[i].address+'<br></div></div>'   
        }, {
        // Опции
        preset: 'twirl#nightStretchyIcon' // иконка растягивается под контент
        });
		myCollection.add(placemark);
 
		src_res=src_res+'<p>'+sch+'. '+'<a href="#" onClick="return go_to('+json.places[i].lat+', '+json.places[i].lng+", '"+json.places[i].title+"', '"+json.places[i].address+"', '"+json.places[i].panarama+"', "+sch+");"+'\">'+json.places[i].title+'</a>';
 
		 }
		$('#markers').html(src_res);
 
		myMap.geoObjects.add(myCollection);
 
		myMap.setBounds(myCollection.getBounds());
		}); 
 
 
        }
 
		function go_to(lat,lon,title,address,panarama,id){
		myMap.setCenter([lat,lon], 16);
 
		var url = panarama+"&size=700%2C400";
 
		$('#panarama').html('');
 
		var s = document.createElement('script');
s.setAttribute('src', url);
document.getElementById('panarama').appendChild(s);
 
myMap.geoObjects.remove(myCollection);
 
var placemark = new ymaps.Placemark([lat, lon], {
                    iconContent: id,                 
                    balloonContentHeader: '<div style="color:#ff0303;font-weight:bold">'+title+'</div>',
                    balloonContentBody: '<div style="font-size:12px;"><strong>Адрес:</strong> '+address+'</div>'                
                }, {
                    // Опции
                    preset: 'twirl#nightStretchyIcon'
                });
 
// Добавляем метку на карту
myMap.geoObjects.add(placemark);
 
 
placemark.balloon.open();
return false;
}	
 
    </script>
</head>
 
<body>
<div id="shopconteyner">
<div id="markers"></div>
<div id="map"></div>
<div id="panarama"></div>
</div>
 
</body>
</html>

Разберем что здесь.

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

Далее загружаем данные из файла data.json.

Добавляем метки в коллекцию, а саму коллекцию на карту.

Формируем меню.

src_res=src_res+'<p>'+sch+'. '+'<a href="#" onClick="return go_to('+json.places[i].lat+', '+json.places[i].lng+", '"+json.places[i].title+"', '"+json.places[i].address+"', '"+json.places[i].panarama+"', "+sch+");"+'\">'+json.places[i].title+'</a>';

При клику по ссылке вызывается функция go_to в неё передаются параметры.

Карта центрируется по метке, балун открывается.

В область под картой мы добавляем javascript с панорамой.

var url = panarama+"&size=700%2C400";
 
$('#panarama').html('');
 
var s = document.createElement('script');
s.setAttribute('src', url);
document.getElementById('panarama').appendChild(s);

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

А затем к div с id=”panarama” добавляем код.

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

Загрузить архив с файлами примера.

Надеюсь, что данный пример пригодиться Вам!

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *