0

Мне нужно заменить внешний вид метки на свою картинку + сделать к ней подпись. Вот пример из песочницы: https://tech.yandex.ru/maps/jsbox/2.1/icon_customImage Здесь заменяется внешний вид метки на любую картинку.Однако мне нужно, чтобы вместе с картинкой работала и подпись. Если немного изменить код в песочнице, то подпись появится. Однако пропадёт картинка. Но если раскомментить опцию iconLayout, то пропадает подпись :( Существует ли способ вывести iconCaption вместе со своей картинкой метки?

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [55.751574, 37.573856],
            zoom: 9
        }, {
            searchControlProvider: 'yandex#search'
        }),
        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            hintContent: 'Собственный значок метки',
            balloonContent: 'Это красивая метка',
            iconCaption: 'test',
            iconContent: 'test'
        }, {
            // Опции.
            // Необходимо указать данный тип макета.
            //>>>>> iconLayout: 'default#image',
            // Своё изображение иконки метки.
            iconImageHref: 'images/myIcon.gif',
            iconImageSize: [30, 42],
            iconImageOffset: [-5, -38],
            preset: 'islands#blueCircleDotIconWithCaption'
        });

    myMap.geoObjects.add(myPlacemark);
});

Думаю, нужно как-то создать свой пресет для оформления метки или выбрать наиболее подходящий из стандартных. Только вот на странице документации https://tech.yandex.ru/maps/doc/jsapi/2.0/dg/concepts/geoobjects-docpage при переходе на страницу с описанием стандартных пресетов возвращается 404 :(

2 ответа 2

1

Кроме iconLayout: 'default#image', существует ещё default#imageWithContent, которая как раз таки и отвечает за пользовательское изображение иконки с содержимым.

Помимо этого, есть возможность создавать свои макеты (в том числе и иконки с содержимым)

Например, создадим шаблон:

/* Шаблон иконки */
 var myIcon = ymaps.templateLayoutFactory.createClass('<div class="my_icon">' + 
            '{{ properties.iconCaption }}' + 
'</div>');

и затем, в iconLayout укажем этот шаблон:

...
iconLayout: myIcon,
iconImageSize: [32, 32],
iconImageOffset: [-5, -38], 
...

Небольшой пример: jsfiddle

1
  • Спасибо, помогло. Я создал свой шаблон для метки и застилизовал его с помощью css.
    – crypticusw
    24 фев 2017 в 7:52
0

У яндекса для картинок есть необходимый инструмент с применением которого можно настроить марку, например:

MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
       '<div class="some-class">$[properties.iconContent]</div>'), myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
        iconContent: 'НАША МЕТКА',
       }, {
        iconLayout: 'default#imageWithContent',
        iconImageHref: '/images/some-icon.png',
        iconImageSize: [30, 30],
        iconContentOffset: [80, 30],
        iconContentLayout: MyIconContentLayout
    });

Движение осуществляется с помощью iconContentOffset, а стили применяются с помощью класса.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.