yandex-maps-unofficial / vue-yandex-map

Yandex Maps Component for VueJS

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Позиционирование карты в блоке с display: none

vfz opened this issue · comments

Столкнулся с проблемой, при размещении карты в модальное окно (реализованно на bootstrap) которое по умолчанию закрыто (style="display: none").
Логика слудующая при нажатии на адрес из списка модальное окно принимает style="display: block" и меняются coords и текст иконки.
Карта в попапе появляется и иконка тоже причем иконка в нужных координатах а вот сама карта позиционируется по координатам которые были изначально по умолчанию. Если закрыть попап и заного его открыть то карта уже позиуионируется как надо даже если выбран другой аддрес с другими координатами, проблема наблюдается только при первом отображении карты. в консоли при этом выпадает ошибка:

GEThttps://api-maps.yandex.ru/services/coverage/v2/?l=map&ll=NaN,NaN&z=16&lang=ru_RU&callback=jsonp_yandex_coverage__l_map_ll_NaN_NaN_z_16_lang_ru_RU
[HTTP/2 400 Bad Request 98ms]

Воспроизвел в песочнице примерно тоже самое.
В песочнице получилось ещё хуже, любое открытие с новыми координатами не меняет позиционирование карты, хотя иконка перемещается.
При этом повторное нажатие на кнопку с установкой координат меняет позиционированние карты если она не закрыта.
https://codepen.io/vfz/pen/OJvdwOp

1- нажимаем на одну из кнопок

  • откроется карта в координатах которые стояли поумолчанию но с иконкой в новых координатах
    2- нажимаем на ту-же кнопку повторно
  • карта спозиционируется по новым (старым) координатам
    3- нажимаем кнопку закрыть карту
  • скроется блок с картой
    4- нажимаем на кнопку с другим адресом
  • откроется карта с иконкой в новом месте но спозиционированная на координатах от прошлого адреса
    5- не нажимая на кнопку закрыть карту нажимаем то на один то на другой адрес
  • меняется место и текст иконки и происходит перепозиционирование карты одновременно с этим

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

пока писал вопрос, придумал ответ
Сейчас вышел из положения добавив setTimeout на изменение координат

updateCords(ctx, coords) {
            setTimeout(() => {
                ctx.commit('newCords', coords)
            }, 500)

        },

В таком варианте сначала открывается окно потом назначаются координаты и все работает как ожиладось меняется позиционирование карта и иконка на ней, но как то странно это выглядит, может есть другое решение?