Клуб API Карт

Объединение функций build

eve-panasian
19 июня, 13:19

Добрый день
Подскажите пожалуйста как можно  объединить build: function ()  для всех  Placemark,  

чтоб не писать   BalloonContentLayout = ymaps.templateLayoutFactory.createClass для каждой метки.

 myMap = new ymaps.Map("map", {
              center: [55.753994, 37.622093],
              zoom: 10,
              controls: ["smallMapDefaultSet"]
            }),
          BalloonContentLayout = ymaps.templateLayoutFactory.createClass(
          '<div><div class="balloon-content__header">Адрес: г. Москва, ул. Маяковского, д. 22</div><div style="display: inline-block; width: 70%; vertical-align: top;"><a href="#zhukovsky" class="more-address">Подробнее</a></div></div>', {
            build: function () {              
                BalloonContentLayout.superclass.build.call(this);             
                $('.more-address').bind('click', this.onaddressClick);              
            },
            clear: function () {                
                $('.more-address').unbind('click', this.onaddressClick);
                BalloonContentLayout.superclass.clear.call(this);
            },
            onaddressClick: function () {
             var href = $(this).attr('href');
                 $('.list-items').find('.list-item').removeClass('is-active');
                 $('.list-items').find(href).parent('.list-item').addClass('is-active');
            }
         });       
        
        myMap.geoObjects
         .add(new ymaps.Placemark([55.595752817741655,38.12268014974462], {
                hintContent: 'Жуковский'
              }, {
                balloonContentLayout: BalloonContentLayout,               
                balloonPanelMaxMapArea: 0
            }))
        .add(new ymaps.Placemark([55.426712569291176, 37.75617349999999], {
                hintContent: 'ПВЗ-1 Домодедово',
               balloonContentHeader: 'Адрес: ул. Лунная, д. 9',
                balloonContentBody: '<div style = "display: inline-block; width: 29%; vertical-align: top;"> Время работы:</div><div style = "display: inline-block; width: 70%; vertical-align: top;"> Пн: 10:00-20:00</div>'                                                                                       balloonContentFooter: '<div style = "display: inline-block; width: 29%; vertical-align: top;">Как добраться:</div><div style = "display: inline-block; width: 70%; vertical-align: top;"> Ближайшие остановки: ул. Лунная (мкр Дружба 2 конечная), <div style = "display: inline-block; width: 70%; vertical-align: top;"><a href="#domodedovo" class="more-address">Подробнее</a></div>'
            }))
        .add(new ymaps.Placemark([55.95023656879027, 37.297377000000004], {
                hintContent: 'Сходня',
               balloonContentHeader: 'Адрес: г. Москва, ул. Кирова, д. 3 ',
                balloonContentBody: '<div style = "display: inline-block; width: 29%;vertical-align: top;"> Время работы:</div><div style = "display: inline-block; width: 70%; vertical-align: top;"> Пн: 10:00-20:00</div>',
    balloonContentFooter: '<div style = "display: inline-block; width: 70%; vertical-align: top;"><a href="#sxodnya" class="more-address">Подробнее</a></div>'
            })) .

7 комментариев
вы можете задать balloonContentLayout: BalloonContentLayout один раз для коллекции myMap.geoObjects (не нужно задавать для каждой метки)
В шаблоне макета нужно указать плейсхолдеры для полей данных метки


BalloonContentLayout = ymaps.templateLayoutFactory.createClass(
'<div><div class="balloon-content__header">{{ properties.balloonContentHeader }}</div><div style="display: inline-block; width: 70%; vertical-align: top;"><a href="#" class="more-address">Подробнее</a></div></div>', {
...
})


myMap.geoObjects.options
    .set('balloonContentLayout', BalloonContentLayout)
    .set('balloonPanelMaxMapArea', 0);


 myMap.geoObjects
.add(new ymaps.Placemark([55.595752817741655,38.12268014974462], {
hintContent: 'Жуковский',
balloonContentHeader: 'Адрес: ул. Лунная, д. 9',
}))





Обновлено 20 июня, 18:44
eve-panasian
23 июня, 11:08
dimik,
 Большое спасибо за ответ, все поняла , только небольшая проблема с кодом. Результат на карте получается с элементами "div".   <div style = "display: inline-block; width: 29%; vertical-align: top;"> показывает как текст. нельзя это как нибудь исправить?


 BalloonContentLayout = ymaps.templateLayoutFactory.createClass(
'<div class="balloon-content__header">{{ properties.balloonContentHeader }}</div>{{ properties.balloonContentBody }}{{ properties.balloonContentFooter }}', {
........
});
 myMap.geoObjects
