多折线

Question

我想从一个XML文件中显示多折线：

<lines> 
    <line> 
     <linePoint lat="47.608940" lng="-122.340141"/> 
     <linePoint lat="47.613590" lng="-122.344391"/> 
     <linePoint lat="47.624561" lng="-122.356445"/> 
    </line> 
    <line> 
     <linePoint lat="47.616600" lng="-122.344491"/> 
     <linePoint lat="47.627661" lng="-122.356545"/> 
    </line> 
</lines> 

我认为，脚本应该重复两次 - 外环通过line元素会和内环通过内linePoint元素会每个line。

但似乎我的脚本将所有5 linePoint转储到单个折线而不是创建2个多义线。

downloadUrl("createXML.php", function(data) { 
    var xml = data.responseXML; 
    var line = xml.documentElement.getElementsByTagName("line"); 
    // Read each line 
    for (var a = 0; a < line.length; a++) { 
     var linePoint = xml.documentElement.getElementsByTagName("linePoint"); 
     var path = []; 
     // Read markers on each line 
     for (var i = 0; i < linePoint.length; i++) { 
      var lat = parseFloat(linePoint[i].getAttribute("lat")); 
      var lng = parseFloat(linePoint[i].getAttribute("lng")); 
      var point = new google.maps.LatLng(lat,lng); 
      path.push(point); 
     } 

     var polyline = new google.maps.Polyline({ 
      path: path 
     }); 
     polyline.setMap(map); 
    } 
}); 

有人可以指出我忽略了什么吗？

Answer 1

是的，那是因为你只是通过getElementsByTagName("linePoint")（复数元素）在一个块中提取出all<linePoint>。遍历<line>的和每个<line>叠代其<linePoint>的：

function showPolyLines() { 
    var parser = new DOMParser(); 
    var xml = parser.parseFromString(responseXML, "application/xml"); 
    var line = xml.querySelectorAll("line"); 

    for (var l = 0; l < line.length; l++) { 
    var path = [], 
     linePoints = line[l].querySelectorAll('linePoint'); 

    for (var p = 0; p < linePoints.length; p++) { 
     var linePoint = linePoints[p], 
     lat = parseFloat(linePoint.getAttribute("lat")), 
     lng = parseFloat(linePoint.getAttribute("lng")), 
     point = new google.maps.LatLng(lat, lng); 

     path.push(point); 
    } 
    var polyline = new google.maps.Polyline({ 
     path: path, 

     //just to be sure the lines actually is shown on the map :) 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 
    polyline.setMap(map); 
    } 
} 

我使用的是DOMParser替代xml.documentElement，因为我没有在我的小提琴测试一个真正的responseXML，但它们实际上是相同的。

演示 - >http://jsfiddle.net/9sqastj1/