代码之家  ›  专栏  ›  技术社区  ›  Wilcar

如何用css设置leaftlet searchbox位置(fluel.extra package)

  •  0
  • Wilcar  · 技术社区  · 6 年前

    leaftlet允许有限的控件位置,如“左上角”或“右上角”。我怎么能用闪亮的CSS设置小叶搜索框的位置(从小叶搜索?额外的包装)? 下面是一个简单的例子:

          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)
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   GyD    6 年前

    你可以使用 leaflet-control-search 选择器。 !important 需要重写默认边距。

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

    demo