Question

我在Ruby on Rails应用程序中使用Mapbox。对于我的生活，我无法让地图坚持任何简单的CSS。允许地图出现的唯一CSS是给它一个顶部和底部为0的绝对位置。更改高度和宽度以外的任何内容都会导致地图消失。我想让地图集中在容器div中。这是代码：

<div id="map-container">
  <div id='map'>
  </div>
</div>

<script>

L.mapbox.accessToken = 'pk.eyJ1IjoiYWxvb2thdG9tbW9yb3ciLCJhIjoiNGM4ODhkZjUwMGM1ZDE4M2VjNzQ4MmQ4ODcxMjk5ZjMifQ.XVvFc8kl-0z4NAblE-mNqw';
var map = L.mapbox.map('map', 'mapbox.streets').setView([40, -74.50], 10);

</script>

以下CSS：

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 50%;
  width: 50%;
}

如果我改变任何东西，地图就会消失。我试图给map-container div一个相对位置。这不起作用。我想要的只是将地图包含在div中，看起来似乎并不困难。从2013年开始有一篇关于此的帖子，但它已经过时了。谢谢你的帮助。

Answer 1

当定位静态/相对时，为Leaflet设置唯一的css规则（Mapbox是Leaflet的扩展版本）元素是一个绝对的高度：

#map {
    height: 200px;
}

示例：http://plnkr.co/edit/vdeyLv?p=preview

这将永远有效，并不重要的是嵌套元素的深度。如果未设置宽度，则将使用所有可用宽度。当您想要以百分比切换到设置高度时，您需要确保地图元素的所有anchestor元素也具有高度设置：

#html, #body, #map-container {
    height: 100%;
}

#map {
    height: 40%;
}

示例：http://plnkr.co/edit/rAuNC0?p=preview

我认为在Mapbox示例中使用绝对定位背后的原因是人们无需解释上述内容，因为无论您对地图的元素有多深，它都能正常工作。

Answer 2

只需将两个div的“ position：absolute”更改为“ position：relative”：

library(tm)
library(wordcloud)
library(memoise)
# new libs
library(twitteR)
library(tidyverse)
library(tidytext)


ui <- fluidPage(
    # Application title
    titlePanel("Word Cloud"),

    sidebarLayout(
        # Sidebar with a slider and selection inputs
        sidebarPanel(
            textInput("selection", "Input your search term:",
                      ""),
            actionButton("update", "Change"),
            hr(),
            sliderInput("freq",
                        "Minimum Frequency:",
                        min = 1,  max = 50, value = 15),
            sliderInput("max",
                        "Maximum Number of Words:",
                        min = 1,  max = 300,  value = 100)
        ),

        # Show Word Cloud
        mainPanel(
            plotOutput("plot")
        )
    )
)
#Define server logic

api_key <- Sys.getenv("twitter_api")
api_secret  <- Sys.getenv("twitter_secret")
access_token <- Sys.getenv("twitter_access_token")
access_secret <- Sys.getenv("twitter_access_secret")

server <- function(input, output, session) {
    tweets_clean <- reactiveValues(df = NULL)
    # Define a reactive expression for the document term matri
        #Here we are creating the "handshake" with Twitter
        setup_twitter_oauth(access_token = access_token ,access_secret = access_secret,
                            consumer_key = api_key,consumer_secret = api_secret )

    observeEvent(input$update,{

        tw <- searchTwitter(input$selection, n=input$max, lang='en', resultType = "recent")
        # tweets to df so we could use tidytext
        df <- twListToDF(tw)
        # use dplyr and tidytext to clean your tweets
        tweets_clean$df <- df %>%
            dplyr::select(text) %>%
            tidytext::unnest_tokens(word, text) %>%
            count(word, sort = TRUE) 
    })
    output$plot <- renderPlot({
        # plot it
        if(is.null(tweets_clean$df)){
            NULL
        } else{
            wordcloud(tweets_clean$df$word, tweets_clean$df$n)
        }
    })

}

# Run the application 
shinyApp(ui = ui, server = server)`enter code here`

注意：“＃map”元素上的高度和宽度将由父div“＃map-container”继承，在这种情况下或您设置的任何值都分别为“ 180px”和“ 600px”。 / p>

演示：http://plnkr.co/edit/qjIAiud3aUF11iQPDKj0?p=preview

将mapbox / leaflet映射定位在容器div中

2 个答案: