Index: /oceandb/jQuery_Prototype/script/oceandb.js =================================================================== --- /oceandb/jQuery_Prototype/script/oceandb.js (revision 112) +++ /oceandb/jQuery_Prototype/script/oceandb.js (revision 113) @@ -2,4 +2,5 @@ var ge; // Google Earth Plugin 物件 var icon; +var tm; // Google Map2 Timeline // 註冊 onReady Event @@ -8,5 +9,6 @@ // 呼叫 Google Map API 載入地圖 - load(); + onLoad(); + GUnload(); var PARENT_ID = []; // 產生一個空的陣列 @@ -102,4 +104,5 @@ // 設定地圖高度 var map_height=document.documentElement.clientHeight - 68; + $('#mapcontainer').css( { height: map_height } ); $('#main').css( { height: map_height } ); @@ -123,32 +126,120 @@ // 當改變瀏覽器大小時，重新設定地圖高度 var map_height=document.documentElement.clientHeight - 68; + $('#mapcontainer').css( { height: map_height } ); $('#main').css( { height: map_height } ); -}); - -function load() -{ - if (GBrowserIsCompatible()) { - // 取得 DOM 中,名稱為 map 的元件 - map = new GMap2(document.getElementById("map")); - // 加入左上角比例尺規控制列 - map.addControl(new GLargeMapControl()); - // 加入左下角比例尺狀態列 - map.addControl(new GScaleControl()); - // 加入右上角"地圖","衛星","混合地圖"按鈕 - map.addControl(new GMapTypeControl()); - // 加入右上角 Google Earth 的"地球"按鈕 - map.addMapType(G_SATELLITE_3D_MAP); - // 設定預設經緯度北緯 23.8, 東經 121, 預設比例尺 100 公里(7) - map.setCenter(new GLatLng(23.8,121), 7); - // 設定預設底圖為"衛星" - map.setMapType(G_SATELLITE_MAP); - // 產生預設 icon 圖示 - icon = new GIcon(); - icon.image = "image/icon.png"; - icon.shadow = "image/icon.png"; - icon.iconSize = new GSize(12, 12); - icon.shadowSize = new GSize(12, 12); - icon.iconAnchor = new GPoint(12, 12); - icon.infoWindowAnchor = new GPoint(12, 12); - } +}); + +function onLoad() { + + tm = TimeMap.init({ + mapId: "map", // Id of map div element (required) + timelineId: "timeline", // Id of timeline div element (required) + datasets: [ + { + id: "artists", + title: "Artists", + theme: TimeMapDataset.orangeTheme({eventIconPath: "./image"}), + // note that the lines below are now the preferred syntax + type: "basic", + options: { + items: [ + { + "start" : "1981", + "end" : "2009-01-11", + "point" : { + "lat" : 23.8123, + "lon" : 121.123 + }, + "title" : "中央氣象局", + "options" : { + // set the full HTML for the info window + "infoHtml": "

中央氣象局.

" + } + }, + { + "start" : "1991", + "end" : "2010", + "point" : { + "lat" : 22.5234, + "lon" : 120.534 + }, + "title" : "海洋科技研究中心", + "options" : { + // load HTML from another file via AJAX + // Note that this may break in IE if you're running it with + // a local file, due to cross-site scripting restrictions + "infoUrl": "http://www.nchc.org.tw", + "theme": TimeMapDataset.redTheme({eventIconPath: "./image"}) + } + }, + { + "start" : "2001", + "end" : "2020", + "point" : { + "lat" : 24.8345, + "lon" : 122.845 + }, + "title" : "經濟部水利署", + "options" : { + // use the default title/description info window + "description": "Renaissance Man", + "theme": TimeMapDataset.yellowTheme({eventIconPath: "image/"}) + } + } + ] + } + } + ], + bandIntervals: [ + Timeline.DateTime.DECADE, + Timeline.DateTime.CENTURY + ] + }); + // manipulate the timemap further here if you like + + if (GBrowserIsCompatible()) { + + // 宣告 TimelineMap 的 MapID 對應到原本的 map + map = tm.map; + // 取得 DOM 中,名稱為 map 的元件 + map = new GMap2(document.getElementById("map")); + // 加入左上角比例尺規控制列 + map.addControl(new GLargeMapControl3D()); + // 鳥瞰圖 + map.addControl(new GOverviewMapControl()); + // Mouse Zoom In/Out + map.enableScrollWheelZoom(); + // 加入左下角比例尺狀態列 + map.addControl(new GScaleControl()); + // 加入右上角"地圖","衛星","混合地圖"按鈕 + map.addControl(new GMapTypeControl()); + // Google Earth + map.addMapType(G_SATELLITE_3D_MAP); + // GZoom Control + map.addControl(new GZoomControl( + { + sButtonHTML:"", + sButtonZoomingHTML:"", + oButtonStartingStyle:{width:'24px',height:'24px'}, + sColor:'#000', + nOpacity:.2, + sBorder:"2px solid red", + nOverlayRemoveMS:'10000', + bForceCheckResize:'true' + } + ),new GControlPosition(G_ANCHOR_BOTTOM_LEFT,new GSize(3,3))); + // 設定預設經緯度北緯 23.8, 東經 121, 預設比例尺 100 公里(7) + map.setCenter(new GLatLng(23.8,121), 7); + // 設定預設底圖為"衛星" + map.setMapType(G_SATELLITE_MAP); + // 產生預設 icon 圖示 + icon = new GIcon(); + icon.image = "image/icon.png"; + icon.shadow = "image/icon.png"; + icon.iconSize = new GSize(12, 12); + icon.shadowSize = new GSize(12, 12); + icon.iconAnchor = new GPoint(12, 12); + icon.infoWindowAnchor = new GPoint(12, 12); + } } +