Собственное изображение меток на карте. Несколько изображений в одном маркере

Рейтинг: 0Ответов: 2Опубликовано: 27.05.2023

Создана коллекция

greenCollection = new ymaps.GeoObjectCollection(null, {
iconLayout: 'default#image',        
iconImageHref: 'images/myIcon.png',
iconImageSize: [42, 42],
iconImageOffset: [-24, -24],
interactive : false
});

Собственно вопрос: можно ли в iconImageHref (или как-то иначе) указать несколько картинок? Идея в том, что я добавляю к примеру шарик, а над шариком хочу увидеть второе изображение - еще одну png картинку.

Не отображается маркер. Что я делаю не так? marker вижу, marker2 нет

var greenCollection;
ymaps.ready(init);

function init() {

    var myMap = new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 10
    });

MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
        '<div class="container>' +
        '<img src= "https://i.ibb.co/fHkKCTv/marker2.png" />' +
        '</div>')

greenCollection = new ymaps.GeoObjectCollection(null, {
    iconLayout: 'default#imageWithContent',       
    iconImageHref: "https://i.ibb.co/3zZLMYG/marker.png",
    iconContentLayout: MyIconContentLayout,
    iconImageSize: [42, 42],
    iconImageOffset: [-24, -24],
    interactive : false
});

    greenCollection.add(new ymaps.Placemark([55.76, 37.64]));

    myMap.geoObjects.add(greenCollection);    
}
yandex-maps-api яндекс-карты yandex-maps-jsapi
Источник: Stack Overflow на русском

Ответы

▲ 1

Можно попробовать указать в качестве параметра iconLayout значение 'default#imageWithContent' в этом случае можно в иконку вставить html код. предварительно создав шаблон MyIconContentLayout = ymaps.templateLayoutFactory.createClass('HTML'); и передать его в iconContentLayout, а в HTML уже указать Ваши картинки.

Получиться должно примерно так

MyIconContentLayout = ymaps.templateLayoutFactory.createClass('<div class="container"><div class="image"></div></div>');
greenCollection = new ymaps.GeoObjectCollection(null, {
    iconLayout: 'default#imageWithContent',       
    iconImageHref: 'images/myIcon.png',
    iconContentLayout: MyIconContentLayout,
    iconImageSize: [42, 42],
    iconImageOffset: [-24, -24],
    interactive : false
});

ну и соответственно в css описать указанные в MyIconContentLayout классы или прамо в шаблоне в style

▲ 0

В Вашем случае код должен выглядеть так:

var greenCollection;
ymaps.ready(init);

function init() {

    var myMap = new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 10
    });
     // Создаём макет содержимого.
        MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
            '<img style="position:relative;top:-20px;left:-2px;" src="https://i.ibb.co/fHkKCTv/marker2.png"></img>'),

greenCollection = new ymaps.GeoObjectCollection(null, {});

greenCollection.add(new ymaps.Placemark([55.76, 37.64], {}, {
            // Необходимо указать данный тип макета.
            iconLayout: 'default#imageWithContent',
            // Своё изображение иконки метки.
            iconImageHref: 'https://i.ibb.co/3zZLMYG/marker.png',
            iconImageSize: [42, 42],
            iconImageOffset: [-24, -24],
            // Смещение слоя с содержимым относительно слоя с картинкой.
            iconContentOffset: [15, 15],
            // Макет содержимого.
            iconContentLayout: MyIconContentLayout
        }));

    myMap.geoObjects.add(greenCollection);    
}