[68] | 1 | var map; // Google Map2 物件 |
---|
[94] | 2 | var ge; // Google Earth Plugin 物件 |
---|
[72] | 3 | var icon; |
---|
[113] | 4 | var tm; // Google Map2 Timeline |
---|
[68] | 5 | |
---|
[60] | 6 | // 註冊 onReady Event |
---|
| 7 | // 參考: http://docs.jquery.com/Events |
---|
[56] | 8 | $(document).ready(function() { |
---|
[60] | 9 | |
---|
[66] | 10 | // 呼叫 Google Map API 載入地圖 |
---|
[113] | 11 | onLoad(); |
---|
| 12 | GUnload(); |
---|
[66] | 13 | |
---|
[65] | 14 | var PARENT_ID = []; // 產生一個空的陣列 |
---|
| 15 | PARENT_ID[1] = "定點"; |
---|
| 16 | PARENT_ID[2] = "船測"; |
---|
[60] | 17 | |
---|
[65] | 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; |
---|
[68] | 26 | var count = 1; |
---|
[65] | 27 | $.each(json, function(i, item){ |
---|
| 28 | // 確認 type_id 是否存在,否則產生一個新的 DOM |
---|
| 29 | if(item.type_id != type_id ) |
---|
| 30 | { |
---|
[74] | 31 | $('#map-menu').append("<h3><a href='#'>" + item.type_name |
---|
[65] | 32 | + " (" + PARENT_ID[item.parent_id] + ")</a>" |
---|
| 33 | + "</h3><div><ul id='map-menu-" + item.type_id |
---|
[74] | 34 | + "'></ul></div>"); |
---|
[65] | 35 | type_id = item.type_id; |
---|
[68] | 36 | // 當產生新的 DOM 時,把計數回歸到 1 產生 map-menu-type_id-count 的 id |
---|
[74] | 37 | count = 1; |
---|
| 38 | /* TODO: 加入全選處理函式 |
---|
[65] | 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 | }); |
---|
[74] | 48 | */ |
---|
[65] | 49 | } |
---|
| 50 | // 根據 type_id 逐一加入 owner_org |
---|
[70] | 51 | $("#map-menu-" + item.type_id).append("<li><input type='checkbox' " |
---|
| 52 | + "id='map-menu-" + item.type_id + "-" + count +"'>" |
---|
[65] | 53 | + item.owner_org + "</input></li>"); |
---|
| 54 | |
---|
[68] | 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) { |
---|
[70] | 68 | var latlon = new GLatLng(item.loc1_lat, item.loc1_lon); |
---|
[72] | 69 | var marker = new GMarker(latlon, icon); |
---|
[70] | 70 | GEvent.addListener(marker, 'click', function() { |
---|
[71] | 71 | map.openInfoWindowHtml(latlon, "描述:" + item.description |
---|
| 72 | + "<br/>連結:<a href='" + item.website |
---|
| 73 | + "' target='_NEW'>" + item.website + "</a>" |
---|
[70] | 74 | + "<iframe width='640' height='300' src='" |
---|
| 75 | + item.website + "'/>"); |
---|
| 76 | }); |
---|
| 77 | map.addOverlay(marker); |
---|
[68] | 78 | } else { |
---|
| 79 | map.clearOverlays(); |
---|
[70] | 80 | map.closeInfoWindow(); |
---|
[68] | 81 | } |
---|
| 82 | }); |
---|
| 83 | } |
---|
| 84 | }); |
---|
| 85 | }); |
---|
| 86 | |
---|
| 87 | // 把計數加 1 |
---|
| 88 | count = count + 1; |
---|
[65] | 89 | }); |
---|
| 90 | |
---|
| 91 | // 設定左側選單的 Accordion 風格 |
---|
| 92 | // 註: 這行的擺放位置很重要,放在迴圈外會造成 CSS 樣式(class)的問題 |
---|
| 93 | // 主因: getJSON 是非同步處理,得把動態產生 DOM 的相關設定擺在 callback 中 |
---|
[74] | 94 | $('#map-menu').accordion({ |
---|
| 95 | header: "h3", |
---|
| 96 | autoHeight: false, |
---|
| 97 | collapsible: true |
---|
| 98 | }); |
---|
[65] | 99 | |
---|
| 100 | // 完成從 JSON 讀入資料,因此把 loading 提示移除。 |
---|
| 101 | $('#loading').remove(); |
---|
| 102 | }); |
---|
| 103 | |
---|
[60] | 104 | // 設定地圖高度 |
---|
| 105 | var map_height=document.documentElement.clientHeight - 68; |
---|
[113] | 106 | $('#mapcontainer').css( { height: map_height } ); |
---|
[60] | 107 | $('#main').css( { height: map_height } ); |
---|
| 108 | |
---|
| 109 | // 設定點選 "MENU" 的行為 |
---|
[56] | 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 | }); |
---|
[60] | 121 | }); |
---|
[57] | 122 | |
---|
[60] | 123 | // 註冊 window 物件的 onResize Event |
---|
| 124 | // 參考: http://docs.jquery.com/Events |
---|
| 125 | $(window).resize(function() { |
---|
| 126 | // 當改變瀏覽器大小時,重新設定地圖高度 |
---|
| 127 | var map_height=document.documentElement.clientHeight - 68; |
---|
[113] | 128 | $('#mapcontainer').css( { height: map_height } ); |
---|
[60] | 129 | $('#main').css( { height: map_height } ); |
---|
[113] | 130 | }); |
---|
| 131 | |
---|
| 132 | function onLoad() { |
---|
[66] | 133 | |
---|
[113] | 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 | // GZoom Control |
---|
| 219 | map.addControl(new GZoomControl( |
---|
| 220 | { |
---|
| 221 | sButtonHTML:"<img src='image/zooming.gif' />", |
---|
| 222 | sButtonZoomingHTML:"<img src='image/zoom.jpg' />", |
---|
| 223 | oButtonStartingStyle:{width:'24px',height:'24px'}, |
---|
| 224 | sColor:'#000', |
---|
| 225 | nOpacity:.2, |
---|
| 226 | sBorder:"2px solid red", |
---|
| 227 | nOverlayRemoveMS:'10000', |
---|
| 228 | bForceCheckResize:'true' |
---|
| 229 | } |
---|
| 230 | ),new GControlPosition(G_ANCHOR_BOTTOM_LEFT,new GSize(3,3))); |
---|
| 231 | // 設定預設經緯度北緯 23.8, 東經 121, 預設比例尺 100 公里(7) |
---|
| 232 | map.setCenter(new GLatLng(23.8,121), 7); |
---|
| 233 | // 設定預設底圖為"衛星" |
---|
| 234 | map.setMapType(G_SATELLITE_MAP); |
---|
| 235 | // 產生預設 icon 圖示 |
---|
| 236 | icon = new GIcon(); |
---|
| 237 | icon.image = "image/icon.png"; |
---|
| 238 | icon.shadow = "image/icon.png"; |
---|
| 239 | icon.iconSize = new GSize(12, 12); |
---|
| 240 | icon.shadowSize = new GSize(12, 12); |
---|
| 241 | icon.iconAnchor = new GPoint(12, 12); |
---|
| 242 | icon.infoWindowAnchor = new GPoint(12, 12); |
---|
| 243 | } |
---|
[66] | 244 | } |
---|
[113] | 245 | |
---|