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

Question

Leaflet 允许有限的控制位置，例如“左上”或“右上”。如何在 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)

Answer 1

您可以使用

leaflet-control-search

选择器。需要

!important

，以便您可以覆盖默认边距。

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