Question

注意：我是自学（即谷歌），所以如果我的问题和解释很愚蠢/简单，那可能就是原因。我是一个服务器人，从来没有做过这种类型的脚本（从URL中提取数据并在地图上绘图），我只是一个用户。请善待我。

我正在尝试按标签解析XML格式的天气数据文件。该文件来自航空天气链接（定期更新）。为了测试我的代码，我下载了数据（大约40K），这是一个长字符串。

我的最终目标是从此链接输入数据，解析数据，找到所有坐标并绘制每个坐标对的标记。

在数据中，有很多我不需要的数据，然后是我想要使用的部分。这是一个例子：

<lots_of_stuff><area num_points="11"><point><longitude>-120.47</longitude><latitude>49.46</latitude></point><point><longitude>-114.13</longitude><latitude>49.17</latitude></point><point> ...

这种模式仍在继续。每个不同部分的值会有所不同。如果我使用小部分坐标数据，我可以成功地解析/绘制标记。以下是适用于小型数据snipets的代码：

<p id="demo"></p>
<SCRIPT>
var parser, xmlDoc;
var text = "<point><longitude>-120.47</longitude><latitude>49.46</latitude></point>";

parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML = xmlDoc.getElementsByTagName("latitude")[0].childNodes[0].nodeValue +  "  " + xmlDoc.getElementsByTagName("longitude")[0].childNodes[0].nodeValue;
</SCRIPT>

我没有展示情节。我注意到的一件事是，如果我增加数据片段的大小，则此代码不起作用。例如，对于此文本值，代码失败，我不知道它失败的原因。

var text = "<point><longitude>-120.47</longitude><latitude>49.46</latitude></point><point><longitude>-114.13</longitude><latitude>49.17</latitude></point><point>";

1）为什么上面的文本值导致代码失败？

要加载网址，我正在尝试：

parser = new DOMParser();
var script = document.createElement('script');
script.src = 'url_for_data';
xmlDoc = parser.parseFromString(script,"text/xml");

var lat = document.getElementsById("demo").innerHTML = xmlDoc.getElementsByTagName("latitude")[0].childNodes[0].nodeValue;alert(lat);
var long = document.getElementsById("demo").innerHTML = xmlDoc.getElementsByTagName("longitude")[0].childNodes[0].nodeValue;alert(long);

我已经在各个地方放置了alert（）声明以查看发生了什么，但我不能100％确定我所看到的是否正确。我知道URL分配是正确的，但无法查看数据。可能是数据太长而无法查看？我尝试检查此站点上的DOMParser限制页面，但无法访问该链接（可能是我的工作连接不允许）。

我不知道如何继续。

2）我该怎么办？

Answer 1

我相信我至少找到了原始问题的一个重要答案。下面的代码将从我的xml文件中提取坐标。从这里开始，我需要将其绘制出来。有时候新手很难。

    function myFunction(xml) {
        var x, y, i, xmlDoc, latLng;
        xmlDoc = xml.responseXML;
        x = xmlDoc.getElementsByTagName('latitude');
        y = xmlDoc.getElementsByTagName('longitude');
        for (i = 0; i < x.length; i++) { 
            latLng = x[i].childNodes[0].nodeValue + y[i].childNodes[0].nodeValue;
        }
    }

Answer 2

这是我的最终代码段。

   function PlotUm(xml) {
   var x, y, i, txt, xmlDoc, latLng;
   xmlDoc = xml.responseXML;
   x = xmlDoc.getElementsByTagName('latitude');
   y = xmlDoc.getElementsByTagName('longitude');alert("FOR LOOP");
   for (var i = 0; i < x.length; i++)  {
        xcoord = x[i].childNodes[0].nodeValue;
        ycoord = y[i].childNodes[0].nodeValue;
        var latLng = new google.maps.LatLng(xcoord,ycoord);
        var marker = new google.maps.Marker({
             position: latLng,
             icon: 'http://maps.google.com/mapfiles/ms/micons/pink.png',
             map: map
        });
   }
}

使用JavaScript解析XML文件并在Google Maps上绘图

2 个答案: