getElementsByTagName 不工作 javascript、XML、谷歌地图答案

【问题标题】：getElementsByTagName not working javascript, XML, google mapsgetElementsByTagName 不工作 javascript、XML、谷歌地图
【发布时间】：2013-03-27 13:27:06
【问题描述】：

我无法使用 getElementsByTagName 从 xml 文件中获取数据。我应该使用什么？

这里是 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的编辑版本

我试图在不使用属性的情况下获取数据

【问题讨论】：

"title" 标签是 html 的保留标签。您可以将其更改为不同的标签并尝试吗？此外，“getElementsByTagName”返回数组。所以，你解析“lat”/“lng”的方式在这里可能行不通。分享您的 html 文件，以便我们可以在这里进行测试。
我改了还是不行
“不工作”是什么意思？请对您的问题提供更好的解释。会发生什么以及您期望会发生什么？你有任何错误吗？
不显示任何标记
我尝试编辑演示，以便 xml 文件中的数据不是从属性中获取，而是在元素中获取

标签： javascript xml google-maps

【解决方案1】：

首先，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);
        }
    }
}

【讨论】：

您有任何错误吗？您是否将"title" 选择器与<marker> 元素一起使用？
我添加了一些调试语句。您在控制台中看到了什么？
是否至少正确下载了 XML？ downloadUrl 函数是否提供错误回调？

【解决方案2】：

我认为问题出在，

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

试着改成，

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

【讨论】：