您可以使用htmltools
或使用 javascripthtmlwidgets
添加事件:onclick
解决方案1)与htmltools
:
library(leaflet)
map <- leaflet() %>%
addTiles() %>%
addMarkers(-122.327298, 47.597131, popup = 'LINK',
options = popupOptions(closeButton = FALSE)
)
library(htmltools)
browsable(
tagList(
list(
tags$head(
tags$script(
'
document.addEventListener("DOMContentLoaded", function(){
var marker = document.getElementsByClassName("leaflet-pane leaflet-marker-pane");
var openLink = function() {
window.open("https://www.stackoverflow.com")
};
marker[0].addEventListener("click", openLink, false);
})
'
)
),
map
)
)
)
解决方案 2 - 使用 htmlwidgets:
library(leaflet)
library(htmlwidgets)
leaflet() %>%
addTiles() %>%
addMarkers(-122.327298, 47.597131, popup = 'LINK',
options = popupOptions(closeButton = FALSE)
) %>%
onRender('
function(el, x) {
var marker = document.getElementsByClassName("leaflet-pane leaflet-marker-pane");
var openLink = function() {
window.open("https://www.stackoverflow.com")
};
marker[0].addEventListener("click", openLink, false);
}
')
每个标记的不同网址:
这是一种肮脏的方法,并显示了一般方法。我没有时间再次熟悉 JS 中的闭包以添加循环。
可以看这里: addEventListener using for loop and passing values。并且可以使用 onRender 函数将数据从 R 传递到 JS。
jsCode <- paste0('
function(el, x) {
var marker = document.getElementsByClassName("leaflet-marker-icon leaflet-zoom-animated leaflet-interactive");
marker[0].onclick=function(){window.open("https://stackoverflow.com/questions/tagged/python");};
marker[1].onclick=function(){window.open("https://stackoverflow.com/questions/tagged/r");};
}
')
library(leaflet)
library(htmlwidgets)
leaflet() %>%
addTiles() %>%
addMarkers(lng = df$lng, lat = df$lat, popup = 'LINK',
options = popupOptions(closeButton = FALSE)
) %>%
onRender(jsCode)
使用addEventListener 中的方法,使用 for 循环和传递值,您可以遍历数据以获取每个标记的不同 url:
library(leaflet)
library(htmlwidgets)
df <- data.frame(url = c("https://stackoverflow.com/questions/tagged/python",
"https://stackoverflow.com/questions/tagged/r"),
lng = c(-122.327298, -122.337298),
lat = c(47.597131,47.587131))
jsCode <- '
function(el, x, data) {
var marker = document.getElementsByClassName("leaflet-marker-icon leaflet-zoom-animated leaflet-interactive");
for(var i=0; i < marker.length; i++){
(function(){
var v = data.url[i];
marker[i].addEventListener("click", function() { window.open(v);}, false);
}()
);
}
}'
leaflet() %>%
addTiles() %>%
addMarkers(lng = df$lng, lat = df$lat, popup = 'LINK',
options = popupOptions(closeButton = FALSE)
) %>%
onRender(jsCode, data=df)