Changes between Version 4 and Version 5 of oid/WorkLog/08-09-19

Timestamp:

Sep 19, 2008, 2:18:15 PM (17 years ago)

Author:

jazz

Comment:

--

oid/WorkLog/08-09-19

@@ -14 +14 @@
 == 解析網站原始碼 ==
 
- * http://deepsea.biodiv.tw/locamapd.asp
+ * 參考 http://deepsea.biodiv.tw/locamapd.asp
 {{{
 #!java
@@ -25 +25 @@
       map.setCenter(new GLatLng(23.8,121), 7);              // 設定預設經緯度北緯 23.8, 東經 121, 預設比例尺 100 公里(7)
       map.setMapType(G_SATELLITE_MAP);                      // 設定預設底圖為"衛星"
+   }
 }}}
-  *  
+ * 我們把 function load() 裡面的程式加進 HTML 範例中, 就可以得到[http://trac.nchc.org.tw/googlemap1.html 第二個成果]囉 :)[[BR]]
+   這裡我額外加了 [http://code.google.com/apis/maps/documentation/controls.html GScaleControl] 元件, 來得知目前比例尺是多大. 這樣就可以知道數值 7 是對應比例尺 100 公里, 數值 8 是對應 50 公里.
 {{{
+#!java
       map.addControl(new GScaleControl());                  // 加入左下角比例尺狀態列
 }}}
- * http://deepsea.biodiv.tw/getdeepstaxml.asp
+ * 繼續解析 http://deepsea.biodiv.tw/locamapd.asp
+{{{
+#!java
+ var request = GXmlHttp.create();                           // 產生一個非同步的 AJAX XMLHttp 物件
+ if (queryPair[0]=='R1') {
+   var GetDataXml="getdeepstaxml.asp?" + queryPair[0] + "=" + valuePair[0] + "&" + queryPair[1] + "=" + valuePair[1];
+ }
+ else { 
+  var GetDataXml="getdeepstaxml.asp";                      // 預設因為 queryPair[0] 是空的, 所以資料來源來自 getdeepstaxml.asp
+ }
+request.open("GET",GetDataXml, true);                      // 用 XMLHttp 物件去開啟 http://deepsea.biodiv.tw/getdeepstaxml.asp
+}}}
+ * 我們首先來看 http://deepsea.biodiv.tw/getdeepstaxml.asp 所回傳的 XML 資料
+[[Image(biodiv_xml.jpg)]]
+{{{
+
+}}}
+ * 
+{{{
+request.onreadystatechange = function() {
+  if (request.readyState == 4) {
+    var xmlDoc = request.responseXML;
+    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
+    for (var i = 0; i < markers.length; i++) {
+      var points2 = [];
+      points2.push(new GLatLng(parseFloat(markers[i].getAttribute("lat1")),parseFloat(markers[i].getAttribute("lng1"))))
+      points2.push(new GLatLng(parseFloat(markers[i].getAttribute("lat2")),parseFloat(markers[i].getAttribute("lng2"))))
+      map.addOverlay(new GPolyline(points2,'#FF0000',2,1));
+      var lat=(parseFloat(markers[i].getAttribute("lat1"))+parseFloat(markers[i].getAttribute("lat2")))/2
+      var lng=(parseFloat(markers[i].getAttribute("lng1"))+parseFloat(markers[i].getAttribute("lng2")))/2
+
+      var point = new GLatLng(lat,lng
+                             );
+      var id=markers[i].getAttribute("id")                       
+      var depth=markers[i].getAttribute("depth")                       
+      var marker = createMarkerWithLnk(point,id,icon,depth);
+      map.addOverlay(marker);
+    }
+  }
+}
+request.send(null);    
+}
+}}}