Балун с динамическим контентом и другие секреты API Яндекс Карт

Автор: Амадей Красавчик Дериглазов

Недавно в процессе работы над одним секретным проектом, о сути которого рассказать не могу, передо мной встала необходимость динамически формировать содержимое балуна на яндекс картах. И честно говоря, когда данная задача передо мной только замаячила, я даже и не подозревал, что мне придётся заниматься изобретательством. Сразу поясню, что под балуном я понимаю всплывающую подсказку при клике по маркеру на карте. И речь сейчас пойдёт исключительно об API Яндекс Карт версии 2.0.

Итак, к моему удивлению на запросы типа «как создать динамическую загрузку контента для балуна на яндекс картах» ни один из поисковиков, включая сам яндекс, мне ничего путёвого не нашёл. До сих пор понять не могу… неужели с подобной задачей столкнулся только я?! В общем, отчаявшись найти в интернете готовое решение по динамическому наполнению балунов, мне пришлось самому изобретать способы для решения своих проблем. Приятно, что в конечном итоге у меня всё получилось. И, конечно, на правах победителя я не мог удержаться от соблазна, чтобы не обогатить базу знаний российского интернета своими программистскими изысканиями. Поэтому вот вам фрагмент моего шаманского кода с исчерпывающими пояснения:



myPlacemark = new ymaps.Placemark([x,y],
{openEmptyBalloon: true},
{
iconImageHref: '/img/mapmarker.png', // картинка иконки
iconImageSize: [12, 20], // размеры картинки
iconImageOffset: [-18, -31] // смещение картинки
}
);

myPlacemark.properties.set('my_parameter',i);

myPlacemark.events.add('balloonopen', function (e) {

var geoObject = e.get('target');

var iii1 = geoObject.properties.get('balloonContent');

if (!iii1)
{
var iii = geoObject.properties.get('my_parameter');
var newContent = GetContentForBalloon(iii);
geoObject.properties.set('balloonContent',newContent);
}
});



function GetContentForBalloon(iii)
{

// данная функция в зависимости от потребностей приложения должна генерировать контент
}

В принципе, думаю для всех, кто знаком с API Яндекс Карт 2.0, в данном небольшом фрагменте кода должно быть всё понятно. Но я всё-таки поясню несколько принципиальных моментов на идейном уровне, чтобы компенсировать отсутствие полного листинга скрипта:

  • я формирую карту с маркерами, для которых изначально инициализируются пустые балуны, поэтому при объявлении маркера очень важно задать параметр openEmptyBalloon, который в данном случае разрешает открытие балунов без контента
  • обратите внимание на строчку myPlacemark.properties.set('my_parameter',i); – в ней я задаю параметр, который мне потом пригодится в обработчике. В принципе эта строчка и есть главное моё ноу-хау в вопросе динамического заполнения балуна. Пришёл я к данному приёму абсолютно интуитивно и экспериментально обнаружил, что с помощью этого метода маркеру можно задать любое количество произвольных свойств.
  • далее на событие открытия балуна я вешаю обработчик, в котором проверяю наличие контента. Если контент отсутствует, получаю значение параметра сохранённого с помощью myPlacemark.properties.set('my_parameter',i);, который впоследствии использую в качестве аргумента функции, возвращающей html-код для заполнения тела балуна маркера на карте.

Как настроить маркер на яндекс картах, чтобы балун открывался при наведении на него

В качестве бонуса приведу ещё одно решение для открытия балуна не по клику по маркеру на яндекс картах, а при наведении. Мне это потребовалось сделать в рамках всё того же секретного проекта по просьбе заказчика. Вообще подобный выпендрёж с балунами мне кажется извращением, однако если за это платят деньги, то видимо это кому-нибудь нужно. Поэтому я не стал спорить с заказчиком и сделал, как он просил. Вот привожу необходимый для этого код:

myPlacemark.events.add('mousemove', function (e) {

var geoObject = e.get('target');

geoObject.balloon.open();

});

Собственно в данном случае используется тот же приём что и для динамического балуна, только в данном случае для маркера определяется реакция на событие mousemove. Как видно из программного кода при появлении события mousemove произойдёт открытие балуна. Событие mousemove на яндекс картах возникает при перемещении курсора над объектом. В данном случае в качестве объекта выступает маркер.

Спасибо за внимание. Если у Вас остались вопросы, не стесняйтесь, спрашивайте. Я обязательно Вам отвечу.

Дата публикации: 15.09.2016

К списку гламурных манифестов сообщества «Профессия – делать сайты»