0

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を編集したものです

属性を使用せずにデータを取得しようとしています

4

2 に答える 2

0

まず、XML に要素var markers = data.documentElement.getElementsByTagName("marker");がまったくないため、空のノード リストが生成されます。<marker>

次に、parseFloat(markers[i].getElementsByTagName("lat")うまくいきません。が要素であると仮定markers[i]すると、<title>要素のNodeListがgetElementsByTagName返されます。これはおそらくできないことです。<lat>parseFloat

代わりに、リストから最初の要素を取得し、その最初のTextNodenodeValueにアクセスして、そこから を取得する必要があります。または、少なくとも何らかの形で からを取得する必要がありtextContentます<lat>。

次に、コールバック関数は次のようになります

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);
        }
    }
}
于 2013-03-27T13:59:24.503 に答える
0

問題は

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

に変更してみてください。

var markers = data.getElementsByTagName("marker");
于 2013-03-28T18:33:24.590 に答える