[60] | 1 | // 註冊 onReady Event |
---|
| 2 | // 參考: http://docs.jquery.com/Events |
---|
[56] | 3 | $(document).ready(function() { |
---|
[60] | 4 | |
---|
[66] | 5 | // 呼叫 Google Map API 載入地圖 |
---|
| 6 | load(); |
---|
| 7 | |
---|
[65] | 8 | var PARENT_ID = []; // 產生一個空的陣列 |
---|
| 9 | PARENT_ID[1] = "定點"; |
---|
| 10 | PARENT_ID[2] = "船測"; |
---|
[60] | 11 | |
---|
[65] | 12 | // 註冊 AJAX 非同步處理函式 |
---|
| 13 | // 從 data/map-menu.json 讀取資料來產生 map-menu 的 Accordion 選單 |
---|
| 14 | $.getJSON("data/map-menu.json", function(data){ |
---|
| 15 | // 讀取進來的 JSON 內容必須用 eval 函數才能變成 javascript 可以識別的陣列 |
---|
| 16 | var json = eval(data); |
---|
| 17 | // 註: 因為 JSON 內容按 type_id 排序, |
---|
| 18 | // 故用 type_id 來判斷第一次出現的 type_id 產生新的 DOM |
---|
| 19 | var type_id = -1; |
---|
| 20 | $.each(json, function(i, item){ |
---|
| 21 | // 確認 type_id 是否存在,否則產生一個新的 DOM |
---|
| 22 | if(item.type_id != type_id ) |
---|
| 23 | { |
---|
| 24 | $('#map-menu').append("<div><h3><a href='#'>" + item.type_name |
---|
| 25 | + " (" + PARENT_ID[item.parent_id] + ")</a>" |
---|
| 26 | + "</h3><div><ul id='map-menu-" + item.type_id |
---|
| 27 | + "'></ul><br/></div></div>"); |
---|
| 28 | type_id = item.type_id; |
---|
| 29 | $("#map-menu-" + item.type_id).append("<li><input type='checkbox'>" |
---|
| 30 | + "<font color='red'><b>=== 以下全選 ===</b></font>" |
---|
| 31 | + "</input></li>"); |
---|
| 32 | var temp = $("#map-menu-" + item.type_id).find("input"); |
---|
| 33 | temp.click(function(){ |
---|
| 34 | // TODO: 加入全選處理函式 |
---|
| 35 | this.checked ? alert("map-menu-" + item.type_id + " is clicked!") : |
---|
| 36 | alert("map-menu-" + item.type_id + " is unclicked!"); |
---|
| 37 | }); |
---|
| 38 | } |
---|
| 39 | // 根據 type_id 逐一加入 owner_org |
---|
| 40 | $("#map-menu-" + item.type_id).append("<li><input type='checkbox'>" |
---|
| 41 | + item.owner_org + "</input></li>"); |
---|
| 42 | |
---|
| 43 | // TODO: 定義 checkbox checked 跟 unchecked 對應的處理函式 |
---|
| 44 | }); |
---|
| 45 | |
---|
| 46 | // 設定左側選單的 Accordion 風格 |
---|
| 47 | // 註: 這行的擺放位置很重要,放在迴圈外會造成 CSS 樣式(class)的問題 |
---|
| 48 | // 主因: getJSON 是非同步處理,得把動態產生 DOM 的相關設定擺在 callback 中 |
---|
| 49 | $('#map-menu').accordion({ header: "h3" }); |
---|
| 50 | |
---|
| 51 | // 完成從 JSON 讀入資料,因此把 loading 提示移除。 |
---|
| 52 | $('#loading').remove(); |
---|
| 53 | }); |
---|
| 54 | |
---|
[60] | 55 | // 設定地圖高度 |
---|
| 56 | var map_height=document.documentElement.clientHeight - 68; |
---|
| 57 | $('#main').css( { height: map_height } ); |
---|
| 58 | |
---|
| 59 | // 設定點選 "MENU" 的行為 |
---|
[56] | 60 | $('#btnMenu').click(function() |
---|
| 61 | { |
---|
| 62 | if($('#map-menu').css("display") != "none") |
---|
| 63 | { |
---|
| 64 | $('#map-menu').css({ display: 'none' }); |
---|
| 65 | $('#map').css({ width: '100%' }); |
---|
| 66 | } else { |
---|
| 67 | $('#map-menu').css({ display: 'block'}); |
---|
| 68 | $('#map').css({ width: '80%'}); |
---|
| 69 | } |
---|
| 70 | }); |
---|
[60] | 71 | }); |
---|
[57] | 72 | |
---|
[60] | 73 | // 註冊 window 物件的 onResize Event |
---|
| 74 | // 參考: http://docs.jquery.com/Events |
---|
| 75 | $(window).resize(function() { |
---|
| 76 | // 當改變瀏覽器大小時,重新設定地圖高度 |
---|
| 77 | var map_height=document.documentElement.clientHeight - 68; |
---|
| 78 | $('#main').css( { height: map_height } ); |
---|
[56] | 79 | }); |
---|
[66] | 80 | |
---|
| 81 | function load() |
---|
| 82 | { |
---|
| 83 | if (GBrowserIsCompatible()) { |
---|
| 84 | var map = new GMap2(document.getElementById("map")); // 取得 DOM 中,名稱為 map 的元件 |
---|
| 85 | map.addControl(new GLargeMapControl()); // 加入左上角比例尺規控制列 |
---|
| 86 | map.addControl(new GScaleControl()); // 加入左下角比例尺狀態列 |
---|
| 87 | map.addControl(new GMapTypeControl()); // 加入右上角"地圖","衛星","混合地圖"按鈕 |
---|
| 88 | map.setCenter(new GLatLng(23.8,121), 7); // 設定預設經緯度北緯 23.8, 東經 121, 預設比例尺 100 公里(7) |
---|
| 89 | map.setMapType(G_SATELLITE_MAP); // 設定預設底圖為"衛星" |
---|
| 90 | } |
---|
| 91 | } |
---|