R Shiny Dashboard中多标签页Leaflet地图无法显示问题

当Leaflet地图被放置在初始隐藏的tabItem中时，地图容器的宽高在初始化阶段为0，导致Leaflet无法正确计算地图尺寸并完成渲染。切换到对应标签后，容器获得了实际尺寸，但地图不会自动重新计算布局，因此无法正常显示。

通过监听标签切换事件，在标签激活时调用Leaflet的invalidateSize()方法，强制地图重新计算容器尺寸并完成渲染。可以通过前端JavaScript直接实现，无需修改server端的核心业务逻辑。

library(tidyverse)
library(shiny)
library(leaflet)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = 'Interactive Maps'),
  dashboardSidebar(
    sidebarMenu(
      id = "tabs", # 指定sidebarMenu的id，规范监听标签切换事件
      menuItem("1st Map", tabName = "my_map1"),
      menuItem("2nd Map", tabName = "my_map2")
    )
  ),
  dashboardBody(
    tabItems(
      tabItem('my_map1',
              fluidPage(
                titlePanel("Here is map 1"),
                verticalLayout(
                  wellPanel(textOutput("zip")),
                  mainPanel(
                    leafletOutput("map1", width = 700, height = 700)
                  )
                )
              )
      ),
      tabItem("my_map2",
              fluidPage(
                titlePanel("Here is map 2"),
                verticalLayout(
                  wellPanel(textOutput("zip")),
                  mainPanel(
                    leafletOutput("map2", width = 700, height = 700)
                  )
                )
              )
      )
    ),
    # 添加自定义JavaScript处理地图尺寸刷新
    tags$script(HTML("
      // 监听bootstrap标签的显示完成事件
      $(document).on('shown.bs.tab', 'a[data-toggle=\"tab\"]', function(e) {
        // 获取当前激活的tab名称
        var activeTab = $(e.target).attr('data-value');
        // 匹配对应的地图容器ID
        var mapId = activeTab === 'my_map1' ? 'map1' : 'map2';
        // 获取Leaflet实例并强制刷新尺寸
        var mapInstance = $('#' + mapId).data('leaflet-map');
        if(mapInstance) {
          mapInstance.invalidateSize();
        }
      });
    "))
  )
)

server <- function(input, output, session) {
  
  output$map1 <- renderLeaflet(
    leaflet() %>% addCircleMarkers(
      lng = runif(10),
      lat = runif(10),
      layerId = paste0("marker", 1:10)
    )
  )
  
  observeEvent(input$map1_marker_click, {
    leafletProxy("map1", session) %>%
      removeMarker(input$map1_marker_click$id)
  })
  
  output$map2 <- renderLeaflet(
    leaflet() %>% addCircleMarkers(
      lng = runif(20),
      lat = runif(20),
      layerId = paste0("marker", 1:20)
    )
  )
  
  observeEvent(input$map2_marker_click, {
    leafletProxy("map2", session) %>%
      removeMarker(input$map2_marker_click$id)
  })
  
}

shinyApp(ui, server)

1. 给sidebarMenu添加id = "tabs"，明确标签切换事件的监听对象（前端JS也可直接捕获，但规范定义id更利于维护）。
2. 在dashboardBody末尾添加自定义JavaScript代码：
   • 监听bootstrap标签的shown.bs.tab事件（标签切换完成并显示时触发）。
   • 根据激活的tab名称匹配对应的地图容器ID。
   • 获取Leaflet地图实例，调用invalidateSize()方法强制刷新地图尺寸，触发完整渲染流程。

内容的提问来源于stack exchange，提问作者Justin