Django模板中Jinja值无法正确传入OpenStreetMap的iframe URL问题

我刚碰过类似的坑！看起来你用的openlinkmap.org/small.php接口大概率是参数规则变了，或者服务本身已经不再支持原来的传参方式——毕竟你的经纬度参数在OSM官网链接里能正常工作，说明参数本身没问题，问题出在这个第三方嵌入接口上。下面给你几个实用的解决思路：

1. 先排查openlinkmap接口的参数问题 #

首先直接在浏览器地址栏输入硬编码参数的URL测试，比如http://www.openlinkmap.org/small.php?lat=39.9042&lon=116.4074&zoom=10（北京的经纬度），如果依然显示安提瓜岛，那说明这个接口确实不识别lat/lon参数了。

你可以试试换成mlat和mlon参数名试试，有些旧的OSM衍生服务会用这个命名：

<iframe width="420" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openlinkmap.org/small.php?mlat={{ li.latitude }}&mlon={{ li.longitude }}&zoom=10" style="border: 1px solid black"></iframe>

如果还是不行，建议直接放弃这个第三方服务，改用更稳定的官方嵌入方式。

2. 改用OpenStreetMap官方iframe嵌入 #

OSM官方提供了稳定的嵌入接口，参数格式和你用的跳转链接逻辑一致，直接替换成iframe的src就能用：

<iframe width="420" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?lat={{ li.latitude }}&lon={{ li.longitude }}&zoom=10&layer=mapnik" style="border: 1px solid black"></iframe>

这个方式能直接读取你的Jinja变量，而且官方服务稳定性有保障，还能避免HTTP/HTTPS混合内容被浏览器拦截的问题（你之前用的openlinkmap是HTTP，现代浏览器可能会限制这类请求）。

3. 更灵活的进阶方案：用Leaflet.js嵌入地图 #

如果以后需要自定义标记点、交互功能，推荐用Leaflet.js——这是OSM生态最常用的开源地图库，在Django模板里集成也很简单：

1. 先引入Leaflet的CSS和JS：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

2. 创建地图容器：

<div id="map" style="width: 420px; height: 350px; border: 1px solid black;"></div>

3. 用Jinja变量初始化地图：

<script>
  // 传入经纬度设置地图中心和缩放级别
  var map = L.map('map').setView([{{ li.latitude }}, {{ li.longitude }}], 10);
  // 加载OSM瓦片图层
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
  }).addTo(map);
  // 可选：添加标记点
  L.marker([{{ li.latitude }}, {{ li.longitude }}]).addTo(map);
</script>

这个方案功能扩展性强，也不会依赖第三方服务的接口变动，适合长期使用。

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