R 闪亮-传单地图未通过全屏视频正确显示

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

• 步骤1：单击“视频”选项卡
• 第二步：点击全屏按钮（视频）
• 步骤3：按ESC键
• 步骤4：单击仪表板选项卡

用户界面

服务器.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)
  )
}

库（“shinydashboard”）
图书馆（“闪亮”）
图书馆（“单张”）
功能（输入、输出、会话）{
输出$map%
addTiles（）%>%
设置视图（lng=-77.0387185，纬度=38.8976763，缩放=10）
)
}

---

谢谢

这对我来说似乎是一个bug，但我不确定哪一面是传单/反光板还是反光板，因为在使用

fluidPage

和

选项卡面板

时似乎也会发生这种情况

一种解决方法是在窗口上触发一个假调整大小事件，因为这显然解决了问题，在手动操作时也是如此

jscode

等待单击侧栏菜单列表并触发新的调整大小事件。通过将

标记$head（标记$script（jscode））

添加到

仪表板体，确保将Jquery代码包含在HTML中

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)

库（ShinydaShashboard）
图书馆（闪亮）
图书馆（单张）
jscode=HTML（“
$（文档）.on（'shiny:connected'，function（））{
$（'.sidebar menu li'）。在（'click'，function（）上{
dispatchEvent（新事件（'resize'））；
});
});
")
用户界面可能与。似乎需要强制刷新地图。例如，我在传单地图中添加了一个全屏按钮，该按钮使用来自于mobile.extras包的%>%addFullscreenControl（）进行刷新。我认为OP是指视频全屏按钮，因为我没有看到其他按钮。而在视频达到全尺寸后，传单地图无法正确渲染。但对我来说，它也像一只虫子。
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)