[50] | 1 | var map; // map 物件必須是全域變數,才能讓每個圖層存取 |
---|
[47] | 2 | dojo.declare("Main", wm.Page, { |
---|
[49] | 3 | start: function() { |
---|
| 4 | if (GBrowserIsCompatible()) { |
---|
[50] | 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); // 設定預設底圖為"衛星" |
---|
[49] | 11 | } |
---|
[50] | 12 | }, |
---|
| 13 | deepseaChange: function(inSender, inDisplayValue, inDataValue) { |
---|
| 14 | if(this.deepsea.dataValue) |
---|
| 15 | { |
---|
| 16 | var request = GXmlHttp.create(); // 產生一個非同步的 AJAX XMLHttp 物件 |
---|
[49] | 17 | var GetDataXml="getdeepstaxml.xml"; |
---|
[50] | 18 | request.open("GET",GetDataXml, true); // 用 XMLHttp 物件去開啟 http://deepsea.biodiv.tw/getdeepstaxml.asp |
---|
| 19 | request.onreadystatechange = function() { // 定義 XMLHttp 有狀態改變的事件處理函數 callback function |
---|
[49] | 20 | if (request.readyState == 4) { // XMLHttp 的狀態是 Ready (4) 繼續處理 Server 傳回的 XML 資料 |
---|
[50] | 21 | var xmlDoc = request.responseXML; // xmlDoc = 回傳的 XML 資料 |
---|
[49] | 22 | var markers = xmlDoc.documentElement.getElementsByTagName("marker"); // 取出名稱為 marker 的 xml 元件, 結果是陣列 |
---|
| 23 | for (var i = 0; i < markers.length; i++) { |
---|
[50] | 24 | var points2 = []; // 宣告一個空的陣列 point2 來存起始與結束座標點 |
---|
[49] | 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 | } |
---|
[50] | 37 | request.send(null); // 送出 XMLHttp 物件的要求 |
---|
| 38 | } |
---|
[49] | 39 | }, |
---|
[50] | 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 | }, |
---|
[49] | 44 | _end: 0 |
---|
[50] | 45 | }); |
---|