R-Shiny中的Leaflet：Leaflet地图的高度为100％

leaflet in R-shiny: 100% height of leaflet map

我正在尝试构建一个显示Leaflet地图的应用程序。使用该应用程序的人通常是通过移动设备来完成此操作的-因此，在整个屏幕上提供地图会很方便。
您可以在此处查看该应用程序：https://js1984.shinyapps.io/stackoverflow/

对于leafletOutput("mymap", width = "100%")的宽度它可以很好地工作，但是我不能将height设置为leafletOutput("mymap", width = "100%", height ="100%")：当我运行应用程序时，地图会消失...将height设置为固定值可以很好地工作，但不是您可能会想到的选项。

到目前为止，我发现的所有解决方案都不适用于我：例如在CSS中设置高度：100％：

1
2
3
4
5
6

html, body, #mymap {
height:100%;
width:100%;
padding:0px;
margin:0px;
}

应用程序的UI部分如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

ui <- navbarPage(title ="test",
collapsible = T,
position="static-top",
inverse = T,
#####################################
# the tab panel that includes the MAP
#####################################
tabPanel("Map",
includeCSS(path="www/bootstrap.css"),
leafletOutput("mymap", width = "100%")
),
#####################################
# other tab panels
#####################################
tabPanel("Fri",
fluidRow(
includeCSS(path="www/bootstrap.css"),
column(6,
offset = 3,
wellPanel(
checkboxGroupInput("freitag",
h3("Freitag"),
list_fr,
selected = 1
)
)
)
)
),
tabPanel("Sat",
fluidRow(
column(6,
offset = 3,
wellPanel(
checkboxGroupInput("samstag",
h3("Samstag"),
list_sa
)
)
)
)
),
tabPanel("Sun",
fluidRow(
column(6,
offset = 3,
wellPanel(
checkboxGroupInput("sonntag",
h3("Sonntag"),
list_so
)
)
)
)
),
tabPanel("Mon",
fluidRow(
column(6,
offset = 3,
wellPanel(
checkboxGroupInput("montag",
h3("Montag"),
list_mo
)
)
)
)
),
tabPanel("Tues",
fluidRow(
column(6,
offset = 3,
wellPanel(
checkboxGroupInput("dienstag",
h3("Dienstag"),
list_di
)
)
)
)
)
)

相关讨论

正如Dogan Askan在此评论中所指出的(谢谢！)，一种使用calc()的解决方案以及该窗口对我有用。有关更多详细示例，请参见此答案。

请参阅此解决方案。它将css应用于容器流体类，这对于其他选项卡可能是不利的.... adjust.css进入www文件夹。基本思想来自此处

该应用程序也在此链接上

ui.R

library(shiny)
library(leaflet)

shinyUI(tagList(
tags$head(
HTML("<link rel='stylesheet' type='text/css' href='adjust.css'>"),
HTML("<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />")
),
navbarPage(title ="test",
collapsible = T,
position="static-top",
inverse = T,
#####################################
# the tab panel that includes the MAP
#####################################

tabPanel("Map",
#tags$div(id="map",
leafletOutput("mymap")
#)
),
#####################################
# other tab panels
#####################################
tabPanel("Fri",
fluidRow(

column(6,
offset = 3,
wellPanel(
checkboxGroupInput("freitag",
h3("Freitag"),
c("1","2","3"),
selected = 1
)
)
)
)
),
tabPanel("Sat",
fluidRow(
column(6,
offset = 3,
wellPanel(
checkboxGroupInput("samstag",
h3("Samstag"),
c("1","2","3")
)
)
)
)
),
tabPanel("Sun",
fluidRow(
column(6,
offset = 3,
wellPanel(
checkboxGroupInput("sonntag",
h3("Sonntag"),
c("1","2","3")
)
)
)
)
),
tabPanel("Mon",
fluidRow(
column(6,
offset = 3,
wellPanel(
checkboxGroupInput("montag",
h3("Montag"),
c("1","2","3")
)
)
)
)
),
tabPanel("Tues",
fluidRow(
column(6,
offset = 3,
wellPanel(
checkboxGroupInput("dienstag",
h3("Dienstag"),
c("1","2","3")
)
)
)
)
)
)
))

server.R

1
2
3
4
5
6
7
8
9
10
11
12
13
14

library(shiny)
library(leaflet)

shinyServer(function(input, output) {
output$mymap <- renderLeaflet({
points <- cbind(rnorm(40) * 2 + 13, rnorm(40) + 48)

leaflet() %>%
addProviderTiles("Stamen.TonerLite",
options = providerTileOptions(noWrap = TRUE)
) %>%
addMarkers(data = points)
})
})

adjust.css

1
2
3
4
5
6
7
8
9
10

body, .container-fluid {
padding: 0;
margin: 0;
}

html, body, #mymap {

height: 100%;
width: 100%;
}