2013-03-27 45 views
0

我无法使用getElementsByTagName从xml文件中获取数据。我应该使用什么?getElementsByTagName not working javascript,XML,google maps

这里是XML:

<?xml version="1.0" encoding="UTF-8"?> 
<markers> 
    <marker> 
     <lat>37.427770</lat> 
     <lng>-122.144841</lng> 
     <name>Jackie</name> 
    </marker> 
    <marker> 
     <lat>37.413320</lat> 
     <lng>-122.125604</lng> 
     <name>Peter</name> 
    </marker> 
</markers> 

整个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"/> 
<title>Google Maps JavaScript API v3 Example: Common Loader</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> 
    </script> 
<script type="text/javascript" src="util.js"></script> 
<script type="text/javascript"> 
var infowindow; 
var map; 

function initialize() { 
var myLatlng = new google.maps.LatLng(37.4419, -122.1419); 
var myOptions = { 
    zoom: 13, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
downloadUrl("moredata.xml", function(data) { 
    var markers = data.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
    var latlng = new 
google.maps.LatLng(parseFloat(markers[i].getElementsByTagName("lat")), 
           parseFloat(markers[i].getElementsByTagName("lng"))); 
    var marker = createMarker(markers[i].getElementsByTagName("name"), latlng); 
    } 
}); 
} 

function createMarker(name, latlng) { 
var marker = new google.maps.Marker({position: latlng, map: map}); 
google.maps.event.addListener(marker, "click", function() { 
    if (infowindow) infowindow.close(); 
    infowindow = new google.maps.InfoWindow({content: name}); 
    infowindow.open(map, marker); 
}); 
return marker; 
} 

</script> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="width:400px; height:300px"></div> 
</body> 
</html> 

该文件http://gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/downloadurl_info.html

即时通讯的编辑版本试图获取数据,而无需使用属性

+0

“标题” 标签是大小写保留的情况下html。你可以改变它到不同的标签,并尝试?另外,“getElementsByTagName”返回数组。所以,你解析“lat”/“lng”的方式在这里可能不起作用。分享您的html文件,以便我们可以在这里进行测试。 – devsathish 2013-03-27 13:34:24

+0

我改变了它,但它仍然不起作用 – user2208358 2013-03-27 13:38:16

+1

“不工作”是什么意思?请提供一个更好的解释你的问题。发生了什么,你期望发生什么?你有任何错误? – 2013-03-27 13:41:04

回答

0

首先,var markers = data.documentElement.getElementsByTagName("marker");将导致一个空的节点列表,因为在XML中完全没有<marker>元素。

接下来,parseFloat(markers[i].getElementsByTagName("lat")将无法​​正常工作。假设markers[i]将是<title>元素,getElementsByTagName将返回NodeList<lat>元素 - 这是您可能不能parseFloat

相反,你将需要得到第一个列表中的元素,访问它的第一TextNode,并从它那里得到的nodeValue - 从<lat>或至少以某种方式获取textContent

然后,回调函数看起来像

function(data) { 
    var markers = data.documentElement.getElementsByTagName("title"); // or "marker", after you've changed it 
    console.log(markers); 
    for (var i=0; i<markers.length; i++) { 
     var lats = markers[i].getElementsByTagName("lat"), 
      lngs = markers[i].getElementsByTagName("lng"), 
      names = markers[i].getElementsByTagName("name"); 
     if (lats.length && lngs.length) { 
      console.log("contents:", lats[0].textContent, lats[0].textContent); 
      var lat = parseFloat(lats[0].textContent), 
       lng = parseFloat(lats[0].textContent); 
     } else console.log("didn't found <lat>/<lng>"); 
     if (!isNaN(lat) && !isNaN(lng) && names.length) { 
      var name = names[0].textContent, 
       latlng = new google.maps.LatLng(lat, lng), 
       marker = createMarker(name, latlng); 
       console.log("created marker", name, marker); 
     } 
    } 
} 
+0

我没有工作。地图不再显示在浏览器中 – user2208358 2013-03-27 14:16:31

+0

你有任何错误?你是否在''元素上使用''title''选择器? – Bergi 2013-03-27 14:22:48

+0

没有错误,我使用标记 – user2208358 2013-03-27 14:30:35

0

我认为这个问题是在,

var markers = data.documentElement.getElementsByTagName("marker"); 

尝试将其更改为,

var markers = data.getElementsByTagName("marker");