Python Folium地图弹窗超链接优化：无需新开页面同页展示内容小窗口

Folium基于Leaflet.js封装，你可以通过注入自定义HTML/CSS/JS的方式实现需求，不需要改动Folium底层代码，步骤如下：

• 第一步：注入全局模态框基础代码
  先在地图初始化后，往HTML根节点插入模态框的样式、容器和控制逻辑，代码示例：

import folium
from branca.element import Element

# 初始化地图
m = folium.Map(location=[39.9042, 116.4074], zoom_start=12)

# 注入模态框相关代码
modal_assets = """
<style>
.modal {
    display: none; 
    position: fixed;
    z-index: 9999; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
}
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 70%; 
    max-width: 700px;
    border-radius: 8px;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
}
</style>

<div id="catalogModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div id="modalContent"></div>
  </div>
</div>

<script>
const modal = document.getElementById("catalogModal");
const closeBtn = document.querySelector(".close");

closeBtn.onclick = () => modal.style.display = "none";
window.onclick = (e) => e.target == modal && (modal.style.display = "none");

// 全局打开模态框方法，传入目录表的HTML内容即可
function showCatalog(content) {
  document.getElementById("modalContent").innerHTML = content;
  modal.style.display = "block";
}
</script>
"""
m.get_root().html.add_child(Element(modal_assets))

• 第二步：修改Marker弹窗的超链接逻辑
  把原来跳转新页的a标签，替换为点击触发showCatalog方法的可点击文本，直接传入对应点位的目录表内容：

# 示例点位数据
test_point = {
    "name": "XX测试点",
    "meta": "运营状态：正常<br>建设时间：2023年6月<br>负责人员：张三",
    "catalog": "<h4>XX测试点目录表</h4><ul><li>2024年1月监测数据</li><li>2024年2月监测数据</li><li>历史运维记录</li></ul>"
}

# 构造弹窗内容
popup_html = f"""
<h5>{test_point['name']}</h5>
<p>{test_point['meta']}</p>
<span style="color:#2385bb; cursor:pointer; text-decoration:underline" onclick='showCatalog(`{test_point["catalog"]}`)'>查看完整目录表</span>
"""

# 添加点位到地图
folium.Marker(
    location=[39.9042, 116.4074],
    popup=folium.Popup(popup_html, max_width=300)
).add_to(m)

• 第三步：导出使用
  直接正常保存地图文件即可，点击弹窗里的「查看完整目录表」就会在当前页弹出模态框展示内容：

m.save("map.html")

如果你的目录表内容需要动态请求，只需要修改showCatalog方法，传入点位ID后发请求拉取对应内容再渲染到模态框即可，其余逻辑不需要调整。如果目录内容含特殊字符，提前做下转义避免JS语法报错。

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