Changeset 49 for oceandb


Ignore:
Timestamp:
Jan 21, 2009, 1:37:00 PM (16 years ago)
Author:
jazz
Message:
  • Main.js:
    • add default view of google map
    • add script of AJAX loading from XML
  • getdeepstaxml.xml
    • this xml is the source of AJAX
  • index.html
    • you must add your Google Map API key manualy or the key will be different from URLs.
Location:
oceandb/webapproot
Files:
1 added
2 edited

Legend:

Unmodified
Added
Removed

  • oceandb/webapproot/index.html

    r47 r49  
    2222<script type="text/javascript" src="config.js"></script>
    2323<script type="text/javascript" src="/wavemaker/lib/wm/base/boot/boot.js"></script>
     24<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAREq2HXjZzIdAyVORbKBYMhTfzQKfMm5eNRoty1ZKt0XEeQdtXxTxlSH6lZOV7UEfIym3ft5_EnXXDw" type="text/javascript"></script>
    2425</head>
    2526<body class="tundra">

  • oceandb/webapproot/pages/Main/Main.js

    r47 r49  
    11dojo.declare("Main", wm.Page, {
    2   start: function() {
    3    
    4   },
    5   _end: 0
     2  start: function() {
     3    if (GBrowserIsCompatible()) {
     4     var map = new GMap2(dojo.byId(this.map).domNode);    // 透過 Dojo 取得 DOM 中,名稱為 map 的元件
     5     map.addControl(new GLargeMapControl());          // 加入左上角比例尺規控制列
     6     map.addControl(new GScaleControl());            // 加入左下角比例尺狀態列
     7     map.addControl(new GMapTypeControl());           // 加入右上角"地圖","衛星","混合地圖"按鈕
     8     map.setCenter(new GLatLng(23.8,121), 7);         // 設定預設經緯度北緯 23.8, 東經 121, 預設比例尺 100 公里(7)
     9     map.setMapType(G_SATELLITE_MAP);              // 設定預設底圖為"衛星"
     10    }
     11    var request = GXmlHttp.create();                      // 產生一個非同步的 AJAX XMLHttp 物件
     12    var GetDataXml="getdeepstaxml.xml";
     13    request.open("GET",GetDataXml, true);                    // 用 XMLHttp 物件去開啟 http://deepsea.biodiv.tw/getdeepstaxml.asp
     14    request.onreadystatechange = function() {                 // 定義 XMLHttp 有狀態改變的事件處理函數 callback function
     15     if (request.readyState == 4) {                     // XMLHttp 的狀態是 Ready (4) 繼續處理 Server 傳回的 XML 資料
     16      var xmlDoc = request.responseXML;                   // xmlDoc = 回傳的 XML 資料
     17      var markers = xmlDoc.documentElement.getElementsByTagName("marker");  // 取出名稱為 marker 的 xml 元件, 結果是陣列
     18      for (var i = 0; i < markers.length; i++) {
     19       var points2 = [];                          // 宣告一個空的陣列 point2 來存起始與結束座標點
     20       // 把 lat1 跟 lng1 塞進起始座標點 GLatLng 物件
     21       points2.push(new GLatLng(parseFloat(markers[i].getAttribute("lat1")),parseFloat(markers[i].getAttribute("lng1"))));
     22       // 把 lat2 跟 lng2 塞進起始座標點 GLatLng 物件
     23       points2.push(new GLatLng(parseFloat(markers[i].getAttribute("lat2")),parseFloat(markers[i].getAttribute("lng2"))));
     24       // 用 point2 產生 GPolyline 物件,畫從 point2[2] 到 point2[1] 的線條
     25       // - 參考 http://code.google.com/apis/maps/documentation/reference.html#GPolyline
     26       // - GPolyline(座標點, 顏色, 線條粗細(pixel), 透明度(0: 反鋸齒, 1: 半透明))
     27       // 然後用 addOverlay 函數把線條疊到地圖上
     28       map.addOverlay(new GPolyline(points2,'#FF0000',2,1));
     29      }
     30     }
     31    }
     32    request.send(null);                                      // 送出 XMLHttp 物件的要求
     33  },
     34  _end: 0
    635});
Note: See TracChangeset for help on using the changeset viewer.