css - 如何使用 css 设置传单搜索框位置（leaflet.extra 包）

Question

Leaftlet 允许有限的控件位置，例如“topleft”或“topright”。如何在 Shiny 中使用 CSS 设置传单搜索框位置（从 Leaflet.extra 包中搜索）？这是一个最小的例子：

      library(leaflet)
      library(leaflet.extras)
      library(shiny)

      ui <- fillPage(leafletOutput("mymap"))

      server <- function(input, output, session) {
        output$mymap <- renderLeaflet({
          leaflet() %>%
            addProviderTiles(providers$Esri.WorldStreetMap) %>%
            addSearchOSM()
        })

      }

      shinyApp(ui, server)

如何将搜索框设置在任何位置？（例如顶部中心？）

浏览器检查给了我一些元素：

 <a class="search-button" href="#" title="Search using Google Geocoder"     style="outline: none;"></a>

我用 css 尝试了什么：

      library(leaflet)                  
      library(leaflet.extras)
      library(shiny)

      ui <- fillPage(
       tags$head(tags$style(
         HTML('leaflet-search-button {margin-top: 100px;}
      '))
         ),
        leafletOutput("mymap")
        )

      server <- function(input, output, session) {
        output$mymap <- renderLeaflet({
          leaflet() %>%
            addProviderTiles(providers$Esri.WorldStreetMap) %>%
            addSearchOSM()
        })

      }

      shinyApp(ui, server)

标签： cssrshinyleaflet

Answer 1

您可以使用leaflet-control-search选择器。!important需要，以便您可以覆盖默认边距。

tags$head(tags$style(
  HTML('.leaflet-control-search {
    margin-top: 100px !important;
  }')
))