Question

使用python我正在尝试使用Folium构建带有标记的地图。这工作正常，但是现在我已经开始尝试将plot.ly图添加到地图中，但效果不佳。是否不可能在传单（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，那么地图就可以了。有人知道这出错了吗？

Answer 1

我做过＆＃34;解决＆＃34;它到底。虽然我不是IFrame的忠实粉丝，但我最终将folium.HTML和folium.IFrame结合起来：

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

结合了情节和叶子

1 个答案: