Django+Leaflet实现的Marker点击Popup在Safari中无法打开

我之前也踩过Safari里Leaflet Popup失效的坑，结合你的代码来看，大概率是字符串拼接或JSON解析的兼容性问题，给你几个实用的排查和修复方案：

1. 重构Popup的HTML字符串拼接方式 #

Safari对JS中通过+拼接的带换行符的字符串解析会更严格，很容易因为隐藏的转义问题导致Popup渲染失败。建议直接用ES6的模板字符串（反引号）来代替加号拼接，模板字符串天然支持换行，代码更清晰也更兼容：

for (const place of added_place_json){
  L.marker([place.fields.lat, place.fields.long]).bindPopup(`
    <div class="card" style="width: 15rem;">
      <h6 class="card-header">Name place:<br>${place.fields.name}</h6>
      <div class="card-body">
        <p class="card-text" style="overflow: scroll">Place comment:<br>${place.fields.comment}</p>
      </div>
    </div>
  `).addTo(map);
};

2. 优化JSON数据的传递方式 #

你当前用escapejs处理JSON字符串，在Safari中可能存在转义不彻底的情况，导致JSON.parse解析后的数据异常，进而影响Marker的事件绑定。推荐用Django官方的json_script标签来传递JSON数据，它会自动处理所有转义问题：

视图模板修改： #

<script> const MAP_KEY = "{{ MAP_KEY }}"; </script>
{{ added_place_json|json_script:"added-place-data" }}
<script>
  const added_place_json = JSON.parse(document.getElementById('added-place-data').textContent);
</script>

这种方式生成的JSON数据是标准格式，能完美兼容包括Safari在内的所有主流浏览器。

3. 检查Leaflet版本兼容性 #

如果你使用的是较旧的Leaflet版本，可能存在Safari下的事件绑定bug。建议升级到最新的稳定版（比如v1.9.4及以上），新版本修复了大量浏览器兼容性问题，能有效避免这类奇怪的失效问题。

4. 用Safari开发者工具调试 #

打开Safari的开发者工具（在「偏好设置-高级」里勾选「显示开发菜单」），刷新页面后查看控制台是否有报错信息——比如JSON解析错误、DOM元素异常或者Leaflet的事件绑定报错，这些信息能帮你快速定位问题根源。

先试试前两个方案，这是Safari中最常见的Leaflet Popup失效原因，一般修改后就能解决问题。

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