Changeset 68 for oceandb/jQuery_Prototype/script

Timestamp:

Mar 4, 2009, 4:57:12 PM (16 years ago)

Author:

jazz

Message:

• 單一選項可以正常顯示跟移除

File:

• oceandb/jQuery_Prototype/script/oceandb.js (modified) (5 diffs)

oceandb/jQuery_Prototype/script/oceandb.js

@@ +1 @@
+var map;  // Google Map2 物件
+
 // 註冊 onReady Event
 // 參考: http://docs.jquery.com/Events
@@ -18 +20 @@
     //     故用 type_id 來判斷第一次出現的 type_id 產生新的 DOM
     var type_id = -1;
+    var count = 1;
     $.each(json, function(i, item){
       // 確認 type_id 是否存在，否則產生一個新的 DOM
@@ -27 +30 @@
             + "'></ul><br/></div></div>");
   type_id = item.type_id;
+  // 當產生新的 DOM 時，把計數回歸到 1 產生 map-menu-type_id-count 的 id
+  count = 1;    
   $("#map-menu-" + item.type_id).append("<li><input type='checkbox'>"
            + "<font color='red'><b>=== 以下全選 ===</b></font>"
@@ -38 +43 @@
       }
       // 根據 type_id 逐一加入 owner_org
-      $("#map-menu-" + item.type_id).append("<li><input type='checkbox'>"
+      $("#map-menu-" + item.type_id).append("<li><input type='checkbox' id='map-menu-" 
+         + item.type_id + "-" + count +"'>"
          + item.owner_org + "</input></li>");
 
-      // TODO: 定義 checkbox checked 跟 unchecked 對應的處理函式
+      // 定義 checkbox checked 跟 unchecked 對應的處理函式
+      $("#map-menu-" + item.type_id + "-" + count).click(function(){
+  var checked;
+  if(this.checked){ checked=true; } else { checked=false; }
+  $.ajax({
+    type: "GET",
+    url:  "data/get_data.php",
+    data: "type_id=" + item.type_id + "&owner_org=" + item.owner_org ,
+    success: function(data){
+      //alert(data);
+      var json = eval(data);
+      $.each(json,function(i,item){
+        if(checked) {
+    map.addOverlay(new GMarker(new GLatLng(item.loc1_lat, item.loc1_lon)));
+        } else {
+    map.clearOverlays();
+        }
+      });
+    }
+  });
+      });
+
+      // 把計數加 1
+      count = count + 1;
     });
 
@@ -82 +111 @@
 {
   if (GBrowserIsCompatible()) {
-    var map = new GMap2(document.getElementById("map"));  // 取得 DOM 中,名稱為 map 的元件
+    map = new GMap2(document.getElementById("map"));  // 取得 DOM 中,名稱為 map 的元件
     map.addControl(new GLargeMapControl());               // 加入左上角比例尺規控制列
     map.addControl(new GScaleControl());                  // 加入左下角比例尺狀態列