Question

（长期用户，第一次海报）

我正在使用一个使用Leaflet包的Shiny App。没有导航菜单，我可以使用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

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

第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,...
))

在navbarPage中，如何让我的Shiny leafletOutput具有height =“100％”？

1 个答案: