| 38 | | var request = GXmlHttp.create(); // 產生一個非同步的 AJAX XMLHttp 物件 |
| 39 | | if (queryPair[0]=='R1') { |
| 40 | | |
| 41 | | |
| 42 | | |
| 43 | | var GetDataXml="getdeepstaxml.asp"; // 預設因為 queryPair[0] 是空的, 所以資料來源來自 getdeepstaxml.asp |
| 44 | | |
| 45 | | request.open("GET",GetDataXml, true); // 用 XMLHttp 物件去開啟 http://deepsea.biodiv.tw/getdeepstaxml.asp |
| | 38 | var request = GXmlHttp.create(); // 產生一個非同步的 AJAX XMLHttp 物件 (Jazz: 好簡單的一行 AJAX 啊!!) |
| | 39 | if (queryPair[0]=='R1') { // 這段是用在對應"物種統計"與"科別統計"的 URL 解析上 |
| | 40 | var GetDataXml="getdeepstaxml.asp?" + queryPair[0] + "=" + valuePair[0] + "&" + queryPair[1] + "=" + valuePair[1]; |
| | 41 | } |
| | 42 | else { |
| | 43 | var GetDataXml="getdeepstaxml.asp"; // 預設因為 queryPair[0] 是空的, 所以資料來源來自 getdeepstaxml.asp |
| | 44 | } |
| | 45 | request.open("GET",GetDataXml, true); // 用 XMLHttp 物件去開啟 http://deepsea.biodiv.tw/getdeepstaxml.asp |
| 50 | | |
| 51 | | }}} |
| 52 | | * |
| 53 | | {{{ |
| 54 | | request.onreadystatechange = function() { |
| 55 | | if (request.readyState == 4) { |
| 56 | | var xmlDoc = request.responseXML; |
| 57 | | var markers = xmlDoc.documentElement.getElementsByTagName("marker"); |
| 58 | | for (var i = 0; i < markers.length; i++) { |
| 59 | | var points2 = []; |
| 60 | | points2.push(new GLatLng(parseFloat(markers[i].getAttribute("lat1")),parseFloat(markers[i].getAttribute("lng1")))) |
| 61 | | points2.push(new GLatLng(parseFloat(markers[i].getAttribute("lat2")),parseFloat(markers[i].getAttribute("lng2")))) |
| 62 | | map.addOverlay(new GPolyline(points2,'#FF0000',2,1)); |
| 63 | | var lat=(parseFloat(markers[i].getAttribute("lat1"))+parseFloat(markers[i].getAttribute("lat2")))/2 |
| 64 | | var lng=(parseFloat(markers[i].getAttribute("lng1"))+parseFloat(markers[i].getAttribute("lng2")))/2 |
| 65 | | |
| 66 | | var point = new GLatLng(lat,lng |
| 67 | | ); |
| 68 | | var id=markers[i].getAttribute("id") |
| 69 | | var depth=markers[i].getAttribute("depth") |
| 70 | | var marker = createMarkerWithLnk(point,id,icon,depth); |
| 71 | | map.addOverlay(marker); |
| | 56 | #!java |
| | 57 | request.onreadystatechange = function() { // 定義 XMLHttp 有狀態改變的事件處理函數 callback function |
| | 58 | if (request.readyState == 4) { // XMLHttp 的狀態是 Ready (4) 繼續處理 Server 傳回的 XML 資料 |
| | 59 | var xmlDoc = request.responseXML; // xmlDoc = 回傳的 XML 資料 |
| | 60 | var markers = xmlDoc.documentElement.getElementsByTagName("marker"); // 取出名稱為 marker 的 xml 元件, 結果是陣列 |
| | 61 | for (var i = 0; i < markers.length; i++) { |
| | 62 | var points2 = []; // 宣告一個空的陣列 point2 來存起始與結束座標點 |
| | 63 | // 把 lat1 跟 lng1 塞進起始座標點 GLatLng 物件 |
| | 64 | points2.push(new GLatLng(parseFloat(markers[i].getAttribute("lat1")),parseFloat(markers[i].getAttribute("lng1")))) |
| | 65 | // 把 lat2 跟 lng2 塞進起始座標點 GLatLng 物件 |
| | 66 | points2.push(new GLatLng(parseFloat(markers[i].getAttribute("lat2")),parseFloat(markers[i].getAttribute("lng2")))) |
| | 67 | // 用 point2 產生 GPolyline 物件,畫從 point2[2] 到 point2[1] 的線條 |
| | 68 | // - 參考 http://code.google.com/apis/maps/documentation/reference.html#GPolyline |
| | 69 | // - GPolyline(座標點, 顏色, 線條粗細(pixel), 透明度(0: 反鋸齒, 1: 半透明)) |
| | 70 | // 然後用 addOverlay 函數把線條疊到地圖上 |
| | 71 | map.addOverlay(new GPolyline(points2,'#FF0000',2,1)); |
| | 72 | // 計算起始與結束的中心位置座標點 |
| | 73 | var lat=(parseFloat(markers[i].getAttribute("lat1"))+parseFloat(markers[i].getAttribute("lat2")))/2 |
| | 74 | var lng=(parseFloat(markers[i].getAttribute("lng1"))+parseFloat(markers[i].getAttribute("lng2")))/2 |
| | 75 | // 產生中點 GLatLng 座標物件 |
| | 76 | var point = new GLatLng(lat,lng); |
| | 77 | // 取得 XML 資料中的測站名稱(id)與打撈深度(depth) |
| | 78 | var id=markers[i].getAttribute("id") |
| | 79 | var depth=markers[i].getAttribute("depth") |
| | 80 | // 呼叫自訂的 createMarkerWithLnk() 來產生一個具有連結的 Marker 物件 |
| | 81 | // createMarkerWithLnk(中點座標位置,測站代號,自訂圖示,測站打撈深度) |
| | 82 | var marker = createMarkerWithLnk(point,id,icon,depth); |
| | 83 | // 把 Marker 物件貼上地圖 |
| | 84 | map.addOverlay(marker); |
| | 85 | } |
