在Leaflet弹出窗口中查找SVG图形的示例

Question

我正在使用Leaflet和D3构建地图。我将这些点作为传单层引入。我想在弹出窗口中为这些包含SVG图形的点绑定弹出窗口。

有没有人见过这样的例子？我认为这是可能的，因为弹出窗口允许HTML，但我想找到一个有效的例子。

谢谢，

利

Answer 1

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

编辑：我将再添加一个例子。我有一个非常不同的外观/感觉Popup，所以我做的是扩展我自己。

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

当我初始化弹出窗口时，我为div添加了一个包装器，稍后我将使用JavaScript Graph API进行扩展（我使用JQuery Sparklines http://omnipotent.net/jquery.sparkline/）。

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

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

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

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