我一直在使用JavaScript Google Maps API渲染呈现从XML文件中插入的标记的地图。
xml正常加载（查看网络请求面板），并且所有脚本都存在，没有错误记录，但是地图上没有任何内容-标记消失了……。
我的代码如下：
<!DOCTYPE html>
<head>
<title>The Activity Network</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="css/themes/theactivitynetwork.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script src="js/config.js"></script>
<script src="js/quickblox.js"></script>
<script src="js/FileSaver.min.js"></script>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD86ZDzTPegHkzId5kaN1LHtb7_YMh9KNU">
</script>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // code for IE5 and IE6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
<script type="text/javascript">
$(document).ready(function () {
var location;
var lat;
var lon;
var user = window.localStorage.getItem("user");
var sports = window.localStorage.getItem("sports");
var onSuccess = function (position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
console.log(lat + ", " + lon);
window.localStorage.setItem("lat", lat);
window.localStorage.setItem("lon", lon);
$.support.cors = true;
$.post("http://www.theactivitynetwork.co.uk/API/location.php", { user: user, lat: lat, lon: lon }, function (data) {
console.log("Response:",data);
window.localStorage.setItem("cachedXML",data);
console.log("HERE");
parser = new DOMParser();
xmlDoc = parser.parseFromString(data, "text/xml");
initialize();
});
};
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);
});
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 initialize() {
var lat = window.localStorage.getItem("lat");
var lon = window.localStorage.getItem("lon");
var mapOptions = {
center: new google.maps.LatLng(lat, lon),
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
drawMarkers(map);
}
function drawMarkers(map){
var url = "http://www.theactivitynetwork.co.uk/API/userLocations.xml"
var infoWindow = new google.maps.InfoWindow;
downloadUrl(url,function(data){
var xml=data.responseXML;
console.log("XML From Server: ", xml);
var markers = xml.getElementsByTagName("markers");
for (var i = 0; i < markers.length; i++) {
var user = markers[i].getAttribute("user");
var sports = markers[i].getAttribute("sports");
var image = {
size: new google.maps.Size(71, 132),
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(71, 132)
};
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lon")));
var html = "<b>" + user + "</b> <br>" + sports +'<br/>';
var marker = new google.maps.Marker({
map: map,
position: point,
title: name
});
// map.markers.push(marker);
var html = "<b>" + user + "</b> <br/>" + sports + "<br/>";
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);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="map-canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
这是生成XML的PHP：
while ($row = @mysql_fetch_assoc($result2)){
// ADD TO XML DOCUMENT NODE
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("user", $row['user']);
$newnode->setAttribute("sports", $row['sports']);
$newnode->setAttribute("lat", $row['lat']);
$newnode->setAttribute("lon", $row['lon']);
}
这是xml文件：
<markers>
<marker user="user1" sports="" lat="54.0453045" lon="-2.7989544"/>
<marker user="user2" sports="Ultimate Volleyball" lat="54.0467338" lon="-2.8042184"/>
<marker user="user3" sports="Yoga" lat="54.0467338" lon="-2.8042184"/>
<marker user="user4" sports="Ultimate Volleyball" lat="54.0467224" lon="-2.803794"/>
</markers>
谁能发现任何明显的错误？这真让我抓狂！谢谢你们
你的问题是这个；您的XML看起来像：
<markers>
<marker user="user1" sports="" lat="54.0453045" lon="-2.7989544"/>
<marker user="user2" sports="Ultimate Volleyball" lat="54.0467338" lon="-2.8042184"/>
<marker user="user3" sports="Yoga" lat="54.0467338" lon="-2.8042184"/>
<marker user="user4" sports="Ultimate Volleyball" lat="54.0467224" lon="-2.803794"/>
</markers>
然后，您可以使用此JS从文件中获取该XML：
var markers = xml.getElementsByTagName("markers");
for (var i = 0; i < markers.length; i++) {
...并尝试使用来引用每个单独的标记markers[i]。但是，您要做的就是获取整个<markers></markers>对象。相反，您想让每个人<marker>：
var markers = xml.getElementsByTagName("marker");
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句