Shiny模块中Leaflet地图高度设置失效问题求助

问题背景 #

将小型Shiny应用转为模块嵌入大型应用后，其他功能正常，但Leaflet地图高度设置始终无效。在独立应用中，通过以下代码能正常设置地图高度：

ui <- fluidPage(
  tags$style(type = "text/css", "#map {height: calc(700px) !important;}"),
  fluidRow(leafletOutput("map"))
)

转为模块后，尝试了两种写法均无效，地图仍保持默认400px高度：

尝试写法1 #

moduleUI <- function(id){
  ns <- NS(id)
  tags$style(type = "text/css", paste0("#", ns("map"), " {height: calc(700px) !important;}"))
  fluidRow(leafletOutput(ns("map")))
}

尝试写法2 #

moduleUI <- function(id){
  ns <- NS(id)
  tags$style(type = "text/css", "#nsValue-map {height: calc(700px) !important;}"))
  fluidRow(leafletOutput(ns("map")))
}

正确解决方案 #

问题核心有两点：一是模块内的tags$style未被正确纳入UI返回结构，二是补充代码中leafletOutput的内联高度参数会覆盖样式设置。修改后的模块UI代码如下：

moduleUI     <- function(id){
  ns <- NS(id)
  tagList(
    tags$style(type = "text/css", paste0("#", ns("map"), " {height: 700px !important;}")),
    titlePanel("Leaflet Map"),
    sidebarLayout(
      sidebarPanel(
        numericInput(ns("lat"), "Latitude:", value = 0),
        numericInput(ns("lng"), "Longitude:", value = 0),
        actionButton(ns("submit"), "Submit")
      ),
      mainPanel(
        leafletOutput(ns("map"))  # 移除内联height参数，避免冲突
      )
    )
  )
}

关键修改说明 #

• 用tagList包裹tags$style和所有UI元素，确保样式代码被正确添加到页面DOM中
• 移除leafletOutput中的height=300参数，避免内联样式覆盖自定义CSS
• calc(700px)可简化为700px，此处无需计算表达式

完整可运行代码 #

library(shiny)
library(leaflet)

moduleUI     <- function(id){
  ns <- NS(id)
  tagList(
    tags$style(type = "text/css", paste0("#", ns("map"), " {height: 700px !important;}")),
    titlePanel("Leaflet Map"),
    sidebarLayout(
      sidebarPanel(
        numericInput(ns("lat"), "Latitude:", value = 0),
        numericInput(ns("lng"), "Longitude:", value = 0),
        actionButton(ns("submit"), "Submit")
      ),
      mainPanel(
        leafletOutput(ns("map"))
      )
    )
  )
}
moduleServer <- function(input, output, session){
  ns <- session$ns

  output$map <- renderLeaflet({
    leaflet() %>%
      addTiles() %>%
      setView(lng = 0, lat = 0, zoom = 2)
  })
  
  observeEvent(input$submit, {
    lat <- input$lat
    lng <- input$lng
    
    leafletProxy("map") %>%
      clearMarkers() %>%
      addMarkers(lng = lng, lat = lat)
  })
}
  
ui     <- fluidPage(moduleUI("module_id"))
server <- function(input, output) {callModule(moduleServer, "module_id")}

shinyApp(ui, server)

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