如何让我的 Shiny LeafletOutput 在 navbarPage 中具有 height="100%"？答案

【问题标题】：How can I make my Shiny leafletOutput have height="100%" while inside a navbarPage?如何让我的 Shiny LeafletOutput 在 navbarPage 中具有 height="100%"？
【发布时间】：2015-09-25 13:16:32
【问题描述】：

（老用户，第一次发帖）

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

问题是，当我将此代码放在 navbarPage 中时，它不再起作用并且我的地图停止显示（下面的控制台错误）。我尝试通过添加 tags$style(type = "text/css", "#map {height: 100%};") 来注入 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,...

【问题讨论】：

你还有js吗？ js错误在哪一行被抛出？它试图读取的属性是什么未定义的变量？

标签： r shiny leaflet

【解决方案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,...
))

【讨论】：