麻烦循环遍历XML元素和属性

时间:2014-09-18 21:58:50

标签: javascript xml google-maps loops google-maps-api-3

我正在构建一个地图,显示来自xml源的多条折线,并且在获取元素和属性方面遇到了一些麻烦。

显示并绘制所有折线,但每个折线信息窗包含相同的属性数据(仅捕获xml文档中的最后一个元素)。

我已经尝试了多种情况来循环数据,但仍然无法让它抓住每条折线的集合。

XML文档的结构如下:

<!-- language: lang-xml -->
<markers>
<line attributeA="" attributeB="" attributeC="">
<point lat="" lng="">
<point lat="" lng="">
</line>
</markers>

令人讨厌的JS脚本:

<!-- language: javascript -->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="downloadxml.js"></script>
<script type="text/javascript">

function initialize() {
  var myLatlng = new google.maps.LatLng(30.695895, -97.354080);
  var mapOptions = {
    zoom: 5,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
 }

 var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
 var infowindow = new google.maps.InfoWindow({map: map});

  downloadUrl("objectdata.xml",   function(data) {
    var xml = xmlParse(data); 

    var lines = xml.documentElement.getElementsByTagName("markers");
    var markers = xml.documentElement.getElementsByTagName("line");

    // loop through polyline data
    for (var i = 0; i < markers.length; i++) {

      var path = [];
      var points = markers[i].getElementsByTagName("point");
      var name = markers[i].getAttribute("name");

      for (var j = 0; j < points.length; j++) {
        var lat = parseFloat(points[j].getAttribute("lat"));
        var lng = parseFloat(points[j].getAttribute("lng"));
        var point = new google.maps.LatLng(lat,lng);
        path.push(point);

      } //end od point loop

      var polyline = new google.maps.Polyline({
        path: path,
        geodesic: true,
        strokeColor: "#800080",
        strokeOpacity: .80,
        strokeWeight: 2
      });

      polyline.setMap(map);

        // define infoWindow content
        var toolTip = '<div class="infobox" style="width:280px;">'+
           '<div id="siteNotice">'+
           '</div>'+
           '<h2>'+ name +'</h2>'+
           '<div>'+
           '<p>'+ notworking +'</p>'+
           '</div>'+
           '</div>';

        google.maps.event.addListener(polyline, 'click', function(event) {         
            infowindow.setContent(toolTip);
            infowindow.setPosition(event.latLng);
            infowindow.open(map);
        });

    } //end polyline loop

  }); //end download url
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

似乎我在这里错过了一些简单的东西 - 感谢帮助!

0 个答案:

没有答案
相关问题