使用JavaScript解析XML文件並在Google地圖上繪圖

注意：我是自學的（即Google），所以如果我的問題和解釋很愚蠢/很簡單，那可能就是原因。我是一個服務器人，並且從來沒有做過這種類型的腳本（從URL中提取數據並在地圖上繪圖），我只是一個用戶。請對我好。使用JavaScript解析XML文件並在Google地圖上繪圖

我試圖通過標記來解析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）爲什麼上面的文本值導致代碼失敗？

要加載的URL，我想：

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);

我已經放在警報（）在不同的地方，看看發生了什麼事情statments，但我不是100％肯定，如果我所看到的是正確。我知道URL分配是正確的，但看不到數據。難道數據太長而無法查看？我試圖檢查此網站上的DOMParser限制頁面，但無法訪問該鏈接（可能是我的工作連接不允許）。

我不知道如何繼續。

2）我該怎麼辦？

來源

2017-03-09 Solaris_Guy

我相信我發現至少有一個部分回答我的原始問題。下面的代碼將從我的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; 
     } 
    }

來源

2017-03-17 18:11:10

這是我的最終代碼片段。

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 
     }); 
    } 
}

來源

2017-03-28 17:10:48

使用JavaScript解析XML文件並在Google地圖上繪圖

回答

相關問題