source: oceandb/wavemaker_prototype/webapproot/pages/Main/Main.js @ 250

Last change on this file since 250 was 50, checked in by jazz, 15 years ago
  • Main.js
    • add click event to menu button to show/hide menu
    • add checked event to deepsea checkbox to show XML data
  • Main.widgets.js
    • modified layout
File size: 2.9 KB
Line 
1var map;            // map 物件必須是全域變數,才能讓每個圖層存取
2dojo.declare("Main", wm.Page, {
3  start: function() {
4    if (GBrowserIsCompatible()) {
5     map = new GMap2(dojo.byId(this.map).domNode);      // 透過 Dojo 取得 DOM 中,名稱為 map 的元件
6     map.addControl(new GLargeMapControl());    // 加入左上角比例尺規控制列
7     map.addControl(new GScaleControl());   // 加入左下角比例尺狀態列
8     map.addControl(new GMapTypeControl());   // 加入右上角"地圖","衛星","混合地圖"按鈕
9     map.setCenter(new GLatLng(23.8,121), 7);   // 設定預設經緯度北緯 23.8, 東經 121, 預設比例尺 100 公里(7)
10     map.setMapType(G_SATELLITE_MAP);     // 設定預設底圖為"衛星"
11    }
12  },
13  deepseaChange: function(inSender, inDisplayValue, inDataValue) {
14   if(this.deepsea.dataValue)
15   {
16    var request = GXmlHttp.create();                    // 產生一個非同步的 AJAX XMLHttp 物件
17    var GetDataXml="getdeepstaxml.xml";
18    request.open("GET",GetDataXml, true);               // 用 XMLHttp 物件去開啟 http://deepsea.biodiv.tw/getdeepstaxml.asp
19    request.onreadystatechange = function() {           // 定義 XMLHttp 有狀態改變的事件處理函數 callback function
20     if (request.readyState == 4) {                     // XMLHttp 的狀態是 Ready (4) 繼續處理 Server 傳回的 XML 資料
21      var xmlDoc = request.responseXML;                 // xmlDoc = 回傳的 XML 資料
22      var markers = xmlDoc.documentElement.getElementsByTagName("marker");  // 取出名稱為 marker 的 xml 元件, 結果是陣列
23      for (var i = 0; i < markers.length; i++) {
24       var points2 = [];        // 宣告一個空的陣列 point2 來存起始與結束座標點
25       // 把 lat1 跟 lng1 塞進起始座標點 GLatLng 物件
26       points2.push(new GLatLng(parseFloat(markers[i].getAttribute("lat1")),parseFloat(markers[i].getAttribute("lng1"))));
27       // 把 lat2 跟 lng2 塞進起始座標點 GLatLng 物件
28       points2.push(new GLatLng(parseFloat(markers[i].getAttribute("lat2")),parseFloat(markers[i].getAttribute("lng2"))));
29       // 用 point2 產生 GPolyline 物件,畫從 point2[2] 到 point2[1] 的線條
30       // - 參考 http://code.google.com/apis/maps/documentation/reference.html#GPolyline
31       // - GPolyline(座標點, 顏色, 線條粗細(pixel), 透明度(0: 反鋸齒, 1: 半透明))
32       // 然後用 addOverlay 函數把線條疊到地圖上
33       map.addOverlay(new GPolyline(points2,'#FF0000',2,1));
34      }
35     }
36    }
37    request.send(null);         // 送出 XMLHttp 物件的要求   
38   }
39  },
40  showmenuClick: function(inSender, inEvent) {
41   this.menu.getValue("showing") ? this.menu.setValue("showing",false) : this.menu.setValue("showing",true);
42   map.setCenter(new GLatLng(23.8,121), 7);   // 設定預設經緯度北緯 23.8, 東經 121, 預設比例尺 100 公里(7)
43  },
44  _end: 0
45});
Note: See TracBrowser for help on using the repository browser.