bs4Dash容器最大化后Leaflet地图无法自适应宽度求助

当使用bs4Dash的可最大化Box包裹Leaflet地图时，最大化Box后地图不会自动适配容器的新宽度，这是因为Leaflet未检测到容器尺寸变化。以下是可行的解决办法：

核心思路 #

监听bs4Dash最大化Box对应的模态框显示/隐藏事件，手动触发Leaflet地图的尺寸重计算（调用invalidateSize()方法），让地图适配容器的新尺寸。

完整解决代码 #

library(shiny)
library(bs4Dash)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    box(
      title = "Map",
      collapsible = TRUE,
      height = "80vh",
      width = 6,
      maximizable = TRUE,
      leafletOutput("map1", height = "100%")
    ),
    # 添加自定义JS监听最大化事件并触发地图resize
    tags$script(HTML("
      // 监听最大化模态框显示事件
      $(document).on('shown.bs.modal', '.bs4dash-modal', function() {
        const mapContainer = $(this).find('#map1');
        if(mapContainer.length > 0) {
          const map = mapContainer[0]._leaflet_map;
          if(map) {
            map.invalidateSize();
          }
        }
      });
      
      // 监听模态框隐藏事件（恢复原大小时触发resize）
      $(document).on('hidden.bs.modal', '.bs4dash-modal', function() {
        const mapContainer = $('#map1');
        if(mapContainer.length > 0) {
          const map = mapContainer[0]._leaflet_map;
          if(map) {
            setTimeout(() => map.invalidateSize(), 100);
          }
        }
      });
    "))
  )
)

server <- function(input, output, session) {
  output$map1 <- renderLeaflet({
    leaflet() %>% 
      setView(19.08, 60.25, zoom = 4) %>% 
      addTiles()
  })
}

shinyApp(ui, server)

代码说明 #

• shown.bs.modal事件：当最大化模态框完全显示后触发，此时容器尺寸已确定，调用map.invalidateSize()让Leaflet重新计算地图尺寸。
• hidden.bs.modal事件：关闭模态框（恢复原Box大小）时，延迟100ms触发resize，确保容器尺寸恢复完成后地图适配。
• 通过mapContainer[0]._leaflet_map获取Leaflet地图实例，这是Leaflet内部存储的实例引用，无需额外全局变量。

内容的提问来源于stack exchange，提问作者Marcin Karliński