在 R 中的传单地图上单击按钮时显示和隐藏数据表

Question

我使用 R 中的一些包绘制了一张带有 'datatable' 的地图。要在传单地图中包含更多 space，我需要一个按钮来 show/hide 数据表部分。怎么做？ R代码如下：

library(leaflet)
library(DT)
library(crosstalk)

df <- read.csv(textConnection(
    "Name,Lat,Long
    Samurai Noodle,47.597131,-122.327298
    Kukai Ramen,47.6154,-122.327157
    Tsukushinbo,47.59987,-122.326726"
))

sdf <- SharedData$new(df, df$Name)

lflt<-leaflet(sdf) %>% addTiles() %>%
    addMarkers(~ Long, ~ Lat)%>%addEasyButtonBar(
easyButton(
 icon = htmltools::span(class = "star", htmltools::HTML("+")),
 onClick = JS("function(btn, map){ alert(\"Button 1\");}")))

bscols(lflt,      datatable(sdf, width = "100%"))

Answer 1

您可以尝试 javascript 和 css 设置吗？像下面这样的东西。这可能不是最好的方法，但它只是在单击按钮时将数据 table 显示更改为 'none'。并且还将地图的宽度更改为 100%。

lflt<-leaflet(sdf, elementId = "map") %>% addTiles() %>%
    addMarkers(~ Long, ~ Lat)%>%addEasyButtonBar(
easyButton(
 icon = htmltools::span(class = "star", htmltools::HTML("+")),
 onClick = JS("function(btn, map){ 
    let table = document.getElementsByClassName('datatables')[0];
    let map2 = document.getElementById('map');
    table.style.display = table.style.display == 'none' ? 'block' : 'none';
    map2.parentNode.style.width = table.style.display == 'none' ? '100%' : '50%';
    map2.style.position = map2.style.position == '' ? 'relative' : '';
    map.invalidateSize()
              }")))

bscols(lflt,      datatable(sdf))

在 R 中的传单地图上单击按钮时显示和隐藏数据表

Show and hide Datatable upon button click on leaflet map in R

javascript

r

leaflet