Клуб API Карт

Клуб API Карт

Стилизация балунов

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

Добрый день!  Как создавать свои стили для балунов в новом API?

В прошлой версии для балуна переопределял интерфейс YMaps.IBalloonLayout и все работало.

В новой версии есть фабрика шаблонов ymaps.templateLayoutFactory, но в ней нет возможностей настройки оффсетов и положения кнопки "закрыть"

  
var iconStyle = {
href : iconUrl,
size : {x : 22, y : 27}
}
var MyBalloonLayout = ymaps.templateLayoutFactory.createClass('<div class="balloon_layout"><div class="balloon_content">$[[options.contentLayout]]</div><div class="balloon_close"></div><div class="balloon_tail"></div></div>') ;
ymaps.layout.storage.add('my#balloonLayout', MyBalloonLayout) ;
var MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass('<b>$[properties.name]</b>') ;
ymaps.layout.storage.add('my#balloonContentLayout', MyBalloonContentLayout) ;
 
 А затем его применяю к своей коллекции:
 
myCollection.options.set({
            iconImageHref : iconStyle.href,
iconImageSize : [iconStyle.size.x, iconStyle.size.y],
iconImageOffset : [-iconStyle.size.x/2, -iconStyle.size.y],
            balloonLayout           : 'my#balloonLayout',
            balloonContentLayout    : 'my#balloonContentLayout'
 }) ;
 
Для иконок оффсеты можно задать как iconImageOffset, но как сделать аналогичное для балунов, которые могут растягиваться от содержимого?
6 комментариев
Авторизуйтесь, чтобы оставить комментарий
thekashey
28 января 2016, 04:58

Любишь кататся - люби и саночки возить.

Если уж переопределяете балун совсем - прийдется и "мозги" прописывать.

Шаблон реализуется классом templateBased

Если вам нужно какое-то хитрое поведение - его требуется записать в build, как в примере.

Свои размеры(растянуться под контент) шаблон раскажет через getClientBoundingRect

 

Вариант два - вы можете взять класс theme.twirl.balloon.Layout, он же ymaps.layout.storage.get('twirl#balloon') и переопределить ему метод getTemplate на свой.

например

 

var MyBalloonLayout = ymaps.templateLayoutFactory.createClass('$[[options.contentLayout]]',layout.storage.get('twirl#balloon').prototype) ;//по сути создаем новый шаблон и копируем в него все из стандартного

Хотя не знаю, сработает ли такое насилие.

small_butterfly_long_long_as_long_as_i_can_do_it_here
28 января 2016, 04:58

По сути из всего хитрого поведения нужна только возможность стилизовать оформление. Сейчас все стили задаются inline, а хочется или их переопределять или изменять. В этом примере это показано, но не совсем то, что нужно, в частности непонятно, где кнопка "закрыть".

P.S. А насчет переопределения twirl#balloon - это интересно, но действительно смахивает на изобретение велосипеда с прописыванием заново той же логики

grishkashishka
28 января 2016, 04:58

И заглохла тема... а все же не дает она мне покоя :)))

Как переопределить шаблон у балуна я определился:

var myBalloonLayout = ymaps.templateLayoutFactory.createClass(
                '

$[properties.Content]

' +
                '

Расположение: $[properties.position]

' +
                '

Численность населения: $[properties.population]

'
            );

 

 

this.myPlacemark = new ymaps.Placemark(
      [x, y], {
        balloonContent: this.optBaloonContent
      }, {
        draggable: this.optDraggable,
        balloonLayout: myBalloonLayout
      });

 

Но все же имеется несколько вопросов:

1.поскольку я переопределяю шаблон в плэйсмарке...Как менять контент через balloonContent? т.е. фактически в шаблоне $[options.balloonContent] не работал.

2. Как балун все же схлапывается? т.е. хотелось бы обработку дива close посмотреть :)

В идеале для примера шаблон стандартный бы посмотреть.

dimik
28 января 2016, 04:58

 

$[options.balloonContent] 

должно быть не options а properties

grishkashishka
28 января 2016, 04:58

А по клозу? :))

 

По колозу сделал хак просто...

closeBall = function(){
    window.console.log( this.map );
    this.map.balloon.close();
  };

 

И в слое балона прописал

small_butterfly_long_long_as_long_as_i_can_do_it_here
28 января 2016, 04:58

у меня сделано так:

var MyBalloonLayout = ymaps.templateLayoutFactory.createClass(       '' +            '' +                '$[[options.contentLayout]]' +            '' +            '' +            '' +        '', {        build: function () {             //Вызываем стандартный рендерер балуна для его добавления в DOM            this.constructor.superclass.build.call(this ) ;            var balloon = this.getData().geoObject.balloon; //сохраняем объект в переменную            //подписываемся на клик по кнопке закрытия            $('.balloon_close').on('click', function( )  {                //закрываем                balloon.close( ) ;            }) ;        }    }) ;


здесь написано подробнее о стилизации балунов: http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/templateLayoutFactory.xml