有没有办法让R上的传单地图弹出响应?

时间:2017-09-27 17:10:12

标签: html r leaflet

我使用此R代码(数据已更改)来创建我保留在服务器上的html文件:

enabled=1

问题在于,当我使用手机在浏览器上渲染文件时,引脚和弹出窗口非常小,当我放大地图时尺寸不会改变。 有没有办法让引脚和弹出更大?

1 个答案:

答案 0 :(得分:0)

想法

要实现这一目标,您需要使用this R传单文档页面中提到的函数htmlwidgets::onRender()注入的一些 javascript代码

你需要的 javascript 是一些jquery代码(传单R包中包含的javascript库),它将在生成的传单html文件的头部注入一个字符串,以使页面响应。这是javascript / jquery代码:

javascript $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0">')

具有可再现代码的R实现

# load leaflet library
library(leaflet)

# create the string for responsiveness that will be injected in the <head> section of the leaflet output html file. Note that the quotes were escaped using the backslash character : `\`.  
responsiveness = "\'<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\'"

# build a leaflet map with a stamen background
example.map <- leaflet() %>% 
  addProviderTiles(group = "Stamen",
                   providers$Stamen.Toner,
                   options = providerTileOptions(opacity = 0.25)
                   ) %>%
# add the javascript for responsivness
htmlwidgets::onRender(paste0("
    function(el, x) {
      $('head').append(",responsiveness,");
    }"))

# show the map
example.map

# output an save the html file of the leaflet map in the root of your working directory
saveWidget(widget=example.map,
           file= "example.html",
           selfcontained = TRUE
           )

验证输出example.html

的响应性

现在你的地图应该响应。您可以通过两种方式检查:

  1. 打开使用文本编辑器创建的example.html文件,并检查文件的<meta name="viewport" content="width=device-width, initial-scale=1.0">部分中是否存在html标记head

  2. 在浏览器中打开example.html文件。如果是chrome,请右键单击,检查并单击手机图标以显示您的页面,就好像它是在手机上呈现一样。如果是,则应该可以轻松访问缩放按钮(大尺寸)。