如何在Python的for循环中用.format()自定义Folium HTML弹窗？

针对你遇到的问题，这里提供两种可靠的解决方式，帮你在views.py的循环里把venue.name等变量正确嵌入自定义弹窗HTML：

方法1：使用Python f-string（最简便直接） #

在views.py的循环中，直接用Python的f-string语法把模型变量插入到HTML字符串里，这是最直观的写法：

import folium
from django.shortcuts import render
from .models import Venue

def map_view(request):
    # 初始化地图
    m = folium.Map(location=[40.7128, -74.0060], zoom_start=12)
    
    # 遍历所有场地数据
    for venue in Venue.objects.all():
        # 用f-string将venue变量嵌入HTML模板
        popup_html = f"""
        <div style="width: 220px; padding: 10px;">
            <img src="{venue.logo.url}" alt="{venue.name}" style="width: 100%; border-radius: 4px;">
            <h4 style="margin: 8px 0;">{venue.name}</h4>
            <p style="font-size: 14px; color: #666;">{venue.address}</p>
        </div>
        """
        # 创建弹窗并设置最大宽度
        popup = folium.Popup(popup_html, max_width=300)
        # 添加标记到地图
        folium.Marker(
            location=[venue.latitude, venue.longitude],
            popup=popup,
            tooltip=venue.name
        ).add_to(m)
    
    # 将地图转为HTML字符串传给前端模板
    map_html = m._repr_html_()
    return render(request, 'map.html', {'map_html': map_html})

方法2：利用Django模板渲染（适合复杂HTML结构） #

如果弹窗的HTML结构比较复杂，不想在views.py里写大段字符串，可以用Django的模板渲染机制来处理：

import folium
from django.shortcuts import render
from django.template import Template, Context
from .models import Venue

def map_view(request):
    m = folium.Map(location=[40.7128, -74.0060], zoom_start=12)
    
    # 定义弹窗的Django模板语法字符串
    popup_template_str = """
    <div style="width: 220px; padding: 10px;">
        <img src="{{ venue.logo.url }}" alt="{{ venue.name }}" style="width: 100%; border-radius: 4px;">
        <h4 style="margin: 8px 0;">{{ venue.name }}</h4>
        <p style="font-size: 14px; color: #666;">{{ venue.address }}</p>
        {% if venue.contact %}
        <p style="font-size: 13px;">联系：{{ venue.contact }}</p>
        {% endif %}
    </div>
    """
    popup_template = Template(popup_template_str)
    
    for venue in Venue.objects.all():
        # 传入当前venue实例作为上下文
        context = Context({'venue': venue})
        # 渲染得到最终的HTML字符串
        popup_html = popup_template.render(context)
        
        popup = folium.Popup(popup_html, max_width=300)
        folium.Marker(
            location=[venue.latitude, venue.longitude],
            popup=popup,
            tooltip=venue.name
        ).add_to(m)
    
    map_html = m._repr_html_()
    return render(request, 'map.html', {'map_html': map_html})

为什么之前的方法失效？ #

• 直接写{{venue.name}}：Django模板语法需要经过模板渲染器解析，在views.py的普通字符串里它只是纯文本，不会被替换成变量值。
• 使用.format()失败：大概率是没处理HTML里的大括号转义（比如CSS样式里的{}需要写成{{}}），或者占位符和变量对应错误。如果要用.format()，正确写法示例：

  popup_html = """
  <div style="width: 220px;">
      <img src="{}" alt="{}">
      <h4>{}</h4>
  </div>
  """.format(venue.logo.url, venue.name, venue.name)
  

  如果HTML里有{/}（比如CSS属性），要写成{{/}}来转义，避免被format解析成占位符。

注意事项 #

• 如果变量包含特殊字符（比如引号、HTML标签），要用django.utils.html.escape()转义，避免XSS风险，Django模板渲染默认会自动转义。
• 确保venue模型的logo字段是ImageField且配置好了Django媒体文件服务，否则venue.logo.url无法返回正确的图片地址。
• 弹窗的max_width要根据内容长度设置合适值，避免内容被截断。

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