有没有一种方法可以使传单地图弹出窗口对R作出响应? [英] Is there a way to make leaflet map popup responsive on R?
问题描述
我使用此R代码(数据已更改)创建我保存在服务器上的html文件:
I use this R code (data was changed) to create an html file that I keep on a server:
library(leaflet)
leaflet() %>%
addProviderTiles(providers$OpenStreetMap) %>%
setView(lng=2.333333, lat=48.866667, zoom=12) %>%
addMarkers(lng=2.333333, lat=48.866667, popup='Test')
问题在于，当我使用手机在浏览器中呈现文件时，图钉和弹出窗口非常小，并且在缩放地图时大小不会改变.有没有办法使图钉和弹出窗口更大?
The problem is that when I render the file on a browser using a mobile phone, the pin and popup are extremely small and the size doesn't change when I zoom on the map. Is there a way to make the pin and popup bigger ?
推荐答案
想法
要实现此目的，您将需要使用一些 javascript代码，这些 javascript代码是使用
The idea
To achieve this, you will need to use some javascript code that you inject using the function htmlwidgets::onRender() as mentioned on this R leaflet documentation page.
您需要的 javascript 是一些jquery代码(传单R包随附的javascript库)，它将在生成的传单html文件的头部注入字符串以使页面响应.这是javascript/jquery代码:
The javascript you need is some jquery code (a javascript library included with the leaflet R package) that will inject a string in the head of the generated leaflet html file to make the page responsive. Here is the javascript/jquery code :
javascript$('head').append('<元名称=视口" content ="width = device-width，initial-scale = 1.0">')
# 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
的响应度现在您的地图应该可以响应了.您可以通过两种方式进行检查:
Verification of the responsiveness of the output example.html
Now your map should be responsive. You can check this in two ways :
-
打开使用文本编辑器创建的
example.html文件，并检查html标签< meta name ="viewport" content ="width = device-width，文件的.head部分中存在initial-scale = 1.0>
open the
example.htmlfile created with a text editor and check that the html tag<meta name="viewport" content="width=device-width, initial-scale=1.0">is present in theheadsection of your file.
在浏览器中打开 example.html 文件.如果是chrome，请右键单击，检查并单击手机图标，以显示您的页面，就像在手机上渲染的一样.如果是，则缩放按钮应该易于操作(大尺寸).
open the example.html file in your browser. If chrome, right-click, inspect and click on the mobile phone icon to show your page as if it was rendered on a mobile phone. If yes, the zoom buttons should be easily accessible (big size).
这篇关于有没有一种方法可以使传单地图弹出窗口对R作出响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
