我正在尝试在地图上放置标记。这些标记是从onload:
中读取的XML文件中获取的<stations>
<station name="AKRON" state="CO" lat="40.150" lon="103.150" elev="1384.0"/>
</stations>
javascript如下:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
var map;
//create map
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.85, -96.75),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
//load xml file
downloadUrl('raw_data.xml', function(data) {
var xml = xmlParse(data);
//get the lat lon data
var rowNodes = xml.getElementsByTagName("station");
for (var i = 0; i < rowNodes.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(rowNodes[i].getAttribute("lat")),parseFloat(rowNodes[i].getAttribute("lon")));
createMarker(latlng);
}
});
}
function createMarker(latlng) {
var marker = new google.maps.Marker({
map: map,
position: latlng
});
}
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);
}
};
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;
};
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);
}
</script>
</head>
<body onload="initialize()">
<table border=1>
<tr>
<td>
<div id="map_canvas" style="width: 800px; height: 800px"></div>
</td>
<td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;">
<div id="side_bar"></div>
</td>
</tr>
</table>
<a href="basic9.htm">Back to the tutorial page</a>
</body>
</html>
地图加载得很好,但没有标记出现。我做了谷歌搜索,发现没有任何效果。
答案 0 :(得分:2)
从您提供的xml中读取的lat,lng为“40.15,103.15
”,因此标记会在那里加载。您的地图中心位于lat,lng“40.85,-96.75
”。这就是你无法看到标记的原因。因此,要么缩小以查看标记,要么更改地图的中心