单击 R Leaflet 中的“插件”脉冲标记时添加一个弹出窗口答案

【问题标题】：Add a popup when clicked through to a 'plugin' pulsing marker in R Leaflet单击 R Leaflet 中的“插件”脉冲标记时添加一个弹出窗口
【发布时间】：2019-11-20 19:43:24
【问题描述】：

我设法（在 SO 的帮助下）将 pulsing 标记从插件放到带有 R 传单包的地图中，并使用以下脚本：

library(leaflet)
library(htmltools)
library(htmlwidgets)

# This tells htmlwidgets about our plugin name, version, and
# where to find the script. (There's also a stylesheet argument
# if the plugin comes with CSS files.)

esriPlugin <- htmlDependency("leaflet-icon-pulse",version = "1.0",
                             src = "realtimemap/",
                             script = "L.Icon.Pulse.js",stylesheet ="L.Icon.Pulse.css")

# A function that takes a plugin htmlDependency object and adds
# it to the map. This ensures that however or whenever the map
# gets rendered, the plugin will be loaded into the browser.
registerPlugin <- function(map, plugin) {
  map$dependencies <- c(map$dependencies, list(plugin))
  map
}

content <- paste(sep = "<br/>",
                 "<b><a> Homicide </a></b>",
                 "606 5th Ave. S",
                 "Ocean District, CA 98138"
)

leaflet() %>% addProviderTiles("CartoDB.DarkMatter") %>% setView(-122.4105513,37.78250256, zoom = 12) %>%
  addPopups(-122.41, 37.78, content,
            options = popupOptions(closeButton = TRUE)
  ) %>%
  registerPlugin(esriPlugin) %>%
  # Add your custom JS logic here. The `this` keyword
  # refers to the Leaflet (JS) map object.
  onRender("function(el,x) {
var pulsingIcon = L.icon.pulse({iconSize:[20,20],color:'red'});
var pulsingIcon2 = L.icon.pulse({iconSize:[15,15],color:'orange',heartbeat:2}); 
           var marker = L.marker([37.78,-122.41],{icon: pulsingIcon}).addTo(this);
           var marker = L.marker([37.75,-122.39],{icon: pulsingIcon2}).addTo(this);}")

但是现在，如果我点击那些脉冲标记，我想显示一些信息。当然，我不能使用传单包中的 addpopup 或 addmarker，因为我必须使用非正统的方式从插件中添加标记。你会怎么做？

【问题讨论】：

为什么不在同一位置添加一个带有所需弹出窗口的透明圆圈标记？
哇还不错。我要试试！！
@TimSalabim 真可惜，我似乎无法将圆形标记放在脉冲标记的顶部。
确实可惜。我明天看看。也许我们可以用 z-index 做点什么。
Z 索引？好的，谢谢你的帮助，再见

标签： javascript r leaflet

【解决方案1】：

好的，我发现了一些东西。通过这样做，它可以工作！！！

  onRender("function(el,x) {
var pulsingIcon = L.icon.pulse({iconSize:[20,20],color:'red',heartbeat:0.5});
var pulsingIcon2 = L.icon.pulse({iconSize:[10,10],color:'orange',heartbeat:2});
           var marker = L.marker([37.78,-122.41],{icon: pulsingIcon}).bindPopup('<b>Hello world!</b><br>I am a popup.').openPopup().addTo(this);
           var marker = L.marker([37.75,-122.39],{icon: pulsingIcon2}).addTo(this);
           }")

【讨论】：

【解决方案2】：

Try this Demo:

https://jsfiddle.net/xbv5egyz/29/

[![enter image description here][1]][1]

https://i.stack.imgur.com/w5mrO.png

【讨论】：