1 | var map; // Google Map2 物件 |
---|
2 | var ge; // Google Earth Plugin 物件 |
---|
3 | var icon; // Google Map2 icon creator |
---|
4 | var 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 | |
---|
107 | $('#mapcontainer').css( { height: map_height } ); |
---|
108 | $('#main').css( { height: map_height } ); |
---|
109 | |
---|
110 | // 設定點選 "MENU" 的行為 |
---|
111 | $('#btnMenu').click(function() |
---|
112 | { |
---|
113 | if($('#map-menu').css("display") != "none") |
---|
114 | { |
---|
115 | $('#map-menu').css({ display: 'none' }); |
---|
116 | $('#map').css({ width: '100%' }); |
---|
117 | } else { |
---|
118 | $('#map-menu').css({ display: 'block'}); |
---|
119 | $('#map').css({ width: '80%'}); |
---|
120 | } |
---|
121 | }); |
---|
122 | }); |
---|
123 | |
---|
124 | // 註冊 window 物件的 onResize Event |
---|
125 | // 參考: http://docs.jquery.com/Events |
---|
126 | $(window).resize(function() { |
---|
127 | // 當改變瀏覽器大小時,重新設定地圖高度 |
---|
128 | var map_height=document.documentElement.clientHeight - 68; |
---|
129 | $('#mapcontainer').css( { height: map_height } ); |
---|
130 | $('#main').css( { height: map_height } ); |
---|
131 | }); |
---|
132 | |
---|
133 | function onLoad() { |
---|
134 | |
---|
135 | tm = TimeMap.init({ |
---|
136 | mapId: "map", // Id of map div element (required) |
---|
137 | timelineId: "timeline", // Id of timeline div element (required) |
---|
138 | datasets: [ |
---|
139 | { |
---|
140 | title: "海研三號 OR3-1412", |
---|
141 | theme: "red", |
---|
142 | type: "kml", // KML |
---|
143 | options: { |
---|
144 | url: "data/kml/OR3-1412.kml" // Load KML file |
---|
145 | } |
---|
146 | } |
---|
147 | /* |
---|
148 | { |
---|
149 | title: "海研三號 OR3-1412", |
---|
150 | theme: "green", |
---|
151 | type: "progressive", |
---|
152 | options: { |
---|
153 | // Data to be loaded in JSON from a remote URL |
---|
154 | type: "json", // JSON |
---|
155 | // url with start/end placeholders |
---|
156 | // url: "http://s2home.nchc.org.tw/oid/data/test.json", |
---|
157 | // TestCase |
---|
158 | // url: "http://www.nickrabinowitz.com/projects/timemap/progsvc.php?start=[start]&end=[end]&callback=", |
---|
159 | start: "1989-01-01", |
---|
160 | // lower cutoff date for data |
---|
161 | dataMinDate: "2009-12-31", |
---|
162 | // four months in milliseconds |
---|
163 | interval: 10368000000, |
---|
164 | // function to turn date into string appropriate for service |
---|
165 | formatDate: function(d) { |
---|
166 | return TimeMap.util.formatDate(d, 1); |
---|
167 | } |
---|
168 | } |
---|
169 | } |
---|
170 | */ |
---|
171 | ], |
---|
172 | bandInfo: [ //上軸時間間隔與大小設定 |
---|
173 | { |
---|
174 | width: "70%", |
---|
175 | intervalUnit: Timeline.DateTime.MONTH, |
---|
176 | intervalPixels: 210 |
---|
177 | }, |
---|
178 | { //下軸時間間隔與大小設定 |
---|
179 | width: "30%", intervalUnit: Timeline.DateTime.YEAR, |
---|
180 | intervalPixels: 150, |
---|
181 | showEventText: false, |
---|
182 | trackHeight: 0.2, |
---|
183 | trackGap: 0.2 |
---|
184 | } |
---|
185 | ], |
---|
186 | /* |
---|
187 | bandIntervals: [ |
---|
188 | Timeline.DateTime.DECADE, |
---|
189 | Timeline.DateTime.CENTURY |
---|
190 | |
---|
191 | ] */ |
---|
192 | }); |
---|
193 | |
---|
194 | if (GBrowserIsCompatible()) { |
---|
195 | |
---|
196 | // 宣告 TimelineMap 的 MapID 對應到原本的 map |
---|
197 | map = tm.map; |
---|
198 | // 取得 DOM 中,名稱為 map 的元件 |
---|
199 | map = new GMap2(document.getElementById("map")); |
---|
200 | // 加入左上角比例尺規控制列 |
---|
201 | map.addControl(new GLargeMapControl3D()); |
---|
202 | // 鳥瞰圖 |
---|
203 | map.addControl(new GOverviewMapControl()); |
---|
204 | // Mouse Zoom In/Out |
---|
205 | map.enableScrollWheelZoom(); |
---|
206 | // 加入左下角比例尺狀態列 |
---|
207 | map.addControl(new GScaleControl()); |
---|
208 | // 加入右上角"地圖","衛星","混合地圖"按鈕 |
---|
209 | map.addControl(new GMapTypeControl()); |
---|
210 | // Google Earth |
---|
211 | map.addMapType(G_SATELLITE_3D_MAP); |
---|
212 | // DragZoom Properties |
---|
213 | var otherOpts = { |
---|
214 | buttonStartingStyle: {background: '#FFF', paddingTop: '4px', paddingLeft: '4px', border:'1px solid black'}, |
---|
215 | buttonHTML: "<img title='Drag Zoom In' src='image/zoomin.gif'>", |
---|
216 | buttonStyle: {width:'25px', height:'25px'}, |
---|
217 | buttonZoomingHTML: '請選取範圍', |
---|
218 | buttonZoomingStyle: {background:'yellow',width:'85px', height:'100%'}, |
---|
219 | backButtonHTML: "<img title='Zoom Back Out' src='image/zoomout.gif'>", |
---|
220 | backButtonStyle: {display:'none',marginTop:'5px',width:'25px', height:'25px'}, |
---|
221 | backButtonEnabled: true, |
---|
222 | overlayRemoveTime: 1500 |
---|
223 | } |
---|
224 | // DragZoom Control |
---|
225 | map.addControl(new DragZoomControl({}, otherOpts, {}),new GControlPosition(G_ANCHOR_BOTTOM_LEFT,new GSize(20,60))); |
---|
226 | // 設定預設經緯度北緯 23.8, 東經 121, 預設比例尺 100 公里(7) |
---|
227 | map.setCenter(new GLatLng(23.8,121), 7); |
---|
228 | // 設定預設底圖為"衛星" |
---|
229 | map.setMapType(G_SATELLITE_MAP); |
---|
230 | // 產生預設 icon 圖示 |
---|
231 | icon = new GIcon(); |
---|
232 | icon.image = "image/icon.png"; |
---|
233 | icon.shadow = "image/icon.png"; |
---|
234 | icon.iconSize = new GSize(12, 12); |
---|
235 | icon.shadowSize = new GSize(12, 12); |
---|
236 | icon.iconAnchor = new GPoint(12, 12); |
---|
237 | icon.infoWindowAnchor = new GPoint(12, 12); |
---|
238 | } |
---|
239 | } |
---|
240 | |
---|