Позиционирование карты в блоке с 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)
},
В таком варианте сначала открывается окно потом назначаются координаты и все работает как ожиладось меняется позиционирование карта и иконка на ней, но как то странно это выглядит, может есть другое решение?