Как добавить макет пользовательского балуна в уже готовый код?

Question

[nastya_zholudeva]

Раньше у меня на карте показывались магазины, при клике на баллун появлялось имя магазина. Реализовывала таким образом:
coords - массив объектов магазинов на карте(0 и 1 элемент каждого объекта - широта и долгота, 2 - имя магазина)

var obj = {
                        type: 'FeatureCollection',
                        features: coords.map(function(p){
                            return {
                                type: 'Feature',
                                properties: {
                                    balloonContent:  p[2]
                                },
                                geometry: {
                                    type: 'Point',
                                    coordinates: [p[0], p[1]]
                                }
                            }
                        })
                    };

 var objects = ymaps.geoQuery(obj);

                    objects.searchInside(this.myMap).addToMap(this.myMap);

                    this.myMap.events.add('boundschange', () => {
                        var visibleObjects = objects.searchInside(this.myMap).addToMap(this.myMap);
                        objects.remove(visibleObjects).removeFromMap(this.myMap);
                    });

Теперь мне нужно создать свой макет баллуна,я его сделала, он рабочий (брала отсюда https://tech.yandex.ru/maps/jsbox/2.1/placemark_ba...

ymaps.ready(init);

function init () {
    var map = new ymaps.Map('map', {
            center: [55.650625, 37.62708],
            zoom: 10
        }, {
            searchControlProvider: 'yandex#search'
        }),
        BalloonContentLayout = ymaps.templateLayoutFactory.createClass(
            '<div class="baloon">' +
'<img src="https://www.look.com.ua/templates/lookua/images/avatar-user.png" alt="">' +
'<div class="text">' +
  '<p>'+
    '<p  class="name">Дикси</p>'  +
    'ул.Гвардейская, 24а' +
    '<br>' +
     '10:00-22:00' +
     '</p>' +
'</div>' +
  '<div class="line"></div>' +
  '<p class="proposition">Предложений: 2356/345</p>'
+'</div>', {
            build: function () {
                BalloonContentLayout.superclass.build.call(this);
            },

            clear: function () {
                BalloonContentLayout.superclass.clear.call(this);
            },

    var placemark = new ymaps.Placemark([55.650625, 37.62708], {
            name: 'Считаем'
        }, {
            balloonContentLayout: BalloonContentLayout,
            balloonPanelMaxMapArea: 0
        });

    map.geoObjects.add(placemark);
}

Но как его добавить в первый код?

Меток на карте несколько

Answer 1

[Moskus]

Вот вам пример применения пользовательского балуна: https://tech.yandex.com/maps/jsbox/2.1/balloon_autopan
А у вас в коде получился не пользовательский шаблон (в котором должны быть переменные данные, передаваемые каждой сущности при ее создании или показе), а фиксированный код с жестко закодированным содержимым. Это неверно, изучайте пример выше.

Comments

[nastya_zholudeva]

Moskus, я собиралась в свой шаблон потом подставлять свои данные с помощью vue js. Или так не получится?

[Moskus]

nastya_zholudeva, так получится (в том же смысле, в каком можно ехать из Киева в Одессу через северный полюс), но это весьма глупый способ это делать.