Changes between Version 4 and Version 5 of oid/WorkLog/09-02-04

Timestamp:

Feb 4, 2009, 3:37:02 PM (15 years ago)

Author:

jazz

Comment:

--

oid/WorkLog/09-02-04

@@ -118 +118 @@
  * 點選"聲明"才會顯示 disclaimer_box 的畫面[[BR]][[Image(bottom-button-div2.jpg)]]
 {{{
+#!js
 <div style="height:2em;"></div>
-
-### 載入 jQuery API 
 <script src="http://www.google.com/jsapi" type="text/javascript"></script>
 <script type="text/javascript">
@@ -128 +127 @@
  * 上面這一段是宣告要載入 Hosting 在 Google 的 jQuery API 1.2.6 版
 {{{
+#!js
 <script type="text/javascript">
 window.serverBase="http://www.google.com";
@@ -137 +137 @@
  * [註] 底下開始會稍微變動一下原始碼的順序，我們先來看 jQuery 的 main 進入點
 {{{
+#!js
   $(function(){
-    G_MAP = new RedcliffMap();
+    G_MAP = new RedcliffMap(); # 呼叫 RedcliffMap() 產生 GMap2 物件
     LoadLocation();
     new TilesSelect();
@@ -150 +151 @@
   });
 }}}
+ * 關於 G_MAP = new RedcliffMap(); 這行程式
+{{{
+#!js
+
+  # 首先要看的是 RedcliffMap 這個類別物件的建構子(Constructor)
+
+  RedcliffMap.prototype = {
+    changeTiles: function(opacity_val) {
+      // IE6 does not support opacity, so we remove the layer if opacity is 0
+      if (this.tileLayerOverlay != null) {
+        this.gmap.removeOverlay(this.tileLayerOverlay);
+      }
+      if (opacity_val < 0.01) {
+        this.tileLayerOverlay = null;
+      } else {
+        this.tileLayerOverlay = new GTileLayerOverlay(
+          new GTileLayer(null, null, null, {
+            tileUrlTemplate: URL.tile_url,
+            isPng:true,
+            opacity:opacity_val
+          })
+        );
+        this.gmap.addOverlay(this.tileLayerOverlay);
+      }
+    },
+    addOverlay: function(overlay) {
+      this.gmap.addOverlay(overlay);
+    },
+    removeOverlay: function(overlay) {
+      this.gmap.removeOverlay(overlay);
+    },
+    openInfoWindow: function(type, id, latlng) {
+      if (type == "EVENT") {
+        var event = EVENT.getItem(id);
+        var info_div = Utils.constructInfoWindowHtml([event]);
+        this.gmap.openInfoWindowHtml(latlng, info_div);
+        //this.highLightOverlay(event.element_ids);
+      }
+      if (type == "ELEMENT") {
+        var element = ELEMENT.getItem(id);
+        var events = new Array();
+        $.each(element.events, function(index, event_id) {
+          if (CURRENT_EVENT_HASH.hasItem(event_id)) {
+            var event = EVENT.getItem(event_id);
+            events.push(event);
+          }
+        });
+        if (events.length > 1) {
+          var info_tabs = Utils.constructInfoWindowTabsHtml(events);
+          this.gmap.openInfoWindowTabsHtml(latlng, info_tabs);
+        } else {
+          var info_div = Utils.constructInfoWindowHtml(events);
+          this.gmap.openInfoWindowHtml(latlng, info_div);
+        }
+        //this.highLightOverlay(id);
+      }
+    },
+    highLightOverlay: function(element_ids) {
+      $.each(element_ids, function(index, element_id) {
+        if (CURRENT_ELEMENT_HASH.hasItem(element_id)) {
+          var element = ELEMENT.getItem(element_id);
+          element.highLight();
+          HIGH_LIGHT_ELEMENT.push(element_id);
+        }
+      });
+    },
+    
+    deHighLightOverlay: function() {
+      while (HIGH_LIGHT_ELEMENT.length > 0) {
+        var element_id = HIGH_LIGHT_ELEMENT.pop();
+        var element = ELEMENT.getItem(element_id);
+        //element.deHighLight();
+      }
+    },
+    
+    setCenter: function(center, level) {
+      this.gmap.panTo(center);
+    },
+
+    clearOverlays: function() {
+      this.gmap.closeInfoWindow();
+      while (CURRENT_ELEMENT.length > 0) {
+        var element_id = CURRENT_ELEMENT.pop();
+        var elem = ELEMENT.getItem(element_id);
+        CURRENT_ELEMENT_HASH.removeItem(element_id);
+        elem.removeFromMap();
+      }
+      
+      while (CURRENT_EVENT.length > 0) {
+        var event_id = CURRENT_EVENT.pop();
+        CURRENT_EVENT_HASH.removeItem(element_id);
+      }
+      CURRENT_OVERLAY_ID = "";
+    },
+
+    updateOverlay: function(type, id) {
+      if (type + '_' + id == CURRENT_OVERLAY_ID)
+        return;
+      CURRENT_OVERLAY_ID = type + '_' + id;
+      this.clearOverlays();
+      
+      var element_ids;
+      var event_ids;
+      if (type == 'E') {
+        var big_event = BIG_EVENT.getItem(id);
+        element_ids = big_event.element_ids;
+        event_ids = big_event.event_ids;
+      } else {
+        var people = PEOPLE.getItem(id);
+        element_ids = people.element_ids;
+        event_ids = people.event_ids;
+      }
+      
+      $.each(element_ids, function(index, element_id) {
+        var elem = ELEMENT.getItem(element_id);
+        elem.drawOnMap();
+        CURRENT_ELEMENT.push(element_id);
+        CURRENT_ELEMENT_HASH.setItem(element_id, "");
+      });
+
+      $.each(event_ids, function(index, event_id) {
+        CURRENT_EVENT.push(event_id);
+        CURRENT_EVENT_HASH.setItem(event_id, "");
+      });
+    }
+  };
+
+  function RedcliffMap(node) {
+    var me = this;
+
+    # 參考 http://code.google.com/intl/zh-TW/apis/maps/documentation/mapplets/basics.html#GMap2
+    # GMap2 代表 Google Map 的 map 根元件
+    this.gmap = new GMap2();
+
+    # 設定初始地圖中心經緯度位置
+    this.gmap.setCenter(new GLatLng(29.833, 113.618), 7, G_PHYSICAL_MAP);
+
+    # 用 GTileLayerOverlay 來取代原始的地圖底圖
+    # 參考 http://code.google.com/intl/zh-TW/apis/maps/documentation/overlays.html#Tile_Overlays
+    # 參考 http://code.google.com/intl/zh-TW/apis/maps/documentation/reference.html#GTileLayerOverlay
+    # 建構子定義 GTileLayerOverlay(tileLayer:GTileLayer, opts?:GTileLayerOverlayOptions) 
+
+    this.tileLayerOverlay = new GTileLayerOverlay(
+
+    # 參考 http://code.google.com/intl/zh-TW/apis/maps/documentation/reference.html#GTileLayer
+    # 建構子定義 GTileLayer(copyrights:GCopyrightCollection, minResolution:Number, 
+    #                     maxResolution:Number, options?:GTileLayerOptions) 
+    # 參考 http://code.google.com/intl/zh-TW/apis/maps/documentation/reference.html#GTileLayerOptions
+    # 這裡設定 tileUrlTemplate: URL.tile_url = http://mt.google.cn/mt?v=cnsg1.2&hl=zh-CN&x={X}&y={Y}&z={Z}
+    # 根據 API 文件 Templates 必須是這樣: http://host/tile?x={X}&y={Y}&z={Z}.png 
+
+      new GTileLayer(null, null, null, {
+        tileUrlTemplate: URL.tile_url,
+        isPng:true,
+        opacity:1.0
+      })
+    );
+    this.gmap.addOverlay(this.tileLayerOverlay); 
+  };
+}}}