пятница, 29 августа 2014 г.

Интерактивная карта Яндекса со множеством объектов

Для modx evo официальный сайт яндекса предлагает пользоваться сниппетом ddYMap. В некоторых случаях он может быть полезен, но с его помощью можно вывести на карте только один объект. К тому же сниппет не поддерживает добавление балуна у объекту.

Сделаем свою карту с помощью Яндекс API.

Имеем следующую структуру документов:
Объекты
-Жилые дома
--Объект 1
--Объект 2
--Объект 3
-- ...
-Спецобъекты
Мы хотим вывести карту яндекса на странице "Жилые дома" и нанести на нее все вложенные объекты.

Для этого создадим чанк map:
// Подключение Яндекс API
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
function initMap(){
// Создание карты
var minskCoordX = 27.554914, minskCoordY = 53.906077;
var map = new ymaps.Map("YMapsID", {
center: [minskCoordY, minskCoordX], 
zoom: 11
});
// Добавление точек объектов на карту
[!Ditto? &tpl=`map-tpl` &parents=`[*id*]` &orderBy=`menuindex ASC`!]
}

// point - пара чисел, разделенных запятой. Например 53,27
function createPlacemark (point, content) {
return new ymaps.Placemark(point, {balloonContent: content});
}  
ymaps.ready(function(){
initMap();  
});
</script>

Чанк map-tpl:
map.geoObjects.add(createPlacemark(new Array([+map_object+]), "<a href=\"[~[+id+]~]\">[+pagetitle+]</a><br><img src=\"[+image+]\" width=\"100\">"));

Где [+map_object+] - tv-параметр, в котором хранятся координаты объекта.

В итоге получим такую карту с двумя объектами:

Комментариев нет:

Отправить комментарий