如何在Dash布局中插入带标记的Folium地图？嵌入后标记不显示怎么办？

首先请先确认直接打开本地的index.html文件标记可以正常显示，排除Folium本身生成逻辑错误的问题，再排查以下常见场景：

• 内联脚本被内容安全策略(CSP)拦截
  Dash默认的CSP规则会拦截未签名的内联JavaScript执行，而Folium生成的HTML中所有标记渲染逻辑都以内联JS实现，直接插入srcDoc时这些JS会被阻止运行，导致仅能加载地图框架、无法渲染标记。
  解决方法：初始化Dash时配置CSP允许内联脚本和相关资源加载：

  from dash import Dash
  app = Dash(__name__)
  app.server.config['CSP'] = {
      'default-src': "'self'",
      'script-src': "'self' 'unsafe-inline'",
      'style-src': "'self' 'unsafe-inline'",
      'img-src': "'self' data: https://*.tile.openstreetmap.org"
  }
  

• HTML文件读取编码异常
  若标记包含中文、特殊符号，Windows环境下默认的open()方法会用GBK编码读取文件，导致JS内的标记数据乱码，触发JS执行错误终止标记渲染流程。
  解决方法：读取文件时明确指定UTF-8编码：

  html.Iframe(
      id='map', 
      srcDoc=open('index.html', 'r', encoding='utf-8').read()
  )
  

• Iframe未设置明确宽高
  Folium的标记定位依赖地图容器的固定宽高计算坐标，若Iframe未设置明确宽高值，标记会被渲染到可视区域外，表现为无标记展示。
  解决方法：给Iframe添加固定宽高样式：

  html.Iframe(
      id='map', 
      srcDoc=open('index.html', 'r', encoding='utf-8').read(),
      style={'width': '100%', 'height': '800px', 'border': 'none'}
  )
  

• 本地资源路径无法解析
  若生成Folium地图时手动配置了使用本地Leaflet JS/CSS资源，这些资源的相对路径在Dash的Iframe上下文下无法被正确解析，导致标记渲染的依赖加载失败。
  解决方法：生成Folium地图时使用默认的CDN资源配置，无需手动修改folium.default_css/folium.default_js相关参数即可。

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