| | 112 | |
| | 113 | == 實驗跨站取得 XML 資料 == |
| | 114 | |
| | 115 | * 首先把 !GetDataXml 設定成 "http://deepsea.biodiv.tw/getdeepstaxml.asp", 把 HTML 範例改寫成 |
| | 116 | {{{ |
| | 117 | #!java |
| | 118 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| | 119 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| | 120 | <html xmlns="http://www.w3.org/1999/xhtml"> |
| | 121 | <head> |
| | 122 | <meta http-equiv="content-type" content="text/html; charset=utf-8"/> |
| | 123 | <title>Google Maps JavaScript API Example</title> |
| | 124 | <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAREq2HXjZzIdAyVORbKBYMhTGA1AmqT3f4EHIxhq9FLpYC-sN5RSNOiRjrKXraxSIlkXZKb9VzUKDWQ" |
| | 125 | type="text/javascript"></script> |
| | 126 | <script type="text/javascript"> |
| | 127 | //<![CDATA[ |
| | 128 | function load() { |
| | 129 | if (GBrowserIsCompatible()) { |
| | 130 | var map = new GMap2(document.getElementById("map")); // 取得 DOM 中,名稱為 map 的元件 |
| | 131 | map.addControl(new GLargeMapControl()); // 加入左上角比例尺規控制列 |
| | 132 | map.addControl(new GScaleControl()); // 加入左下角比例尺狀態列 |
| | 133 | map.addControl(new GMapTypeControl()); // 加入右上角"地圖","衛星","混合地圖"按鈕 |
| | 134 | map.setCenter(new GLatLng(23.8,121), 7); // 設定預設經緯度北緯 23.8, 東經 121, 預設比例尺 100 公里(7) |
| | 135 | map.setMapType(G_SATELLITE_MAP); // 設定預設底圖為"衛星" |
| | 136 | } |
| | 137 | var request = GXmlHttp.create(); // 產生一個非同步的 AJAX XMLHttp 物件 |
| | 138 | var GetDataXml="getdeepstaxml.xml"; |
| | 139 | request.open("GET",GetDataXml, true); // 用 XMLHttp 物件去開啟 getdeepstaxml.xml |
| | 140 | request.onreadystatechange = function() { // 定義 XMLHttp 有狀態改變的事件處理函數 callback function |
| | 141 | if (request.readyState == 4) { // XMLHttp 的狀態是 Ready (4) 繼續處理 Server 傳回的 XML 資料 |
| | 142 | var xmlDoc = request.responseXML; // xmlDoc = 回傳的 XML 資料 |
| | 143 | var markers = xmlDoc.documentElement.getElementsByTagName("marker"); // 取出名稱為 marker 的 xml 元件, 結果是陣列 |
| | 144 | for (var i = 0; i < markers.length; i++) { |
| | 145 | var points2 = []; // 宣告一個空的陣列 point2 來存起始與結束座標點 |
| | 146 | // 把 lat1 跟 lng1 塞進起始座標點 GLatLng 物件 |
| | 147 | points2.push(new GLatLng(parseFloat(markers[i].getAttribute("lat1")),parseFloat(markers[i].getAttribute("lng1")))); |
| | 148 | // 把 lat2 跟 lng2 塞進起始座標點 GLatLng 物件 |
| | 149 | points2.push(new GLatLng(parseFloat(markers[i].getAttribute("lat2")),parseFloat(markers[i].getAttribute("lng2")))); |
| | 150 | // 用 point2 產生 GPolyline 物件,畫從 point2[2] 到 point2[1] 的線條 |
| | 151 | // - 參考 http://code.google.com/apis/maps/documentation/reference.html#GPolyline |
| | 152 | // - GPolyline(座標點, 顏色, 線條粗細(pixel), 透明度(0: 反鋸齒, 1: 半透明)) |
| | 153 | // 然後用 addOverlay 函數把線條疊到地圖上 |
| | 154 | map.addOverlay(new GPolyline(points2,'#FF0000',2,1)); |
| | 155 | } |
| | 156 | } |
| | 157 | } |
| | 158 | request.send(null); // 送出 XMLHttp 物件的要求 |
| | 159 | } |
| | 160 | //]]> |
| | 161 | </script> |
| | 162 | </head> |
| | 163 | <body onload="load()" onunload="GUnload()"> |
| | 164 | <div id="map" style="width: 800px; height: 600px"></div> |
| | 165 | </body> |
| | 166 | </html> |
| | 167 | }}} |
| | 168 | * 結果發現並不會正常畫出紅線, 因此用 wget 先把 XML 抓下來 |
| | 169 | {{{ |
| | 170 | #!sh |
| | 171 | jazz@trac:/var/www$ wget http://deepsea.biodiv.tw/getdeepstaxml.asp |
| | 172 | jazz@trac:/var/www$ mv getdeepstaxml.asp getdeepstaxml.xml |
| | 173 | }}} |
| | 174 | * 再把 XMLHttp 物件要去 GET 的 URL 改為 getdeepstaxml.xml , 就可以正常看到紅線了~ |
| | 175 | {{{ |
| | 176 | #!diff |
| | 177 | - var GetDataXml="http://deepsea.biodiv.tw/getdeepstaxml.asp"; |
| | 178 | + var GetDataXml="getdeepstaxml.xml"; |
| | 179 | }}} |
| | 180 | * [猜測] 或許為了安全性, Google Map API 所產生的 XMLHttp 物件不允許連結外部 URL |
