来自 XML 的多条折线

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 个元素，内循环遍历每个 line.

中的 linePoint 个元素

但我的脚本似乎将所有 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 因为我的 fiddle 测试中没有真正的 responseXML，但它们实际上是一样的。

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

来自 XML 的多条折线

Multiple polylines from XML

javascript

xml

google-maps

google-polyline