问题
I am using Google Maps to display a map with a set of markers on it. The code for the page (slightly simplified) is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>
<script type="text/javascript" src="../js/infobox.js"></script>
<script type="text/javascript" src="../js/downloadxml.js"></script>
<script type="text/javascript">
//<![CDATA[
var gmarkers = [];
// global "map" variable
var map = null;
var markerCluster = null;
var hotelimage = new google.maps.MarkerImage('../images/hotel_icon.gif',
new google.maps.Size(32, 37),
new google.maps.Point(0, 0),
new google.maps.Point(16, 35));
var shadow = new google.maps.MarkerImage('../images/hotel_shadow.png',
new google.maps.Size(51, 37),
new google.maps.Point(0, 0),
new google.maps.Point(16, 35));
// InfoBox
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid #4d6eb0; margin-top: 8px; background: white; padding: 5px;";
var ibOptions = {
content: boxText,
closeBoxURL: "",
disableAutoPan: false,
enableEventPropagation: true,
pixelOffset: new google.maps.Size(15, -50),
boxStyle: {
width: "240px",
height: "100px"
}
};
// global "infobox" variable
var ib = new InfoBox(ibOptions);
////////////////////////
// A function to create the markers and set up the event window function
function createMarker(latlng, html, summary, photo1, photo2) {
// var contentString = html + "<br><span class='verdana'>" + summary + "</span>";
var contentString = "<div style='min-height:75px'>" + photo1 + "<img src='/images/" + photo2 + "' width='105' height='75' align='left' style='margin-right:8px;border:none'></a>" + html + "<br><div class='verdana'>" + summary + "</div></div>";
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: hotelimage,
shadow: shadow,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'mouseover', function () {
boxText.innerHTML = contentString;
ib.open(map, marker);
});
google.maps.event.addListener(map, 'click', function () {
ib.close(map, marker);
});
gmarkers.push(marker);
}
function initialize() {
var lat = 0;
var lng = 0;
var zoom = 0;
var hotelname = 0;
var query = location.search.substring(1);
var pairs = query.split("&");
for (var i = 0; i < pairs.length; i++) {
var pos = pairs[i].indexOf("=");
var argname = pairs[i].substring(0, pos).toLowerCase();
var value = pairs[i].substring(pos + 1);
if (argname == "lat") {
lat = parseFloat(value);
}
if (argname == "lng") {
lng = parseFloat(value);
}
if (argname == "zoom") {
zoom = parseInt(value);
}
if (argname == "hotel") {
hotelname = unescape(value);
}
}
var thisLatlng = new google.maps.LatLng(lat, lng);
var myOptions = {
center: thisLatlng,
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
scaleControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
////////////////////
downloadUrl("php-to-xml.php", function (doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat, lng);
var html = markers[i].getAttribute("html");
var summary = markers[i].getAttribute("summary");
var photo1 = markers[i].getAttribute("photo1");
var photo2 = markers[i].getAttribute("photo2");
var marker = createMarker(point, html, summary, photo1, photo2);
}
var clusterStyles = [{
opt_textColor: '#5a7aba',
url: '../images/cluster_icon.png',
height: 40,
width: 40
}];
var mcOptions = {
gridSize: 35,
maxZoom: 10,
styles: clusterStyles
};
markerCluster = new MarkerClusterer(map, gmarkers, mcOptions);
});
}
//]]>
</script>
</head>
<body onload="initialize()">
<div id="content">
<h1>Little Hotels Map Search</h1>
<span class="verdana"><br /></span>
<table border=1 bordercolor="#666666">
<tr>
<td>
<div id="map_canvas" style="width: 640px; height: 450px"></div>
</td>
</tr>
</table>
<br />
</div>
</body>
</html>
The points for placing the markers are obtained using the php-to-xml.php file which gets the data with a mySQL query and then presents it in XML form.
Sometimes it works perfectly, and sometimes it shows the map with no markers at all. As far as I know, it never shows just some markers.
I am working on the hypothesis that sometimes php-to-xml.php is slow to do it's job and then the map page is completed without the markers. I have experimented by changing
downloadUrl("php-to-xml.php", function(doc) {
to
downloadUrl("somethingelse.php", function(doc) {
in order to disable it. The map then shows without the markers, as I would expect.
This is very difficult to test as the page works right or wrong apparently randomly. Is there a way that I can ensure php-to-xml.php has finished before anything else happens?
EDIT
The downloadxml.js file referenced in the is a file I downloaded from somewhere. It's completely "blackbox" to me.
/**
* Returns an XMLHttp instance to use for asynchronous
* downloading. This method will never throw an exception, but will
* return NULL if the browser does not support XmlHttp for any reason.
* @return {XMLHttpRequest|Null}
*/
function createXmlHttpRequest() {
try {
if (typeof ActiveXObject != 'undefined') {
return new ActiveXObject('Microsoft.XMLHTTP');
} else if (window["XMLHttpRequest"]) {
return new XMLHttpRequest();
}
} catch (e) {
changeStatus(e);
}
return null;
};
/**
* This functions wraps XMLHttpRequest open/send function.
* It lets you specify a URL and will call the callback if
* it gets a status code of 200.
* @param {String} url The URL to retrieve
* @param {Function} callback The function to call once retrieved.
*/
function downloadUrl(url, callback) {
var status = -1;
var request = createXmlHttpRequest();
if (!request) {
return false;
}
request.onreadystatechange = function() {
if (request.readyState == 4) {
try {
status = request.status;
} catch (e) {
// Usually indicates request timed out in FF.
}
if ((status == 200) || (status == 0)) {
callback(request.responseText, request.status);
request.onreadystatechange = function() {};
}
}
}
request.open('GET', url, true);
try {
request.send(null);
} catch (e) {
changeStatus(e);
}
};
/**
* Parses the given XML string and returns the parsed document in a
* DOM data structure. This function will return an empty DOM node if
* XML parsing is not supported in this browser.
* @param {string} str XML string.
* @return {Element|Document} DOM.
*/
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
/**
* Appends a JavaScript file to the page.
* @param {string} url
*/
function downloadScript(url) {
var script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}
来源：https://stackoverflow.com/questions/24162496/google-maps-api-sometimes-not-showing-markers