Клуб API Карт

Клуб API Карт

Баг в примере кастомной формы(круг) метки в песочнице (api 2.1)

Пост в архиве.

Сделал кастомную разметку метки, в форме круга, по примеру https://tech.yandex.ru/maps/jsbox/2.1/placemark_shape

Суть в том что если вызвать метод .setBounds() карты, то метка в форме круга выходит за видимую область карты.

Мне кажется это как то связано с css, в котором задаются отрицательные левый и верхний отступы для внутреннего контейнера круга в метке. (.circle_layout {left: -23px;top: -23px;})

 

Вот пример где можно воспроизвести ошибку. http://jsfiddle.net/uhbkr0oe/1/

Чтобы увидеть ошибку необходимо предварительно уменьшить размер окна в котором показывается карта, а затем выполнить код.

 

Прикрепляю скрин на всякий случай http://prntscr.com/5cmogf

6 комментариев
Авторизуйтесь, чтобы оставить комментарий
yasha-makarov
27 января 2016, 23:23

У меня не получилось воспроизвести в Chrome. Скорее всего есть зависимость от конкретных размеров видимой области или браузера.

diz2html
27 января 2016, 23:23

У меня круги в 2 раза меньше этих - та же проблема. Только в данном примере вверх уходит, а у меня крайний левый и крайний правый уходят на половину от своей общей ширины за видимую область карты слева и справа. Воспроизводил проблему в мобильном фаерфокс, мобильном хроме и штатном фаерфокс, хотя с последним баг не всегда всплывал а вот на моблиьных стабильно проскакивает.

Скрин со штатного фаерфокса уменьшенного до размеров мобильного экрана http://prntscr.com/5csrc6

 

diz2html
27 января 2016, 23:23

P.S.

помогло выставление zoomMargin в ответе ниже. Спасибо за внимание!

Всеволод Шмыров
27 января 2016, 23:23
Доброе утро. При вызове map.geoObjects.getBounds происходит обращение к геометрии геообъекта, то есть к точке. Чтобы гарантировать, что метка всегда вся попадает в видимую область необходимо в метод setBounds передать опцию zoomMargin.
https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Map-docpage/#setBounds-param-options.zoomMargin
diz2html
27 января 2016, 23:23

Спасибо!

Помогло половинное значение от ширины круга.

К примеру если круг шириной 30px, то zoomMargin будет 15.

Это занчение отрицательного отступа  заданного в css

Всеволод Шмыров
27 января 2016, 23:23
Отрицательно значение в CSS необходимо для правильного отображения метки.Точка на карте в таком случае соответствует центру макета.