Клуб API Карт

Модификация балуна-панели/пользовательский балун

Пост в архиве.

В Песочнице у вас есть прекрасный пример, как делать пользовательский балун
https://tech.yandex.ru/maps/jsbox/2.1/balloon_autopan

Мне же необходимо слегка модифицировать уже существующий балун-панель (добавить блок). При этом нет желания выдумывать полностью новый шаблон. Есть где-то дефолтный шаблон, чтобы просто в него внести необходимые изменения? Или может быть, есть другой способ добавить в балун необходимый блок?

 

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

Содержимое балуна можно задавать в виде HTML.

Хорошо. Если мне нравится дефолтный балун для кластера двухколочный - копировать его html?..

Вы про кластер нигде не упоминали. Балун кластера состоит из нескольких макетов. Можно переопределить один из них

Смотрите, я хочу сделать поперек колонкам

|------Новый элемент------------|
|Левая колонка|Правая кол. |


Но также хочу, чтобы на обычной(не крастера) панели вверху был новый элемент.

Как я понимаю, переопределив один из макетов кластера такую задачу не решить.  

Да, нужно переопределять основной макет

Возможно как-то получить макет по умолчанию, чтобы его модифицировать?

надо смотреть исходники с &mode=debug

я не помню под каким ключом он хранится

['Balloon','0a','0M-D0wjOzmzEz1zd0-zP0*'],
...
['balloon','09',function (project){return [this.name + (project.support.browser.name == 'MSIE' && project.support.browser.documentMode == 8 ? '.ie8' : '.standards')]}],
['balloon-content','0$','(2'],
['balloon.component.getBalloonMode','0-',''],
['balloon.content.layout.html','0_','0$'],
['balloon.ie8','0.','(2'],
['balloon.layout.html','0!','090,7_!4!_!Z*d*c!(!q!j!.!-!J0z0Z'],
['balloon.metaOptions','0*','-X-Y2.8n-2-.'],
['balloon.standards','0(','(2'],
['balloonPanel.layout.html','0)','090,7_!4!_!Z*d*c!(!q!j!.!-!J0z0Z'],
['balloon__tail','0,',function (project){return [this.name + (project.support.browser.name == 'MSIE' && project.support.browser.documentMode == 8 ? '.ie8' : '.standards')]}],
['balloon__tail.ie8','0q','(2'],
['balloon__tail.standards','0j','(2'],
['balloon_size_mini','0z',function (project){return [this.name + (project.support.browser.name == 'MSIE' && project.support.browser.documentMode == 8 ? '.ie8' : '.standards')]}],
['balloon_size_mini.ie8','0Q','(2'],
['balloon_size_mini.standards','0J','(2'],
['balloon_type_route','0Z','(2'],

...

['clusterer.addon.balloon','2D','0e!5Qu'],

Что такое подразумевается? Как по этим данным получить исходники макетов? 

Я же написал  &mode=debug

Вы смотрите обфусцированный продакш код

Оказалось что в документации все есть.

Он называется 'cluster#balloonTwoColumns'

Вот такое использование делает то что вы хотите

    var ClusterBalloonContentLayout = ymaps.templateLayoutFactory.createClass([        'тра-та-та',        '{% include "cluster#balloonTwoColumns" %}'    ].join(''));        var clusterer = new ymaps.Clusterer({        clusterBalloonContentLayout: ClusterBalloonContentLayout,        ...    });

 

Спасибо большое за ответ, работает.

Еще вопрос:
Какое решение будет наиболее оптимальным для того, чтобы упомянутый мной див был один для всех балунов?  
То есть, я могу в каждый Placemark и Cluster добавлять balloonContentLayout с нужным html, но может быть есть вариант одного макета для всех? 
Особенно это интересно, потому что подразумевается определенные модицикации DOM-структуры этого дива в зависимости от действий пользователя. То есть, например, в этом диве появятся или исчезнут какие-то блоки, и хотелось бы, чтобы во всех открываемых балунах в новом диве происходило то же.

Я попробовал менять balloonLayout и balloonContentLayout в опциях всей карты, но похоже это работает только с балуном, открытым програмно при помощи map.balloon.open.
К слову, пробовал забиндить событие открытия балуна так

myMap.events.add('balloonopen', function (e) {alert(78);})

 но алерт всплывает тоже только при программном открытии балуна. Каким образом можно слушать открытие любого балуна?

Для меток не входящих в кластеры через кластеризатор можно задать опцию

geoObjectBalloonContentLayout

 

Вешать обработчики на DOM-события внутри балуна надо в методе build макета балуна

спасибо!