单击传单标记将您带到URL

Question

在R的宣传资料包中，是否可以点击标记并定向到URL？*

在JS中这似乎是可能的。

添加带有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("/sf/ask/tagged/python/",
                         "/sf/ask/tagged/r/")),
                 lng = c(-122.327298, -122.337298),
                 lat = c(47.597131,47.587131))

---

* 之前曾有人问过这个问题，但我在这里再问一个问题，并举一个最小的，可复制的例子。

Answer 1

您可以使用htmltools或通过javascript htmlwidgets添加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中的闭包以添加循环。

可以在这里看一下： 使用for循环和传递值的addEventListener。并且可以使用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("/sf/ask/tagged/python/");};
  marker[1].onclick=function(){window.open("/sf/ask/tagged/r/");};
}
 ')


 library(leaflet)
 library(htmlwidgets)
 leaflet() %>% 
   addTiles() %>%
   addMarkers(lng = df$lng, lat = df$lat, popup =  'LINK',
              options = popupOptions(closeButton = FALSE)
   ) %>%
   onRender(jsCode)