Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>1.2版-座標彙整</title>
    <!--【1.0版】主架構參考Retrieve XML file http://www.w3schools.com/xml/tryit.asp?filename=try_dom_xmlhttprequest_xml -->
    <!--【1.1版】一整串座標值(字串)要變更就靠String replace() Method http://www.w3schools.com/jsref/jsref_replace.asp -->
    <!--【1.2版】資料彙整成整個陣列可用在Polygon https://developers.google.com/maps/documentation/javascript/examples/polygon-simple -->
  </head>
  
  <body>
    <p>基於安全理由，目前大部分瀏覽器(如Chrome)不允許網頁程式存取本機檔案，這樣的限制造成此程式無法直接在個人電腦上正常執行(因為要讀取另一個kml檔取得其資料)。但是此程式在jsfiddle、jsbin等平台上也無法正常執行，因為瀏覽器會限制讀取跨網域(cross domain)的xml檔。要測試這個程式，就必須先在自己的電腦上啟動Web Service，然後執行http://localhost/this.html，才能看到正確的執行結果，而自己的電腦上需要快速免安裝就能執行的Web Service，可以試試<a href="https://steachs.com/archives/1797" target="_blank">USBWebserver</a>。</p>
    
    <p>輸入的KML檔可以是Google My Maps繪製的圖資，譬如可以利用這個「<a href="https://drive.google.com/open?id=1WrK7W5deyPURtCL7lyh-AOeGhRk&usp=sharing" target="_blank">中興大學校園RFID門禁大樓</a>」匯出KML檔來實驗。</p>
​
    <form action="javascript:loadXMLDoc();">
    請輸入KML檔名:   <input type="text" id="xmlfile" value="檔名.kml">
    <input type="submit">
    </form>
​
    <table id="demo" border="1">
    </table>
​
  <script>
  function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
      }
    };
    xmlhttp.open("GET", document.getElementById('xmlfile').value , true);
    xmlhttp.send();
  }
​
  function myFunction(xml) {
    var x, i, xmlDoc, trs;
    //【1.2版】///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    var td1="";
    var td2="";
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    xmlDoc = xml.responseXML;
    trs = "<tr><th>NAME</th><th>COORDINATES</th></tr>";
    x = xmlDoc.getElementsByTagName("Placemark")
    for (i = 0; i < x.length; i++) { 
      //【1.1版】+【1.2版】///////////////////////////////////////////////////////////////////////////////////////////////////////
      // 原來的名稱前後加上單引號及逗點，並將迴圈每次資料都逐一串接起來
      var na = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
      td1 = td1 + "'" + na + "',<br />";
      // 原來的一串座標值(字串)要變更就靠String replace() Method http://www.w3schools.com/jsref/jsref_replace.asp
      // 而格式要轉換成Google Maps Polygon之用 https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
      var co = x[i].getElementsByTagName("coordinates")[0].childNodes[0].nodeValue;
      co = co.replace(/,24./g,", lat: 24.");
      co = co.replace(/,0.0 120./g,"}, {lng: 120.");
      co = co.replace("120.", "[{lng: 120.");
      co = co.replace(",0.0", "}],<br />");
      //【1.2版】並將迴圈每次資料都逐一串接彙整起來
      td2 = td2 + co;
      ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    }
    //【1.2版】迴圈跑完才將整個彙整好的資料顯示出來
    trs += "<tr><td>" + td1 + "</td><td>" + td2 + "</td></tr>";
    document.getElementById("demo").innerHTML = trs;
  }
 </script>
</body>
</html>
​
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers