在传单弹出窗口中寻找SVG图形的示例 [英] looking for examples of SVG graphics in Leaflet popups

问题描述

我正在使用Leaflet和D3构建地图.我把这些要点作为一个Leaflet层.我想为弹出式窗口绑定这些弹出式窗口，这些弹出式窗口中包括SVG图形.

I am building a map with Leaflet and D3. I am bringing in the points as a Leaflet layer. I would like to bind popups for these points that include SVG graphics in the popup.

有人看过这样的例子吗?我认为这是可能的，因为弹出窗口中允许使用HTML，但是我想找到一个有效的示例.

Has anyone seen examples of this? I think it is possible since HTML is allowed in the popup but I would like to find a working example.

谢谢

李

推荐答案

这绝对有可能.像往常一样在弹出窗口中使用HTML.例如，您可以在弹出窗口中添加<div class="popupGraph"/>元素.然后，只需像平常一样使用JavaScript来显示该元素中想要的任何内容即可.

It's definitely possible. Use HTML in your popup as you normally would. For instance, you could add a <div class="popupGraph"/> element in your popup. Then simply use JavaScript as you normally would to display whatever you want in that element.

我将添加更多示例.我对弹出窗口的外观/感觉截然不同，所以我所做的就是扩展自己的弹出窗口.

I'll add a bit more of an example. I have a very different look/feel for a Popup, so what I did was extend my own.

myPopup = L.Popup.extend({ ... });

初始化弹出窗口时，我为div添加包装，稍后将使用JavaScript Graph API对其进行充气(我使用JQuery Sparklines http://omnipotent.net/jquery.sparkline/).

When I initialize the popup, I add a wrapper for a div that I'll inflate with JavaScript Graph API later (I use JQuery Sparklines http://omnipotent.net/jquery.sparkline/).

this._graphContainer = L.DomUtil.create('div', 'myGraph', this.container);

然后我可以像对待其他任何图形一样对待它.

Then I can treat this like any other graph.

$(this._graphContainer).sparkline({ /*my options here*/ });

这将在我的弹出窗口中显示实时更新的图形.

This will display a live, updating graph in my popup.

这篇关于在传单弹出窗口中寻找SVG图形的示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！