geodjango，传单document.getElementById...为null错误

如何解决geodjango，传单document.getElementById...为null错误

我正在建立一个geodjango地图项目，并使用js脚本从传单地图上的元素加载要素信息，当我单击某个要素时，该要素仅返回一个值，第一个，所有其他值似乎都为空， django序列化程序提供了所有信息，但是getElementById似乎无法识别

代码

var map = L.map("map",{
  zoomControl: false,//dragging: false,doubleClickZoom: false,}).setView([-23.50521,-69.362164],7);
L.tileLayer("http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",{
  maxZoom: 10,subdomains: ["mt0","mt1","mt2","mt3"],}).addTo(map);

map.createPane("contorno");
map.getPane("contorno").style.zIndex = 450;
var cont = new L.GeoJSON.AJAX("{% url 'ser_reg' %}",{
  pane: "contorno",style: {
    weight: 3,color: "white",fillColor: "white",fillOpacity: 0.05,},onEachFeature: function (feature,layer) {
    layer.bindPopup(
      '<table style="width:450px;font-size:14px;"><tr><th scope="row">PROVINCIA</th><td>' +
        feature.properties.nom_prov +
        "</td></tr>" +
        '<tr><th scope="row">COMUNA</th><td>' +
        feature.properties.nom_com +
        "</td></tr>",{ minWidth: 450 }
    );
  },}).addTo(map);

function style(feature) {
  if (feature.properties.nombre_evento) {
    return {
      pane: "panegeojson",radius: 8,fillColor: "red",color: "#000",weight: 2,opacity: 1,fillOpacity: 1,};
  }
  if (feature.properties.nombre_ini) {
    return {
      pane: "panegeojson",fillColor: "#00FF00",};
  }
  if (feature.properties.denuncia) {
    return {
      pane: "panegeojson",fillColor: "yellow",};
  }
}

var ultimoClick;

function zoomToFeature(e) {
  if (ultimoClick) {
    sit_amb.resetStyle(ultimoClick);
  }

  var layer = e.target;
  layer.setStyle({
    pane: "geojson",weight: 3,color: "yellow",dashArray: "3",fillOpacity: 0.5,});

  if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
    layer.bringToFront();
  }

  ultimoClick = layer;

  $("#showsitamb").hide();
  $("#showiniamb").hide();
  $("#showden").hide();
  if (e.target.feature.properties.hechos != null) {
    $("#showsitamb").show("slow");
    document.getElementById("nombresit").innerHTML = e.target.feature.properties.nombre_evento;
    document.getElementById("razonsit").innerHTML = e.target.feature.properties.razon_social;
    document.getElementById("fechasit").innerHTML = e.target.feature.properties.fecha;
    document.getElementById("hechossit").innerHTML = e.target.feature.properties.hechos;
    document.getElementById("detallessit").href = "{% url 'det_sitamb' 121 %}".replace(
      /121/,e.target.feature.properties.pk
    );
  } else if (e.target.feature.properties.nombre_ini != "undefined") {
    $("#showiniamb").show("slow");
    document.getElementById("nombreini").innerHTML = e.target.feature.properties.nombre_ini;
    document.getElementById("razonini").innerHTML = e.target.feature.properties.razon_social;
    document.getElementById("detallesini").href = "{% url 'det_iniamb' 111 %}".replace(
      /111/,e.target.feature.properties.pk
    );
  }
  //if (e.target.feature.properties.denuncia)
  else {
    $("#showden").show("slow");
    document.getElementById("denuncia").innerHTML = e.target.feature.properties.denuncia;
    document.getElementById("fechaden").innerHTML = e.target.feature.properties.fecha;
    document.getElementById("ciudadden").innerHTML = e.target.feature.properties.ciu_opt;
    document.getElementById("detallesden").href = "131".replace(/131/,e.target.feature.properties.pk);
  }
}

function onEachFeature(feature,layer) {
  layer.on({
    click: zoomToFeature,});
}

map.createPane("panegeojson");
map.getPane("panegeojson").style.zIndex = 550;
var sit_amb = new L.GeoJSON.AJAX("{% url 'ser_sitamb' %}",{
  style: style,pointToLayer: function (feature,latlng) {
    return L.circleMarker(latlng,{});
  },pane: "panegeojson",onEachFeature: onEachFeature,}).addTo(map);

var ini_amb = new L.GeoJSON.AJAX("{% url 'ser_iniamb' %}",}).addTo(map);

var denunc = new L.GeoJSON.AJAX("{% url 'ser_den' %}",}).addTo(map);

谢谢