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

Question

[Aiode]

const items = [{
        coord: [60.0103092, 30.2643176],
        text: 'Уточкина, 3',
        name: 'Уточкина, 3',
        class: 'active-address'
    },
    {
        coord: [59.919969, 30.341254],
        text: 'Марата, 82',
        name: 'Марата, 82',
        class: ''
    },
    {
        coord: [59.927473, 30.321069],
        text: 'Садовая, 40',
        name: 'Садовая, 40',
        class: ''
    },
];

ymaps.ready(function () {
    const map = new ymaps.Map('map', {
        zoom: 13,
        center: items[0].coord,
        controls: [],
    });

    items.forEach(
        n => map.geoObjects.add(
            new ymaps.Placemark(n.coord)));


    const buttons = document.querySelector('#buttons');

    buttons.innerHTML = items.map(n =>
        `<button class="${n.class}" data-coord="${JSON.stringify(n.coord)}" data-text="${n.text}">${n.name}</button>`
    ).join('');

    buttons.addEventListener('click', ({
        target: {
            dataset: {
                coord,
                text
            }
        }
    }) => {
        if (coord) {
            map.setCenter(JSON.parse(coord));
            map.balloon.open(JSON.parse(coord),text);
            var groupBtn = $(buttons).children('button');
            for(var i = 0; i < groupBtn.length; i++){
                var attr = '"' + $(groupBtn[i]).attr('data-coord')+'"';
                var attr2 = JSON.stringify(coord);
                if( attr2 == attr){
                    $(groupBtn).removeClass('active-address');
                    $(groupBtn[i]).addClass('active-address');
                }
            }
        }
    });
});

Answer 1

[Антон Неверов]

Изучайте объект placemark в картах.
Вам поможет:

items.forEach(
        n => map.geoObjects.add(
            new ymaps.Placemark(n.coord, {}, {
            // Опции.
            // Необходимо указать данный тип макета.
            iconLayout: 'default#imageWithContent',
            // Своё изображение иконки метки.
            iconImageHref: 'images/ball.png',
            // Размеры метки.
            iconImageSize: [48, 48],
            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-24, -24],
            // Смещение слоя с содержимым относительно слоя с картинкой.
            iconContentOffset: [15, 15],
            // Макет содержимого.
            iconContentLayout: MyIconContentLayout
        })));

Пример: https://tech.yandex.ru/maps/jsbox/2.1/icon_customImage

Comments

[Aiode]

Спасибо Вам!!!