如何使我的 Shiny leafletOutput 在 navbarPage 内具有 height="100%" ？

（长期用户，第一次发帖）

我正在开发一个使用 Leaflet 包的闪亮应用程序。没有导航菜单，我可以通过使用使 LeafletOutput 具有 100% 高度leafletOutput('map', height='100%').

问题是，当我将此代码放入 navbarPage 中时，它不再起作用，并且我的地图停止显示（下面的控制台错误）。我尝试通过添加注入 CSS 代码tags$style(type = "text/css", "#map {height: 100%};")但这似乎没有任何效果。如果我将其更改为tags$style(type = "text/css", #map {height: 100% !important};")，代码再次中断，我在控制台中收到相同的错误代码：

Uncaught TypeError: Cannot read property 'clearLayers' of undefined
Uncaught TypeError: Cannot read property 'addLayer' of undefined
Uncaught TypeError: Cannot read property 'clear' of undefined
Uncaught TypeError: Cannot read property 'add' of undefined

这些错误分别在 leaflet.js 的第 814、726、979 和 1095 行抛出。这些行的代码如下：

第 814 行：this.layerManager.clearLayers("shape");
第 726 行：this.layerManager.addLayer(layer, category, thisId, thisGroup);
第 979 行：this.controls.clear();
第 1095 行：this.controls.add(legend, options.layerId);

以下是我的 UI.R 文件中的相关代码：

navbarPage("DHIS Data Explorer",
       tabPanel("Plot",
                tags$style(type = "text/css", "html, body, #map {width:100%;height:100%}"),
                leafletOutput('map', height = "100%"), #this height variable is what breaks the code.
                absolutePanel(top = 60, right = 10, draggable=TRUE,...

这是我在添加导航之前使用的代码，效果很好：

bootstrapPage(
  tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
  leafletOutput("map", width = "100%", height = "100%"),
  absolutePanel(top = 60, right = 10, draggable=TRUE,...

我直接从SuperZip例子。你只需要把所有东西都包裹在一个<div>并相应地设置CSS。这可能是适合您的解决方案：

1. 改变你的tags$style线路至

   tags$style(type = "text/css", ".outer {position: fixed; top: 41px; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0}")
   

2. 将你的物体包裹在<div class="outer"></div>。例如，

   bootstrapPage(div(class="outer",
       tags$style(type = "text/css", ".outer {position: fixed; top: 41px; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0}"),
       leafletOutput("map", width = "100%", height = "100%"),
       absolutePanel(top = 60, right = 10, draggable=TRUE,...
   ))