как выровнять положение hint для Placemark при изменении зума страницы с помощью style:zoom?

Question

как выровнять положение hint для Placemark при изменении зума страницы с помощью style:zoom?

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

Есть приложение у которого присутствует кастомное изменение zoom страницы при помощи css style:zoom. При рендере карты, метки отображаются корректно и hint работает как нужно, НО как только изменить зум, метка остается на месте, а вот подложка на которой срабатывают события как будто съезжает в зависимости от зума (при уменьшении вправо, при увеличении влево). Смотрел HTML все вроде там где и должно быть. Не могу понять в чем дело.... Помогите, пожалуйста, разобраться в чем дело =)

P.S. При изменении зума через вкладку в браузере всё работает нормально, Но реализовано кастомное изменение, на виду у каждого пользователя.

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.76, 37.64],
            zoom: 10
        }, {
            searchControlProvider: 'yandex#search',
        },{
            autoFitToViewport: 'always'
        });

    myMap.geoObjects
        .add(new ymaps.Placemark([55.684758, 37.738521], {
            hintContent: 'test hintContent',
            balloonContent: 'цвет <strong>воды пляжа бонди</strong>'
        }, {
            preset: 'islands#icon',
            iconColor: '#0095b6'
        }))
        .add(new ymaps.Placemark([55.833436, 37.715175], {
            hintContent: 'test hintContent',
            balloonContent: '<strong>серобуромалиновый</strong> цвет'
        }, {
            preset: 'islands#dotIcon',
            iconColor: '#735184'
        }))
        .add(new ymaps.Placemark([55.642063, 37.656123], {
            hintContent: 'test hintContent',
            balloonContent: 'цвет <strong>красный</strong>'
        }, {
            preset: 'islands#redSportIcon'
        }));
}

<!DOCTYPE html>
<html>
<head>
    <title>Добавление метки с собственным изображением</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>" type="text/javascript"></script>
    <script src="icon_customImage.js" type="text/javascript"></script>
    <style>
        html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }
    </style>
</head>
<body>
  <div id="map" style='zoom:0.9'></div>
</body>
</html>

Ссылка на Codepen c примером

yandex-maps-api zoom hint

Источник: Stack Overflow на русском

как выровнять положение hint для Placemark при изменении зума страницы с помощью style:zoom?

Ответы