mm_ddYMap + ddYMap: Несколько документов-меток на карте



Простой вывод карты с одной меткой — самая частая задача, но не единственная. Допустим, у компании несколько подразделений и все нужно вывести на одной карте. Недавно мы обновили jQuery.ddYMap до версии 1.3, там несколько небольших интересных изменений, но нам важно то, что параметр «placemarks» (ранее «latLng») теперь может принимать данные для нескольких меток (и не только координаты, но и любой html для балуна).

Пусть у нас примерно такая структура документов:
  1. Контакты.
    1. Подразделение 1.
    2. Подразделение 2.


У документов-подразделений есть TV «location», в которой хранятся координаты. Карта со всеми метками будет выводиться на странице «Контакты».

Нам понадобятся сниппеты ddYMap 1.4 и Ditto (или любой другой сборщик документов). Так как сниппет ddYMap значение параметра «geoPos» по сути просто пробрасывает в параметр «placemarks» плагина jQuery.ddYMap, нам достаточно лишь сформировать правильный javascript-объект при помощи сборщика.Пусть у документа «Контакты» примерно такой шаблон:

<!DOCTYPE html>
<html lang="ru">
<body>
<!--…-->
<div id=”map”>[[ddYMap?
	&geoPos=`[[Ditto?
		&tpl=`mapRow`
		&tplLast=`mapRowLast`
	&noResults=``
	]]`
]]</div>
<!--…-->
</body>
</html>

Код чанка «mapRow»:

{latLng: [ [+location+] ], content: '<h1>[+pagetitle+]</h1><p><a href="[~[+id+]~]">Подробнее</a></p>'},

Обратите внимание на пробелы между скобками в «[ [+location+] ]», без них может получиться вызов сниппета.

Код чанка «mapRowLast» (1 в 1, но без запятой в конце):

{latLng: [ [+location+] ], content: '<h1>[+pagetitle+]</h1><p><a href="[~[+id+]~]">Подробнее</a></p>'}

Если сплывающий при клике балун не нужен, тогда просто опустите content:
{latLng: [ [+location+] ]}

Вот и всё.

Кстати, в новой версии ddYMap используется API Яндекс.Карт версии 2.1, где новый интерфейс и многое другое (подробнее).

20 комментариев

avatar
Если включен phx то не работает.
avatar
Увы, могу только посоветовать не использовать phx.
avatar
Ясно, но думаю не критично тем более замена phx есть, сниппет if. Хотел ещё спросить а можно ли у одиночной карты вывести сообщение на маркере, или нужно тоже через дито и чанк тянуть данные?
avatar
Прочтите статью ещё раз (как можно внимательней).

Ditto (или любой другой сборщик) нужен для сбора нескольких точек из документов MODX, если точка у вас одна, то зачем вам Ditto? Поставьте вместо вызова Ditto необходимое содержимое напрямую (например: чанк «mapRowLast», только плэйсхолдеры не забудьте изменить).
avatar
Не работает в Мозилле 36.0.4
Modx 1.0.15
ddYMap 1.5
jquery.ddYMap-1.3.1
После подвисания выдаёт:
Похоже, исполняемый на этой странице сценарий занят или не отвечает. Вы можете остановить его сейчас, открыть сценарий в отладчике или позволить сценарию продолжить свою работу.
Сценарий: api-maps.yandex.ru/2.1/?lang=ru_RU:8
В остальных браузерах Ок, В чём может быть проблема?
и не понятно откуда
:8
добавляется в конце строки?
Комментарий отредактирован 2015-03-25 10:07:40 пользователем kymage
avatar
Здравствуйте!

Похоже, баг в браузере. Посмотрите исходный код страницы (найдите подключение скрипта
<code><script type="text/javascript" src="http://api-maps.yandex.ru/2.1/?lang=ru-RU"></script></code>
), там тоже «:8» в конце или нет?

Кстати, мне аналогичную ошибку отловить не удалось и если бы вы дали ссылку на страницу, было бы гораздо проще.
Комментарий отредактирован 2015-04-05 08:46:50 пользователем Ronef
avatar
Ошибку уже не отловлю. После перезагрузки браузера всё заработало. Но подтверждаю что проблема «мозила-яндекс». Апдейт мозиллы 36.0.4 постоянно подвисает на сценариях яндекса, даже при банальном поиске.
avatar
Понял. Спасибо за обратную связь!
avatar
Это в яндексе что-то учудили с совместимостью mozilla и версии 2.1 их карт — там постоянные проблемы — то метки не показываются, то еще что-то. Если что-то не так — лучше сразу сюда писать — clubs.ya.ru/mapsapi/replies.xml?item_no=55246 — они быстро фиксят :)
avatar
Спасибо! Будем знать.
avatar
А не подскажите как отдельно получить координаты для точки по широте и отдельно по долготе, сейчас я как понимаю если выводить значения из TV, то они выводятся одной строчкой.
avatar
А зачем вам координаты по отдельности? В чём ваша задача?
avatar
Здравствуйте. Всё делаю по инструкции, но в один момент сборщик неправильно работает, а именно в firbug пишет
<script type="text/javascript">(function($){$(function(){$("#map").ddYMap({placemarks: new Array([[Ditto?
                &tpl=)});});})(jQuery);</script>

т.е. вызов шаблона вырезается, phx нету, версия: MODX Evo Custom v1.1b-d7.1. Одиночный вывод работает. Подскажите как это можно обойти.
avatar
У вас сниппет Ditto не запускается, подозреваю, что проблема в бета-версии неофициальной сборки. К сожалению, мы работаем только с официальной сборкой и мне нечего вам порекомендовать, разве что использовать официальную. Либо попробуйте связаться с Dmi3yy .
avatar
Здравствуйте! Подскажите пож-та, можно ли как-то сделать с помощью сниппета ddYMap чтобы метка на карте имела свойство 'islands#blueStretchyIcon' т.е. текст в точке. ну или любой другой параметр соответственно документации tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage-docpage/
Спасибо!
avatar
Здравствуйте!

Можно. Но не совсем через сниппет.

Сниппет использует jQuery-библиотеку jQuery.ddYmap, то есть, к элементу «mapElement» применяется «$.fn.ddYMap», например так:
$("#map").ddYMap({placemarks: new Array(55.20439753211375,61.28994219510579)});
Что-то примерно такое вы можете увидеть в исходном коде страницы где-то перед закрывающим тегом </head>.

После инициализации ссылка на объект карты доступна через «$.fn.data»:
$('#map').data('ddYMap').map;


Кроме того, после инициализации библиотека вызывает событие «ddAfterInit». То есть, вы можете написать примерно такой js-код:
$(function(){
	//После инициализации карты (когда всё скрипты загружены и вообще всё готово)
	$('#map').on('ddAfterInit', function(){
		//Ссылка на экземпляр Яндекс.Карты
		var yMap = $(this).data('ddYMap').map;
		
		console.log(yMap);
	});
});


Через экземпляр карты вы уже сможете всё: получить и установить любые свойства, опции и т. п. Если что не понятно — пишите мне в Skype (ilyasRonef), постараюсь помочь.
avatar
Здравствуйте, спасибо за сниппет, работает, правда при отключенном phx.
Подскажите, п-та, а можно ли прикрутить показ пробок, маршруты?
avatar
Здравствуйте! Можно, но придётся поковыряться в JS API Яндекс.Карт (см. комментарий).
avatar
Здравствуйте! А подскажите есть ли подобное решение для Google Maps? Спасибо
avatar
Здравствуйте. А нет простого способа поменять цвет меток?
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.