Django集成Folium地图问题：如何正常显示并设置尺寸？

嘿，作为刚折腾过Django+Folium的新手，太懂你这个困惑了！你遇到的问题是因为直接把Folium的Map对象传到模板，它只会输出对象的字符串表示，而不是渲染成可交互的地图。咱们一步步改就能搞定，还能顺便设置地图尺寸：

第一步：修改视图代码（polls/views.py） #

你需要把Folium地图转换成HTML字符串，而不是直接传Map对象。另外可以在创建地图时直接指定尺寸，或者后面在模板里控制：

def show_map(request):
    # 创建地图时可直接设置宽高，支持百分比或像素值
    m = folium.Map([51.5, -0.25], zoom_start=10, width='100%', height='800px')
    
    test = folium.Html('<b>Hello world</b>', script=True)
    popup = folium.Popup(test, max_width=2650)
    folium.RegularPolygonMarker(location=[51.5, -0.25], popup=popup).add_to(m)
    
    # 关键：调用_repr_html_()生成地图的HTML代码
    map_html = m._repr_html_()
    context = {'my_map': map_html}
    
    return render(request, 'polls/show_folium_map.html', context)

第二步：修改模板代码（show_folium_map.html） #

Django模板默认会转义HTML内容，所以必须用|safe过滤器让它正确渲染地图的HTML和JS代码：

<h1>map result comes here</h1>
<!-- 使用safe过滤器避免HTML被转义 -->
{{ my_map|safe }}

如果不想在创建地图时固定尺寸，也可以用HTML容器来控制，比如：

<h1>map result comes here</h1>
<div style="width: 90%; height: 700px; margin: 0 auto;">
    {{ my_map|safe }}
</div>

为什么这样能解决问题？ #

• Folium的Map对象自带_repr_html_()方法，这个方法会生成渲染交互式地图所需的完整HTML、CSS和JavaScript代码
• Django模板出于安全考虑，会自动转义所有HTML内容，所以必须加上|safe过滤器，告诉Django这段内容是安全的，可以直接渲染

这样改完之后，刷新页面就能看到正常显示的交互式地图啦，尺寸也能按照你的需求调整~

内容的提问来源于stack exchange，提问作者adhg