单击传单标记会将您带到 URL

Question

在 R 的传单包中，有没有办法点击一个标记，然后转到 URL？*

在 R 中，添加带有 URL 的弹出窗口：

library(leaflet)
content <- paste(sep = "<br/>",
                 "<b><a href='http://www.samurainoodle.com'>Samurai Noodle</a></b>"
)

leaflet() %>% addTiles() %>%
  addPopups(-122.327298, 47.597131,  content,
             options = popupOptions(closeButton = FALSE)
  )

添加标记也很简单，单击该标记会在弹出窗口中提供 URL：

leaflet() %>% addTiles() %>%
  addMarkers(-122.327298, 47.597131, popup =  content,
            options = popupOptions(closeButton = FALSE)
  )

也许在 ... 中传递给传单的一些习俗？

最后，自定义 JS 函数如何为每个地图标记显示不同的 URL？考虑示例 data.frame：

df <- data.frame(url = c("https://whosebug.com/questions/tagged/python",
                         "https://whosebug.com/questions/tagged/r")),
                 lng = c(-122.327298, -122.337298),
                 lat = c(47.597131,47.587131))

*这是，但我在这里再次提出这个问题，并制作了一个最小的、可重现的示例。

Answer 1

您可以使用 htmltools 或 htmlwidgets 添加 onclick 事件 javascript:

解决方案 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.whosebug.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.whosebug.com")
      };
      marker[0].addEventListener("click", openLink, false);
    }
  ')

每个标记不同url：

这是一种肮脏的方法，显示了一般方法。我没有时间再次熟悉 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://whosebug.com/questions/tagged/python");};
  marker[1].onclick=function(){window.open("https://whosebug.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 using for loop and passing values 中的方法，您可以遍历数据以获得每个标记的不同 url：

library(leaflet)
library(htmlwidgets)
df <- data.frame(url = c("https://whosebug.com/questions/tagged/python",
                         "https://whosebug.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)

单击传单标记会将您带到 URL

Clicking a leaflet marker takes you to URL

javascript

r

leaflet

htmlwidgets

htmltools

在 R 的传单包中，有没有办法点击一个标记，然后转到 URL？*