我有显示来自 MySQL 的值的 InfoWindow，但现在我希望在 InfoWindow 中显示基于来自 MySQL 的属性值的图片。例如，如果 InfoWindow 内的“游泳”属性值为 1，则会显示图片http://us.123rf.com/400wm/400/400/ratoca/ratoca1207/ratoca120700086/14399447-swimming-sign.jpg，如果“游泳" 属性值为 0 不会显示图片。
我当前的代码如下：
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href="Free-Camping/free_camping_style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Free Camping</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
<!--
//<![CDATA[
var customIcons = {
"1": {
icon: 'Free-Camping/markers/BeachCampingSite.png',
},
"2": {
icon: 'Free-Camping/markers/BushCampingSite.png',
},
"3": {
icon: 'Free-Camping/markers/ParkForestReserve.png',
},
"4": {
icon: 'Free-Camping/markers/PrivateCampingSite.png',
},
"5": {
icon: 'Free-Camping/markers/RoadsideRestArea.png',
},
"6": {
icon: 'Free-Camping/markers/NewLocationMarker.png',
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-25.878994,134.018553),
zoom: 4,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("Free-Camping/free_camping_phpsql.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var category = markers[i].getAttribute("category");
var name = markers[i].getAttribute("name");
var street = markers[i].getAttribute("street");
var locality = markers[i].getAttribute("locality");
var description = markers[i].getAttribute("description");
var image = markers[i].getAttribute("image");
var toilet = markers[i].getAttribute("toilet");
var bbq = markers[i].getAttribute("bbq");
var able = markers[i].getAttribute("able");
var tentok = markers[i].getAttribute("tentok");
var caravanok = markers[i].getAttribute("caravanok");
var dumppoint = markers[i].getAttribute("dumppoint");
var shade = markers[i].getAttribute("shade");
var water = markers[i].getAttribute("water");
var swimming = markers[i].getAttribute("swimming");
var fishing = markers[i].getAttribute("fishing");
var hiking = markers[i].getAttribute("hiking");
var mobileok = markers[i].getAttribute("mobileok");
var name2 = markers[i].getAttribute("name2");
var email = markers[i].getAttribute("email");
var lat = markers[i].getAttribute("lat");
var lng = markers[i].getAttribute("lng");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = '<h1 style="font-family: Arial; font-size: 17px; color: #000000; background-color: #FFFFFF; text-align: left ">' + name
+ '<h1 style="font-family: Arial; font-size: 12px; color: #000000; background-color: #FFFFFF; text-align: left "> Street: ' + street
+ '<h1 style="font-family: Arial; font-size: 12px; color: #000000; background-color: #FFFFFF; text-align: left "> Locality: ' + locality + '</br>'
//Lat and Lng
+ '<h1 style="font-family: Arial; font-size: 12px; color: #000000; background-color: #FFFFFF; text-align: left "> Lat: ' + lat
+ '<h1 style="font-family: Arial; font-size: 12px; color: #000000; background-color: #FFFFFF; text-align: left "> Lng: ' + lng + '</br>'
+ '<img src="Free-Camping/images/'+image+'" width=200 height=150>' + '</br>'
+ '<h1 style="font-family: Arial; font-size: 12px; color: #000000; background-color: #FFFFFF; text-align: left "> Description: ' + description
// Checkbox
+ '<h1 style="font-family: Arial; font-size: 11px; color: #000000; background-color: #FFFFFF; text-align: left "> Toilet: ' + toilet
+ '<h1 style="font-family: Arial; font-size: 11px; color: #000000; background-color: #FFFFFF; text-align: left "> BBQ: ' + bbq
+ '<h1 style="font-family: Arial; font-size: 11px; color: #000000; background-color: #FFFFFF; text-align: left "> Table: ' + able
+ '<h1 style="font-family: Arial; font-size: 11px; color: #000000; background-color: #FFFFFF; text-align: left "> Tent: ' + tentok
+ '<h1 style="font-family: Arial; font-size: 11px; color: #000000; background-color: #FFFFFF; text-align: left "> Caravan: ' + caravanok
+ '<h1 style="font-family: Arial; font-size: 11px; color: #000000; background-color: #FFFFFF; text-align: left "> Dumppoint: ' + dumppoint
+ '<h1 style="font-family: Arial; font-size: 11px; color: #000000; background-color: #FFFFFF; text-align: left "> Shade: ' + shade
+ '<h1 style="font-family: Arial; font-size: 11px; color: #000000; background-color: #FFFFFF; text-align: left "> Water: ' + water
+ '<h1 style="font-family: Arial; font-size: 11px; color: #000000; background-color: #FFFFFF; text-align: left "> Swimming: ' + swimming
+ '<h1 style="font-family: Arial; font-size: 11px; color: #000000; background-color: #FFFFFF; text-align: left "> Fishing: ' + fishing
+ '<h1 style="font-family: Arial; font-size: 11px; color: #000000; background-color: #FFFFFF; text-align: left "> Hiking: ' + hiking
+ '<h1 style="font-family: Arial; font-size: 11px; color: #000000; background-color: #FFFFFF; text-align: left "> Mobile: ' + mobileok + '</a>';
var icon = customIcons[category] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="load();">
<div id="main_layer" style="position:absolute; left:50%; top:25px; width:788px; height:1600px; margin-left: -390px;">
<div id="map_layer" style="position:absolute; left:0px; top:0px; width:780px; height:595px;" class="map_frame">
<div id="map" style="position:absolute; top:45px; width:760px; height:500px; margin-left: 10px; "></div>
<div id="legend" style="position:absolute; top:550px; width:760px; height:45px; margin-left: 10px; " class="legend_text"><img src="Free-Camping/markers/BeachCampingSite.png" width="32" height="37"><span class="legend_text">Beach Camping Site <img src="Free-Camping/markers/BushCampingSite.png" width="32" height="37">Bush Camping Site <img src="Free-Camping/markers/ParkForestReserve.png" width="32" height="37">Park Forest Reserve <img src="Free-Camping/markers/PrivateCampingSite.png" width="32" height="37"> PrivateCampingSite <img src="Free-Camping/markers/RoadsideRestArea.png" width="32" height="37">Roadside Rest Area</span></div>
</div>
<div id="form" style="position:absolute; left:0px; margin-left: 0px; top:603px; width:788px; height:980px; background-color: #f4f4f4; layer-background-color: #f4f4f4; border: 1px none #000000;" class="form">
<form action="free_camping_insert.php" method="post" enctype="multipart/form-data">
<div id="form" style="position:absolute; left:14; top:0px; width:760px; height:275px;" class="form2">
<p align="center" class="headers">Add a New Free Camping Site</p>
<p align="center"><span class="text">Your Name:</span> <input type="text" name="name2" />
<br>
<br>
<span class="text">Your Email:</span>
<input type="text" name="email" />
<br>
<br>
<span class="text">Campsite name:</span>
<input type="text" name="name" />
<br>
<br>
<span class="text">Type of Campsite:</span>
<select name="category">
<option value="1">Beach Camping Site</option>
<option value="2">Bush Camping Site</option>
<option value="3">Park Forest Reserve</option>
<option value="4">Private Camping Site</option>
<option value="5">Roadside Rest Area</option>
</select>
<p align="center" class="text">
<label>Upload Picture</label>
<input type="file" name="image" /><br />
</div>
<div id="form" style="position:absolute; left:14; top:275px; width:760px; height:150px;" class="form2">
<p align="center" class="headers">Select Campsite Amenities</p>
<p align="center"><img src="Free-Camping/images2/AmenitiesIcons.png" width="682" height="44"> </p>
<div id="checkbox1" style="position:absolute; left:50px; top:102px; width:25px; height:25px;">
<input type="checkbox" name="toilet" value="1">
</div>
<div id="checkbox2" style="position:absolute; left:108px; top:102px; width:25px; height:25px;">
<input type="checkbox" name="bbq" value="1">
</div>
<div id="checkbox3" style="position:absolute; left:165px; top:102px; width:25px; height:25px;">
<input type="checkbox" name="able" value="1">
</div>
<div id="checkbox4" style="position:absolute; left:223px; top:102px; width:25px; height:25px;">
<input type="checkbox" name="tentok" value="1">
</div>
<div id="checkbox5" style="position:absolute; left:281px; top:102px; width:25px; height:25px;">
<input type="checkbox" name="caravanok" value="1">
</div>
<div id="checkbox6" style="position:absolute; left:338px; top:102px; width:25px; height:25px;">
<input type="checkbox" name="dumppoint" value="1">
</div>
<div id="checkbox7" style="position:absolute; left:398px; top:102px; width:25px; height:25px;">
<input type="checkbox" name="shade" value="1">
</div>
<div id="checkbox8" style="position:absolute; left:454px; top:102px; width:25px; height:25px;">
<input type="checkbox" name="water" value="1">
</div>
<div id="checkbox9" style="position:absolute; left:512px; top:102px; width:25px; height:25px;">
<input type="checkbox" name="swimming" value="1">
</div>
<div id="checkbox10" style="position:absolute; left:570px; top:102px; width:25px; height:25px;">
<input type="checkbox" name="fishing" value="1">
</div>
<div id="checkbox11" style="position:absolute; left:629px; top:102px; width:25px; height:25px;">
<input type="checkbox" name="hiking" value="1">
</div>
<div id="checkbox12" style="position:absolute; left:687px; top:102px; width:25px; height:25px;">
<input type="checkbox" name="mobileok" value="1">
</div>
<p align="center"><br>
</div>
<div id="form" style="position:absolute; left:14; top:440px; width:760px; height:525px;" class="form2">
<div align="center"><span class="headers">Description of the Campsite </span><span class="text">(tell as a bit about the site)</span> </p>
</div>
<p align="center"> <textarea name="description" cols="85" rows="7" class="borders_around_form_boxes"></textarea>
<br>
</p>
<p align="center" class="headers">Location of the Free Campsite</p>
<p align="center" class="text">Enter the GPS coordinates in the boxes or click the button to create a new marker which you can drag and drop on the map. </p>
<div align="center"><span class="text">Latitude:</span> <input type="text" name="lat" />
<br>
<br>
<span class="text">Longitude:</span>
<input type="text" name="lng" />
<br>
<br>
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
<input type="submit" id="submit" value="Upload" />
</div>
</div>
</form>
</div>
</div>
</body>
</html>
有谁知道从哪里开始？
最好的，达科