В предыдущей заметке, я рассказывал о том, как можно добавить Яндекс Панорамы на свой сайт.
В этой заметке я покажу интересный пример совместного использования API Яндекс.Карт и панорам.
Этот выпуск выходит в день открытия олимпиады в Сочи, поэтому для примера я использовал олимпийские объекты.
А также небольшую видео инструкцию.
В начале нужно провести сбор необходимых данных и сформировать из них файл в формате 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&l=stv&ll=39.721906%2C43.58674474&ost=dir%3A118.19604431016373%2C0~spn%3A89.99999987427145%2C55.35115233836648&size=685%2C370"></script> |
Для нашего файла мы берем только код аргумента src без размеров &size=685%2C370.
Т. е. для приведенного примера:
http://panoramas.api-maps.yandex.ru/embed/1.x/?lang=ru_RU&l=stv&ll=39.721906%2C43.58674474&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” добавляем код.
При клике по другой ссылке, отображается новая панорама.
Загрузить архив с файлами примера.
Надеюсь, что данный пример пригодиться Вам!