source: oceandb/jQuery_Prototype/script/oceandb.js @ 121

Last change on this file since 121 was 114, checked in by rider, 15 years ago

ZoomIn/Out? changed

File size: 7.9 KB
Line 
1var map;  // Google Map2 物件
2var ge;   // Google Earth Plugin 物件
3var icon;
4var tm;   // Google Map2 Timeline
5
6// 註冊 onReady Event
7// 參考: http://docs.jquery.com/Events
8$(document).ready(function() {
9
10  // 呼叫 Google Map API 載入地圖
11  onLoad();
12  GUnload();
13
14  var PARENT_ID = [];   // 產生一個空的陣列
15  PARENT_ID[1] = "定點";
16  PARENT_ID[2] = "船測";
17
18  // 註冊 AJAX 非同步處理函式
19  // 從 data/map-menu.json 讀取資料來產生 map-menu 的 Accordion 選單
20  $.getJSON("data/map-menu.json", function(data){
21    // 讀取進來的 JSON 內容必須用 eval 函數才能變成 javascript 可以識別的陣列
22    var json = eval(data);
23    // 註: 因為 JSON 內容按 type_id 排序,
24    //     故用 type_id 來判斷第一次出現的 type_id 產生新的 DOM
25    var type_id = -1;
26    var count = 1;
27    $.each(json, function(i, item){
28      // 確認 type_id 是否存在,否則產生一個新的 DOM
29      if(item.type_id != type_id )
30      {     
31  $('#map-menu').append("<h3><a href='#'>" + item.type_name 
32            + " (" + PARENT_ID[item.parent_id] + ")</a>"
33            + "</h3><div><ul id='map-menu-" + item.type_id 
34            + "'></ul></div>");
35  type_id = item.type_id;
36  // 當產生新的 DOM 時,把計數回歸到 1 產生 map-menu-type_id-count 的 id
37  count = 1;   
38  /* TODO: 加入全選處理函式
39  $("#map-menu-" + item.type_id).append("<li><input type='checkbox'>"
40           + "<font color='red'><b>=== 以下全選 ===</b></font>"
41           + "</input></li>");
42  var temp = $("#map-menu-" + item.type_id).find("input");
43  temp.click(function(){
44    // TODO: 加入全選處理函式
45    this.checked ? alert("map-menu-" + item.type_id + " is clicked!") :
46       alert("map-menu-" + item.type_id + " is unclicked!");
47  });
48  */
49      }
50      // 根據 type_id 逐一加入 owner_org
51      $("#map-menu-" + item.type_id).append("<li><input type='checkbox' "
52         + "id='map-menu-" + item.type_id + "-" + count +"'>"
53         + item.owner_org + "</input></li>");
54
55      // 定義 checkbox checked 跟 unchecked 對應的處理函式
56      $("#map-menu-" + item.type_id + "-" + count).click(function(){
57  var checked;
58  if(this.checked){ checked=true; } else { checked=false; }
59  $.ajax({
60    type: "GET",
61    url:  "data/get_data.php",
62    data: "type_id=" + item.type_id + "&owner_org=" + item.owner_org ,
63    success: function(data){
64      //alert(data);
65      var json = eval(data);
66      $.each(json,function(i,item){
67        if(checked) {
68    var latlon = new GLatLng(item.loc1_lat, item.loc1_lon);
69    var marker = new GMarker(latlon, icon);
70    GEvent.addListener(marker, 'click', function() {
71      map.openInfoWindowHtml(latlon, "描述:" + item.description
72      + "<br/>連結:<a href='" + item.website 
73      + "' target='_NEW'>" + item.website + "</a>"
74      + "<iframe width='640' height='300' src='" 
75      + item.website + "'/>");
76    });
77    map.addOverlay(marker);
78        } else {
79    map.clearOverlays();
80    map.closeInfoWindow();
81        }
82      });
83    }
84  });
85      });
86
87      // 把計數加 1
88      count = count + 1;
89    });
90
91    // 設定左側選單的 Accordion 風格
92    // 註: 這行的擺放位置很重要,放在迴圈外會造成 CSS 樣式(class)的問題
93    // 主因: getJSON 是非同步處理,得把動態產生 DOM 的相關設定擺在 callback 中
94    $('#map-menu').accordion({
95      header: "h3",
96      autoHeight: false,
97      collapsible: true
98    });
99
100    // 完成從 JSON 讀入資料,因此把 loading 提示移除。
101    $('#loading').remove();
102  });
103
104  // 設定地圖高度
105  var map_height=document.documentElement.clientHeight - 68;
106  $('#mapcontainer').css( { height: map_height } );
107  $('#main').css( { height: map_height } );
108
109  // 設定點選 "MENU" 的行為
110  $('#btnMenu').click(function()
111  {
112    if($('#map-menu').css("display") != "none")
113    {
114      $('#map-menu').css({ display: 'none' });
115      $('#map').css({ width: '100%' });
116    } else {
117      $('#map-menu').css({ display: 'block'});
118      $('#map').css({ width: '80%'});
119    }
120  });
121});
122
123// 註冊 window 物件的 onResize Event
124// 參考: http://docs.jquery.com/Events
125$(window).resize(function() {
126  // 當改變瀏覽器大小時,重新設定地圖高度
127  var map_height=document.documentElement.clientHeight - 68;
128  $('#mapcontainer').css( { height: map_height } );
129  $('#main').css( { height: map_height } );
130});         
131             
132function onLoad() {
133
134        tm = TimeMap.init({
135  mapId: "map",               // Id of map div element (required)
136  timelineId: "timeline",     // Id of timeline div element (required)
137  datasets: [
138      {
139                id: "artists",
140    title: "Artists",
141    theme: TimeMapDataset.orangeTheme({eventIconPath: "./image"}),
142    // note that the lines below are now the preferred syntax
143    type: "basic",
144    options: {
145        items: [
146      {
147        "start" : "1981",
148                          "end" : "2009-01-11",
149        "point" : {
150            "lat" : 23.8123,
151                  "lon" : 121.123
152         },
153        "title" : "中央氣象局",
154        "options" : {
155          // set the full HTML for the info window
156          "infoHtml": "<div class='custominfostyle'><b>中央氣象局.</div>"
157        }
158      },
159      {
160        "start" : "1991",
161        "end" : "2010",
162        "point" : {
163            "lat" : 22.5234,
164            "lon" : 120.534
165         },
166       "title" : "海洋科技研究中心",
167       "options" : { 
168         // load HTML from another file via AJAX
169         // Note that this may break in IE if you're running it with
170         // a local file, due to cross-site scripting restrictions
171         "infoUrl": "http://www.nchc.org.tw",
172         "theme": TimeMapDataset.redTheme({eventIconPath: "./image"})
173        }
174            }, 
175                        {
176       "start" : "2001",
177       "end" : "2020",
178       "point" : {
179           "lat" : 24.8345,
180           "lon" : 122.845
181        },
182       "title" : "經濟部水利署",
183       "options" : {
184         // use the default title/description info window
185         "description": "Renaissance Man",
186         "theme": TimeMapDataset.yellowTheme({eventIconPath: "image/"})
187        }
188      }
189                      ]
190        }
191    }   
192      ],
193      bandIntervals: [     
194    Timeline.DateTime.DECADE, 
195    Timeline.DateTime.CENTURY
196      ] 
197  });
198        // manipulate the timemap further here if you like
199 
200      if (GBrowserIsCompatible()) {
201
202  // 宣告 TimelineMap 的 MapID 對應到原本的 map
203  map = tm.map; 
204  // 取得 DOM 中,名稱為 map 的元件
205  map = new GMap2(document.getElementById("map"));
206  // 加入左上角比例尺規控制列
207  map.addControl(new GLargeMapControl3D());
208  // 鳥瞰圖
209  map.addControl(new GOverviewMapControl());
210  // Mouse Zoom In/Out
211  map.enableScrollWheelZoom();
212  // 加入左下角比例尺狀態列
213  map.addControl(new GScaleControl());
214  // 加入右上角"地圖","衛星","混合地圖"按鈕
215  map.addControl(new GMapTypeControl());
216  // Google Earth
217  map.addMapType(G_SATELLITE_3D_MAP);
218  // DragZoom Properties
219  var otherOpts = { 
220    buttonStartingStyle: {background: '#FFF', paddingTop: '4px', paddingLeft: '4px', border:'1px solid black'},
221    buttonHTML: "<img title='Drag Zoom In' src='image/zoomin.gif'>",
222    buttonStyle: {width:'25px', height:'25px'},
223    buttonZoomingHTML: '請選取範圍',
224    buttonZoomingStyle: {background:'yellow',width:'85px', height:'100%'},
225    backButtonHTML: "<img title='Zoom Back Out' src='image/zoomout.gif'>",
226    backButtonStyle: {display:'none',marginTop:'5px',width:'25px', height:'25px'},
227    backButtonEnabled: true, 
228          overlayRemoveTime: 1500
229  }
230  // DragZoom Control
231  map.addControl(new DragZoomControl({}, otherOpts, {}),new GControlPosition(G_ANCHOR_BOTTOM_LEFT,new GSize(20,60)));
232  // 設定預設經緯度北緯 23.8, 東經 121, 預設比例尺 100 公里(7)
233  map.setCenter(new GLatLng(23.8,121), 7);
234  // 設定預設底圖為"衛星"
235  map.setMapType(G_SATELLITE_MAP);
236  // 產生預設 icon 圖示
237  icon = new GIcon();   
238  icon.image  = "image/icon.png";
239  icon.shadow = "image/icon.png";
240  icon.iconSize = new GSize(12, 12);
241  icon.shadowSize = new GSize(12, 12);
242  icon.iconAnchor = new GPoint(12, 12);
243  icon.infoWindowAnchor = new GPoint(12, 12);
244      }
245}
246
Note: See TracBrowser for help on using the repository browser.