Django集成Google Maps时addListener回调无法访问作用域变量问题

安全阿岳

2026-8-29

问题成因

核心原因是Django模板与JavaScript的执行时机完全错配：{% url %}是服务端模板标签，在页面返回给用户浏览器之前，就会在Django后端完成解析替换，这个阶段后端根本无法获取到浏览器端JS运行时循环生成的id变量，直接在模板标签里传入JS变量会导致渲染出的JS代码逻辑完全错误，这是报错的根本原因。
将id移入回调后提示无法访问vehicles，不是JS作用域规则导致的：正常JS规则下，循环内的回调完全可以访问外层initMap作用域的vehicles变量，这个报错本质是模板渲染生成了非法JS代码，导致脚本整体执行中断，作用域初始化失败抛出的连带错误。
原代码存在额外隐患：循环变量i没有使用let/const声明，会泄漏为全局变量；如果用var声明循环内变量，还会触发经典的循环闭包问题，导致所有标记点击后拿到的都是最后一个车辆的id。

修复方案

最稳妥的方案是在后端序列化车辆数据时，提前把每个车辆对应的详情页URL生成好直接传入前端，完全避免前端拼接Django模板标签的问题：

修改Django视图逻辑，在构造vehicles传递给模板时，给每个车辆字典增加truck_url字段，值为调用reverse('invent:truck', args=[车辆id])生成的真实访问路径。
修复前端JS的循环变量声明，使用let声明循环索引，利用const的块级作用域特性保证每个点击回调能拿到对应车辆的正确数据。

修复后的前端模板代码如下：

<script>
  function initMap() {
    const shop = {
      lat: 45.0203018,
      lng: -88.318316
    };

    const map = new google.maps.Map(
      document.getElementById("map"), {
        zoom: 10,
        center: shop,
    });  
  
    const vehicles = {{ vehicles|safe }};
    // 使用let声明循环变量，避免全局污染
    for(let i = 0; i < vehicles.length; i++){
      const currentTruck = vehicles[i];
      const pos = new google.maps.LatLng(currentTruck.lat, currentTruck.lon);
      const marker = new google.maps.Marker({
        position: pos,
        map: map,
        label: currentTruck.number,
      }); 
    
      marker.addListener("click", () => {
        console.log(currentTruck.truck);
        // 直接读取后端提前生成好的URL，无需前端拼接模板标签
        window.location = currentTruck.truck_url;
      });  
    }   
  };

  window.initMap = initMap;
</script>

如果不想修改后端逻辑，也可以在前端先获取URL的基础前缀，运行时动态拼接id：

// Django模板渲染阶段会先把标签替换为真实路径，比如渲染结果为 "/invent/truck/placeholder/"
const truckUrlPrefix = "{% url 'invent:truck' 'placeholder' %}".replace('placeholder', '');

// 点击回调内拼接路径即可
marker.addListener("click", () => {
  window.location = truckUrlPrefix + currentTruck.truck + "/";
});

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