svg - 在 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*/ });

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