如何在 R Shiny 中制作全尺寸地图？答案

【问题标题】：How to make map full-size in R Shiny?如何在 R Shiny 中制作全尺寸地图？
【发布时间】：2021-04-26 23:39:24
【问题描述】：

我在 SO (How to get Leaflet for R use 100% of Shiny dashboard height) 上看到了类似的问题，当我使用 shinydashboard 时，这个解决方案对我有用。现在，我更改为bs4Dash 库（从 GitHub 下载的 2.0.0 版），这个解决方案不起作用。关键代码在这里：

bs4Dash::dashboardBody(
  mapboxer::mapboxerOutput("map")
)

和CSS：

#map { 
  height: calc(100vh - 57px) !important;
}

使用它时，我可以在地图右侧看到边距（？）：

我根本无法删除这个边距。

当我将vw 添加到 CSS 时：

#map { 
  height: calc(100vh - 57px) !important;
  width: calc(100vw - 73.594px) !important;
}

然后这个奇怪的边缘完全消失了，地图现在是全尺寸的，但是当我打开左侧的侧边栏并且地图向右移动时，滚动条会出现在右侧和底部（这真的很烦人）：

我尝试了许多 CSS 组合以使其正常工作，但它们都不起作用。在 shinydashboardPlus 中一切都很好，但在 bs4Dash 中它不像以前那样工作。我还检查了这个解决方案：http://bl.ocks.org/d3noob/7654694，但这仍然不是一个好的选择。

【问题讨论】：

标签： css r shiny leaflet shinydashboard

【解决方案1】：

我终于找到了制作全尺寸地图框的解决方案。我将这段代码添加到 CSS 中：

#map { 
       height: calc(100vh - 57px) !important; 
       width: calc(100vw - 73.594px) !important; 
     }

.wrapper { 
       overflow-x: hidden; 
       overflow-y: auto; 
     }

感谢这段代码，当您打开侧边栏时，底部和右侧不会出现滚动条，一切正常（好的，打开侧边栏时，右下角的文本“地图框”和地图描述也会移动但我认为这不是问题）。我注意到那些 .wrapper 样式选项在 shinydashboardPlus 包中是默认的，但在 bs4Dash 中没有，所以我需要将它们添加到 CSS 中。

因此，取决于闪亮的包，有时是地图提供者，需要对 CSS 代码进行一些小的更改，以使地图全尺寸并避免滚动条。

【讨论】：