.add(new ymaps.Placemark([55.595752817741655,38.12268014974462], {
hintContent: 'Жуковский',
balloonContentHeader: 'Адрес: ул. Лунная, д. 9',
 balloonContentBody: '<div style = "display: inline-block; width: 29%; vertical-align: top;"> Время работы:</div><div style = "display: inline-block; width: 70%; vertical-align: top;"> Пн: 10:00-20:00<br>Вт: 10:00-20:00<br>Ср: 10:00-20:00<br>Чт: 10:00-20:00<br>Пт: 10:00-20:00<br>Сб: 10:00-18:00<br>Вс: 10:00-18:00</div>',
balloonContentFooter: '<div style = "display: inline-block; width: 29%; vertical-align: top;">Как добраться:</div><div style = "display: inline-block; width: 70%; vertical-align: top;"> Ближайшие остановки: ул. Лунная (мкр Дружба 2 конечная), ЖСК Маяк, ул. Лунная д. 3. Вход с торца здания. На входе Баннер - Пункт выдачи Лунная 9, Вывеска "Красный Пищевик".<div><a href="../contacts.html#domodedovo" class="more-address">Подробнее</a></div></div>'
}))
Обновлено 23 июня, 11:08
eve-panasian,
можно

BalloonContentLayout = ymaps.templateLayoutFactory.createClass(
'<div class="balloon-content__header">{{ properties.balloonContentHeader }}</div>{{ properties.balloonContentBody|raw }}{{ properties.balloonContentFooter }}', {
........
});


https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Template-docpage/


Обновлено 23 июня, 11:19
eve-panasian
23 июня, 11:39
dimik,
теперь все показывает правильно , но функция  на .more-address при клике  не работает(((((((
ссылки все время разные  <a href="xxxxx" class="more-address">Подробнее</a>



   BalloonContentLayout = ymaps.templateLayoutFactory.createClass(
'<div class="balloon-content__header">{{ properties.balloonContentHeader }}</div>{{ properties.balloonContentBody|raw }}{{ properties.balloonContentFooter }}', {
build: function () {
BalloonContentLayout.superclass.build.call(this);
$('.more-address').bind('click', this.onaddressClick);
},
clear: function () {
$('.more-address').unbind('click', this.onaddressClick);
BalloonContentLayout.superclass.clear.call(this);
},
onaddressClick: function () {
var href = $(this).attr('href');
$('.list-items').find('.list-item').removeClass('is-active');
$('.list-items').find(href).parent('.list-item').addClass('is-active');

}
});
 myMap.geoObjects
.add(new ymaps.Placemark([55.595752817741655,38.12268014974462], {
hintContent: 'Жуковский',
balloonContentHeader: 'Адрес: ул. Лунная, д. 9',
balloonContentBody: '<div style = "display: inline-block; width: 29%; vertical-align: top;"> Время работы:</div><div style = "display: inline-block; width: 70%; vertical-align: top;"> Пн: 10:00-20:00<br>Вт: 10:00-20:00<br>Ср: 10:00-20:00<br>Чт: 10:00-20:00<br>Пт: 10:00-20:00<br>Сб: 10:00-18:00<br>Вс: 10:00-18:00</div>',
balloonContentFooter: '<div style = "display: inline-block; width: 29%; vertical-align: top;">Как добраться:</div><div style = "display: inline-block; width: 70%; vertical-align: top;"> Ближайшие остановки: ул. Лунная (мкр Дружба 2 конечная), ЖСК Маяк, ул. Лунная д. 3. Вход с торца здания. На входе Баннер - Пункт выдачи Лунная 9, Вывеска "Красный Пищевик".<div><a href="#domodedovo" class="more-address">Подробнее</a></div></div>'
}))
Обновлено 23 июня, 11:39
eve-panasian,
bind/unbind уже давно устарели. Лучше использовать on + делегирование событий.


.bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged.



$(this.getParentElement).on('click', '.more-address', this.onaddressClick);



Чтобы сказать подробнее нужна ссылка на этот код
eve-panasian
23 июня, 12:23
dimik,
 все получилось спасибо за помощь , ВЫ мне очень помогли )
хотела еще спросить,  а в clear при функции 'on (click..)" вместо  'unbind" ничего можно не писать? 



BalloonContentLayout = ymaps.templateLayoutFactory.createClass(
'<div class="balloon-content__header">{{ properties.balloonContentHeader }}</div>{{ properties.balloonContentBody|raw }}{{ properties.balloonContentFooter|raw }}', {
build: function () {
BalloonContentLayout.superclass.build.call(this);
$(this.getParentElement).on('click', '.more-address', this.onaddressClick);
},
clear: function () {
???????
BalloonContentLayout.superclass.clear.call(this);
},
onaddressClick: function () {
var href = $(this).attr('href');
$('.list-items').find('.list-item').removeClass('is-active');
$('.list-items').find(href).parent('.list-item').addClass('is-active');

}
}); 
eve-panasian,
Лучше писать off
clear: function () {
$(this.getParentElement).off('click', '.more-address', this.onaddressClick);
BalloonContentLayout.superclass.clear.call(this);
},