Folium 地图填补了移动设备中的空白 phone

Question

我使用 Flask 制作了一个网络应用程序，主体中有导航栏和 Folium 地图。它在电脑上运行良好，但当我尝试在手机 phone 中打开它时，地图并没有填满整个屏幕。所以我试着做这个 class

class React(MacroElement):
   _template = Template(u"""
            {% macro script(this, kwargs) %}
              $(window).on("resize", function() {
                $("#{{this._parent.get_name()}}").height($(window).height()).width($(window).width());
                {{this._parent.get_name()}}.invalidateSize();
                }).trigger("resize");
            {% endmacro %}
            """) #noqa
   
   def __init__(self):
        super(React, self).__init__()
        self._name = 'React'

然后通过m.add_child(React())添加到我的地图。不幸的是它没有改变任何东西。我也想避免使用全屏插件。我尝试了 CSS 将祖先容器的高度和宽度设置为 100% 的方法，但它不起作用

Answer 1

[已解决]通过制作祖先容器100vh或100%然后添加这个

fig = branca.element.Figure(height="100%")
fig.add_child(m)

我不再需要 React class

Folium 地图填补了移动设备中的空白 phone

Folium map fill white gap in mobile phone

javascript

python

leaflet

folium