r - 如何使我的 Shiny LeafletOutput 在 navbarPage 内具有高度 ="100%"？

Question

(老用户，第一次发帖)

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

问题是当我将此代码放在 navbarPage 中时，它不再起作用并且我的 map 停止显示(下面的控制台错误)。我尝试通过添加 tags$style(type = "text/css", "#map {height: 100%};") 来注入(inject) CSS 代码但这似乎没有任何效果。如果我将其更改为 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,...

Answer 1

我直接从 SuperZip 复制了这个例子。您只需将所有内容包装在 <div> 中并相应地设置 css。这里可能是适合您的解决方案:

更改您的 tags$style线到

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

将您的对象包裹在 <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,...
))