0

我正在尝试为放置在地图上的每个 Google 地图标记中的每张图片添加模式视图。这是JS代码:

      // Get the modal
      var modal = document.getElementById('myModal');
      // Get the image and insert it inside the modal - use its "alt" text as a caption
      var img = document.getElementById('myImg');
      var modalImg = document.getElementById("img01");
      var captionText = document.getElementById("caption");
      img.onclick = function(){
          modal.style.display = "block";
          modalImg.src = this.src;
          captionText.innerHTML = this.alt;
      }
      // Get the <span> element that closes the modal
      var span = document.getElementsByClassName("close")[0];
      // When the user clicks on <span> (x), close the modal
      span.onclick = function() {
        modal.style.display = "none";
      }

var img 应该包含对图像的引用,基于 id。但是当我运行这段代码时,img 变量为空。

这是我的 infoView 内容变量:

            var infoContent =
            '<div id="iw-container" class="gm-style-iw">'+
              '<div class="iw-title">'+
                '<p>{{place.name}}</p>'+
              '</div>'+
              // For each photo associated with this place, add it.
              '<div class="container-fluid">'+
                {% for photo in place.photo_set.all %}
                  '<div class="row">'+
                    '<div class="col-md-4">'+
                      '<hr>'+
                      '<div class="">'+
                      // Check whether the attributes have a value and display them.
                        {% if photo.info != "" and photo.info != None  %}
                          '<p class="iw-info">{{ photo.info }}</p>'+
                        {% endif %}
                        {% if photo.year != "" and photo.year != None  %}
                          '<p class="iw-year">{{ photo.year }}</p>'+
                        {% endif %}
                        {% if photo.source != "" and photo.source != None  %}
                          '<p class="iw-source">Bron: {{ photo.source }}</p>'+
                        {% endif %}
                      '</div>'+
                      // Display the image with a link to the modal view.
                      '<div class="iw-image">'+
                        '<img id="myImg" class="iw-image" src="../static/images/{{ photo.image }}">'+
                      '</div>'+
                    '</div>'+
                  '</div>'+
                {% endfor %}
              '</div>'+
            '</div>';
4

0 回答 0