0

Как центрировать самодельную метку Yandex Maps ? Коллеги, создаю метку с произвольной картинкой (svg). Ставлю метку в центр круга. При увелечении зума, метка начинает сползать с круга, это выглядит не красиво. см. скрин. Как мне сделать чтобы метка всегда была в центре круга?

    const placemark = new this.yaMap.Placemark(position.coordinates, {}, {
  // Опции.
  // Необходимо указать данный тип макета.
  iconLayout: "default#image",
  // Своё изображение иконки метки.
  iconImageHref: "../../../assets/images/map_center.svg",
  // Размеры метки.
  iconImageSize: [50, 50]
});
this.myMap.geoObjects.add(placemark);


<svg width="34" height="48" viewBox="0 0 34 48" fill="none" xmlns="http://www.w3.org/2000/svg">

Почти в центре svg введите сюда описание изображения

Сползает введите сюда описание изображения

2 ответа 2

0

Немного переделал пример в Песочнице (https://tech.yandex.ru/maps/jsbox/2.1/icon_customImage ), метка всегда находится в центре круга:

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [55.76, 37.60],
            zoom: 9
        }, {
            searchControlProvider: 'yandex#search'
        }),

        // Создаём макет содержимого.
        MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
            '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
        ),

        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            hintContent: 'Собственный значок метки',
            balloonContent: 'Это красивая метка'
        }, {
            // Опции.
            // Необходимо указать данный тип макета.
            iconLayout: 'default#image',
            // Своё изображение иконки метки.
            iconImageHref: 'images/myIcon.gif',
            // Размеры метки.
            iconImageSize: [30, 42],
            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-5, -38]
        });

    // Создаем круг.
    var myCircle = new ymaps.Circle([
        // Координаты центра круга.
        [55.76, 37.60],
        // Радиус круга в метрах.
        10000
    ], {
        // Описываем свойства круга.
        // Содержимое балуна.
        balloonContent: "Радиус круга - 10 км",
        // Содержимое хинта.
        hintContent: "Подвинь меня"
    }, {
        // Задаем опции круга.
        // Включаем возможность перетаскивания круга.
        draggable: true,
        // Цвет заливки.
        // Последний байт (77) определяет прозрачность.
        // Прозрачность заливки также можно задать используя опцию "fillOpacity".
        fillColor: "#DB709377",
        // Цвет обводки.
        strokeColor: "#990066",
        // Прозрачность обводки.
        strokeOpacity: 0.8,
        // Ширина обводки в пикселях.
        strokeWidth: 5
    });
   // Добавляем круг на карту.
    myMap.geoObjects.add(myCircle);

    myMap.geoObjects
        .add(myPlacemark)
        .add(myPlacemarkWithContent);
});
4
  • А как мне достить этого?
    – Masquitos
    11 дек 2019 в 12:41
  • В моем примере совпадают координаты метки и центра круга. Предлагаю проверить вышеприведенный код в Песочнице (ссылку я дал выше, нужно заменить код icon_customImage.js на мой пример).
    – naivv
    11 дек 2019 в 16:11
  • какая именно точка метки, должна совпадать с центром круга? метка это же прямоугольник.
    – Masquitos
    11 дек 2019 в 20:18
  • Верхняя левая. Также есть опция iconImageOffset — сдвиг значка в пикселах относительно точки привязки (задается, если "ножка" значка не находится в левом верхнем углу изображения). Взял здесь: tech.yandex.ru/maps/jsapi/doc/2.1/dg/concepts/…
    – naivv
    12 дек 2019 в 6:54
0

В итоге поступил по такому алгоритму 1) Создал марку (без указания смещения) 2) Создал круг с радиусом 10 метров, с теми же координатами что и марка 3) Открыл инспектор в браузире, нашел метку по названию картики. 4) Левый-верхний угол картинки был в центре круга, я стал калибровать картинку через lef top, пока она не стала в центр круга. 5) Добавил значения lef top в iconImageOffset: [-12, -12]

введите сюда описание изображения

Ваш ответ

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

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