问题
Hey i have a question that seems very tricky.
I want to add images for every Infowindow in my map. But the clue is that the images shouldn't parse directly from the XML, because if there are 300 markers and for every marker an image, that would by a very big data which have to load on mapstart. Is it possible to load the image only if the marker has cliked ?
Heres my code:
<script type="text/javascript">
var side_bar_html = "";
var sidebarMarkers = [];
var infoWindow = new google.maps.InfoWindow(
{
maxWidth: 250
});
<!----------- GASTHAUS image ------------>
var imageGasthaus = {
url: 'image/gasthaus.png',
scaledSize: new google.maps.Size(26, 26),
};
<!----------- BAR image ------------>
var imageBar = {
url: 'image/bar.png',
scaledSize: new google.maps.Size(26, 26),
};
var hoverIcons = [];
hoverIcons["gasthaus"] = imageGasthausHover;
hoverIcons["bar"] = imageBarHover;
var customIcons = [];
customIcons["gasthaus"] = imageGasthaus;
customIcons["bar"] = imageBar;
var markerGroups = { "gasthaus": [], "bar": []};
function myclick(i) {
google.maps.event.trigger(sidebarMarkers[i], "click");
}
function createMarker(latlng, name, address, tel, href, image, type) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: customIcons[type],
zIndex: Math.round(latlng.lat()*-100000)<<5
});
//// Infowindow öffnen bei Linksklick
var onMarkerClick = function() {
var marker = this;
infoWindow.setContent(html);
infoWindow.open(map, marker);
};
google.maps.event.addListener(marker, 'click', onMarkerClick);
//// Infowindow Inhalt
var html = '<div id="infowindowLink" style = "line-height: 1.35; overflow: hidden; ">' + '<span style="font-weight: bold; color:#008B00;">' + name + '</span> <br/>' + address + '<br><br>' + '<span>' + href + '</span>' + '<br>'+ tel + '<br><br>'+ image + '</div>';
side_bar_html += '<a href="javascript:myclick(' + (sidebarMarkers.length-1) + ')">' + name + '<\/a><br>';
var zooms = point;
}
function initialize() {
// XML-Datei auslesen
downloadUrl("markerdata.xml", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var tel = markers[i].getAttribute("tel");
var href= '<a href="'+markers[i].getAttribute("href")+'" target="_blank">'+markers[i].getAttribute("web")+'</a>';
// This should be loaded only if a marker get clicked
var image = '<img src="'+markers[i].getAttribute("image")+'" style="width:250px; height:180px;" alt=""/>';
var type = markers[i].getAttribute("type");
point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, tel, href, image, type);
}
document.getElementById("side_bar").innerHTML = side_bar_html;
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
回答1:
You don't have to care about these images.
Before you click the markers it's simply a string, no images will be loaded.
Only when you click on the marker this string will be used to create a <img/>
-node inside the infoWindow(what will force the download)
来源:https://stackoverflow.com/questions/27077455/don%c2%b4t-preload-images-in-xml-google-maps-api-v3