問題描述

這里是 JS 解決方案.

在 R 中，添加帶有 URL 的彈出窗口:

In R, to add a Popup with a URL:

library(leaflet)
content <- paste(sep = "<br/>",
                 "<b><a >Samurai Noodle</a></b>"
)

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

添加一個標記也很簡單，當單擊該標記時，會在彈出窗口中提供一個 URL:

It's also straightforward to add a Marker that, when clicked, provides a URL in the popup:

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

也許某些自定義傳遞給 ... 中的傳單?

Perhaps something custom passed to leaflet in ...?

最后，自定義 JS 函數如何為每個地圖標記顯示不同的 URL?考慮示例 data.frame:

Lastly, how could a custom JS function display different URLs for each map marker? Consider the example data.frame:

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))

<小時>

*這是以前問過的，但我問的是這個問題再次在這里并制作一個最小的，可重現的例子.

*This was previously asked, but I'm asking the question again here and making a minimal, reproducible example.

推薦答案

你可以使用 htmltools 或 htmlwidgets 添加一個 onclick 事件javascript:

You could use htmltools or htmlwidgets to add an onclick event with 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.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 中的閉包以添加循環.

This is a dirty approach and shows the general way. I lack time to get comfortable with closures in JS again to add a loop.

可以看這里:addEventListener 使用 for 循環和傳遞值.并且可以通過 onRender 函數將數據從 R 傳遞到 JS.

One could look here: addEventListener using for loop and passing values. And data can be passed from R to JS with the onRender function.

 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:

Using the approach from addEventListener using for loop and passing values, you can loop through the data to get different a url for each marker:

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)

這篇關于單擊傳單標記會將您帶到 URL的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！