【发布时间】：2017-12-11 06:41:17
【问题描述】：
我有一个数组对象，我将图像路径存储在一个索引中，我需要检索它并根据位置将其添加到 img 标记中。 我在数组上运行一个循环以获取数据，然后在单击事件中创建动态 html 并相应地添加数据，我能够检索图像路径，但我无法添加它。 请指导，任何帮助将不胜感激。
下面是我的代码：
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<title>Xylem</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta name="author" content="Samuel Norton">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js">
</script>
<script src="http://code.jquery.com/color/jquery.color-
2.1.0.min.js">
</script>
<script src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyA7whsF1OtjP38MWuQKXVjh1QncWGQh2L0&callback=initMap" async
defer></script>
<style>
/* Always set the map height explicitly to define the size of
the
div
* element that contains the map. */
#location-page{
/*border: 1px solid #426D8F;*/
}
#map {
/*margin-top: 2.5%;*/
top: 5%;
margin-left: 16%;
height: 90%;
width: 68%;
}
</style>
<script>
var map;
function initMap() {
var uluru = {lat: 83.5, lng: 9};
map = new google.maps.Map(document.getElementById('map'), {
center: uluru,
zoom: 2,
minZoom: 1
});
var geojsonFeature = {
"markers": [{
"latitude": 18.562158,
"longitude": 73.784005,
"title": "abc",
"address": "xyz",
"image1": "img5.jpg",
"image2": "C:/Users/pranand/Desktop/img1.jpg",
}, {
"latitude": 22.434966,
"longitude": 73.231136,
"title": "abc",
"address": "xyz",
"image1": "img3.jpg",
"image2": "img4.jpg",
},
{
"latitude": 19.259763,
"longitude": 72.970113,
"title": "abc",
"address": "xyz",
"image1": "img1.jpg",
"image2": "C:/Users/pranand/Desktop/img2.jpg",
}]
};
var infowindow = new google.maps.InfoWindow();
var marker;
var i;
for(i=0;i<geojsonFeature.markers.length;i++){
marker= new google.maps.Marker({
position: new
google.maps.LatLng(geojsonFeature.markers[i].latitude,
geojsonFeature.markers[i].longitude),
map: map,
title: geojsonFeature.markers[i].title
});
google.maps.event.addListener(marker, 'click',
(function(marker, i) {
var img1 = $('<img id="img1"/>');
img1.attr('src',geojsonFeature.markers[i].image1);
console.log(img1);
img1.appendTo('.imageDiv');
//img1Src= geojsonFeature.markers[i].image1;
// console.log(img1Src);
//$("#img1").attr('src',img1Src);
return function() {
infowindow.setContent('<p style = "font-
weight:bold;font-size:18px;margin-left:12%;margin-
bottom:10px">'+geojsonFeature.markers[i].title+'</p>'+
'<div style="margin-bottom:20px">'+
geojsonFeature.markers[i].address + '</div>'+
'<div class = "imageDiv" style = "margin-left:
9.5%;">'+
img1+
'</div>');
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
<script src="js/script.js"></script>
<meta name="robots" content="noindex,follow" />
</head>
<body>
<div class="container-fluid">
<div id="main-page">
<div class="maincontent">
<h1>Xylem</h1>
<div class="row">
<div class="col-md-6">
<a class="location pull-right">
←Locations</a>
</div>
<div class="col-md-6">
<a class="product col-md-6">Products →</a>
</div>
</div>
</div>
</div>
<div id="location-page">
<!--img src="images/worldMap.jpg" />-->
<div id="map"></div>
</div>
</div>
<div id="product-page">
<div class="nextcontent">
<h1>Great! You're in the Product Page!</h1>
<a class="nextlinkProcuct"> ← GO BACK</a>
</div>
</div>
</div>
</body>
</html>
<div id="main-page">
<!--- Main Content Here -->
</div>
【问题讨论】：
标签： javascript jquery html arrays loops