Mais

O mapa do folheto carrega incorretamente quando dentro de um elemento Bootstrap .collapse

O mapa do folheto carrega incorretamente quando dentro de um elemento Bootstrap .collapse


Estou tentando criar um mapa de folheto que fica oculto quando a página carrega e é revelado quando o usuário clica em um botão.

Estou tentando usar a funcionalidade de recolhimento do Bootstrap para revelar o mapa ao pressionar um botão - veja uma amostra aqui.

Isso funciona para mostrar / ocultar a div do mapa - mas a formatação do mapa está quebrada, com uma grande área vazia sem dados:

Isso só ocorre quando o div do mapa tem o.colapsoclasse - se você remover essa classe, o mapa carrega corretamente.

Portanto, a questão é: como permitir que um mapa do folheto carregue corretamente quando não estiver visível quando a página for carregada?


https://stackoverflow.com/questions/24412325/resizing-a-leaflet-map-on-container-resize tinha a resposta, que é chamar invalidateSize no mapa quando o evento de recolhimento disparar:

Verifica se o tamanho do recipiente do mapa mudou e atualiza o mapa em caso afirmativo - chame-o depois de alterar o tamanho do mapa dinamicamente

$ ('# demo'). on ('mostrado.bs.collapse', função (e) {map.invalidateSize (true);})

Assista o vídeo: Bootstrap 5 Tutorial For Beginners #19 - Bootstrap Collapse Tutorial