javascript - 结合 plotly 和 folium

Question

使用 python 我正在尝试使用 Folium 构建带有标记的 map 。这工作正常，但现在我开始尝试将 plot.ly 图表添加到 map 中，但效果不佳。传单 (Folium) 弹出窗口中不可能有 javascript 吗？

html文件中的js代码如下所示:

var marker_7ecf53df703f455c9b8e9342784a4fde = L.marker([-30.0,31.25], {
            icon: new L.Icon.Default()
        }
    ).addTo(map_698b07e412264d16ab4a7628d18d6a7a);


var popup_d63d578364d04568bda1b68bc0a870d7 = L.popup({maxWidth: '300'});

var html_deaec1fcc80d483faff605dcfa6691ff = $('<div id="html_deaec1fcc80d483faff605dcfa6691ff" style="width: 100.0%; height: 100.0%;"><div id="5be3c360-6f61-47fc-af22-c43d8a2c16ed" style="height: 100%; width: 100%;" class="plotly-graph-div"></div><script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("5be3c360-6f61-47fc-af22-c43d8a2c16ed", [{"marker": {"color": "rgb(106,81,163)"}, "r": [77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5], "type": "area", "name": "11-14 m/s", "t": [0, 45, 90, 135, 180, 225, 270, 315]}], {"radialaxis": {"ticksuffix": "%"}, "title": "Wind Speed Distribution in Laurel, NE", "font": {"size": 16}, "orientation": 270, "legend": {"font": {"size": 16}}}, {"linkText": "Export to plot.ly", "showLink": true})</script></div>')[0];

popup_d63d578364d04568bda1b68bc0a870d7.setContent(html_deaec1fcc80d483faff605dcfa6691ff);

marker_7ecf53df703f455c9b8e9342784a4fde.bindPopup(popup_d63d578364d04568bda1b68bc0a870d7);

我包括这样的弹出窗口:

for rowNum, rowValues in data.iterrows():
    popup = folium.Html(polarHtml, script=True) # polarHtml is the html
    folium.Marker([rowValues['latitude'], rowValues['longitude']], popup=folium.Popup(popup)).add_to(map_osm)

如果我只在弹出窗口中使用简单的 HTML， map 就可以正常工作。有人知道哪里出了问题吗？

Answer 1

最后我确实“解决”了它。虽然我不是 IFrame 的忠实粉丝，但我最终还是像这样结合了 folium.HTML 和 folium.IFrame:

folium.Popup(folium.Html('aa<br>'+folium.IFrame(polarHtml, width='410px', height='410px').render(), script=True), max_width=2650)