Question

我的应用程序中有两个选项卡，当我转到“视频”选项卡并单击“全屏”，然后返回到我的传单页面时，地图无法正确显示，请查看下面的代码和屏幕截图。

第1步：点击“视频”标签
第2步：点击（视频中的）全屏按钮
第3步：按ESC键
第4步：点击信息中心标签

ui.R

library("shinydashboard")
library("shiny")
library("leaflet")

dashboardPage(
  header = dashboardHeader(), 
  sidebar = dashboardSidebar(disable = FALSE, 
                             collapsed = FALSE, 
                             sidebarMenu(
                               menuItem("Dashboard", tabName = "dashboard"),
                               menuItem("Video", tabName = "video")
                             )
  ), 
  body = dashboardBody(
    tabItems(
      tabItem(tabName = "dashboard",
        fluidRow(
          column(width = 9, box(width = NULL, solidHeader = TRUE, leafletOutput("map", height=700)))
        )
      ),
      tabItem(
        tabName = "video",
        fluidRow(
          column(width = 9, tags$video(src = "http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4", type = "video/mp4", height = "320px", 
                                       weight = "640px", controls = "controls")
          )
        )
      )
    )
  )
)

server.R

library("shinydashboard")
library("shiny")
library("leaflet")

function(input, output, session){
  output$map <- renderLeaflet(
    leaflet() %>% 
      addTiles() %>% 
      setView(lng = -77.0387185, lat = 38.8976763, zoom = 10)
  )
}

谢谢

Answer 1

对我来说，这似乎是个错误，但是我不确定是在哪一侧，传单/发光板还是发光的，因为使用fluidPage和tabsetPanel时似乎也会发生这种情况。

一种解决方法是在窗口上触发一个伪造的调整大小事件，因为这显然可以解决问题，也可以手动完成。

jscode等待在侧边栏菜单列表上单击，并触发新的调整大小事件。通过将tags$head(tags$script(jscode))添加到dashboardBody，确保在HTML中包含Jquery代码。

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

jscode = HTML("
$(document).on('shiny:connected', function() {
  $('.sidebar-menu li').on('click', function(){
    window.dispatchEvent(new Event('resize'));
  });
});
")

ui <- {dashboardPage(
  header = dashboardHeader(), 
  sidebar = dashboardSidebar(disable = FALSE, 
                             collapsed = FALSE, 
                             sidebarMenu(
                               menuItem("Dashboard", tabName = "dashboard"),
                               menuItem("Video", tabName = "video")
                             )
  ), 
  body = dashboardBody(
    tags$head(tags$script(jscode)),
    tabItems(
      tabItem(tabName = "dashboard",
              fluidRow(
                column(width = 9, box(width = NULL, solidHeader = TRUE, leafletOutput("map", height=700)))
              )
      ),
      tabItem(
        tabName = "video",
        fluidRow(
          column(width = 9, tags$video(src = "http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4", type = "video/mp4", height = "320px", 
                                       weight = "640px", controls = "controls")
          )
        )
      )
    )
  )
)}

server <- function(input, output, session){
  output$map <- renderLeaflet(
    leaflet() %>% 
      addTiles() %>% 
      setView(lng = -77.0387185, lat = 38.8976763, zoom = 10)
  )
}

shinyApp(ui, server)

闪亮-单张地图无法在全屏视频中正常显示

1 个答案: