我正在尝试为放置在地图上的每个 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>';