var map; // Google Map2 物件
var ge; // Google Earth Plugin 物件
var icon; // Google Map2 icon creator
var tm; // Google Map2 Timeline
// 註冊 onReady Event
// 參考: http://docs.jquery.com/Events
$(document).ready(function() {
// 呼叫 Google Map API 載入地圖
onLoad();
GUnload();
var PARENT_ID = []; // 產生一個空的陣列
PARENT_ID[1] = "定點";
PARENT_ID[2] = "船測";
// 註冊 AJAX 非同步處理函式
// 從 data/map-menu.json 讀取資料來產生 map-menu 的 Accordion 選單
$.getJSON("data/map-menu.json", function(data){
// 讀取進來的 JSON 內容必須用 eval 函數才能變成 javascript 可以識別的陣列
var json = eval(data);
// 註: 因為 JSON 內容按 type_id 排序,
// 故用 type_id 來判斷第一次出現的 type_id 產生新的 DOM
var type_id = -1;
var count = 1;
$.each(json, function(i, item){
// 確認 type_id 是否存在,否則產生一個新的 DOM
if(item.type_id != type_id )
{
$('#map-menu').append("
");
type_id = item.type_id;
// 當產生新的 DOM 時,把計數回歸到 1 產生 map-menu-type_id-count 的 id
count = 1;
/* TODO: 加入全選處理函式
$("#map-menu-" + item.type_id).append(""
+ "=== 以下全選 ==="
+ "");
var temp = $("#map-menu-" + item.type_id).find("input");
temp.click(function(){
// TODO: 加入全選處理函式
this.checked ? alert("map-menu-" + item.type_id + " is clicked!") :
alert("map-menu-" + item.type_id + " is unclicked!");
});
*/
}
// 根據 type_id 逐一加入 owner_org
$("#map-menu-" + item.type_id).append(""
+ item.owner_org + "");
// 定義 checkbox checked 跟 unchecked 對應的處理函式
$("#map-menu-" + item.type_id + "-" + count).click(function(){
var checked;
if(this.checked){ checked=true; } else { checked=false; }
$.ajax({
type: "GET",
url: "data/get_data.php",
data: "type_id=" + item.type_id + "&owner_org=" + item.owner_org ,
success: function(data){
//alert(data);
var json = eval(data);
$.each(json,function(i,item){
if(checked) {
var latlon = new GLatLng(item.loc1_lat, item.loc1_lon);
var marker = new GMarker(latlon, icon);
GEvent.addListener(marker, 'click', function() {
map.openInfoWindowHtml(latlon, "描述:" + item.description
+ "
連結:" + item.website + ""
+ "");
});
map.addOverlay(marker);
} else {
map.clearOverlays();
map.closeInfoWindow();
}
});
}
});
});
// 把計數加 1
count = count + 1;
});
// 設定左側選單的 Accordion 風格
// 註: 這行的擺放位置很重要,放在迴圈外會造成 CSS 樣式(class)的問題
// 主因: getJSON 是非同步處理,得把動態產生 DOM 的相關設定擺在 callback 中
$('#map-menu').accordion({
header: "h3",
autoHeight: false,
collapsible: true
});
// 完成從 JSON 讀入資料,因此把 loading 提示移除。
$('#loading').remove();
});
// 設定地圖高度
var map_height=document.documentElement.clientHeight - 68;
$('#mapcontainer').css( { height: map_height } );
$('#main').css( { height: map_height } );
// 設定點選 "MENU" 的行為
$('#btnMenu').click(function()
{
if($('#map-menu').css("display") != "none")
{
$('#map-menu').css({ display: 'none' });
$('#map').css({ width: '100%' });
} else {
$('#map-menu').css({ display: 'block'});
$('#map').css({ width: '80%'});
}
});
});
// 註冊 window 物件的 onResize Event
// 參考: http://docs.jquery.com/Events
$(window).resize(function() {
// 當改變瀏覽器大小時,重新設定地圖高度
var map_height=document.documentElement.clientHeight - 68;
$('#mapcontainer').css( { height: map_height } );
$('#main').css( { height: map_height } );
});
function onLoad() {
tm = TimeMap.init({
mapId: "map", // Id of map div element (required)
timelineId: "timeline", // Id of timeline div element (required)
datasets: [
{
title: "海研三號 OR3-1412",
theme: "red",
type: "kml", // KML
options: {
url: "data/kml/OR3-1412.kml" // Load KML file
}
}
/*
{
title: "海研三號 OR3-1412",
theme: "green",
type: "progressive",
options: {
// Data to be loaded in JSON from a remote URL
type: "json", // JSON
// url with start/end placeholders
// url: "http://s2home.nchc.org.tw/oid/data/test.json",
// TestCase
// url: "http://www.nickrabinowitz.com/projects/timemap/progsvc.php?start=[start]&end=[end]&callback=",
start: "1989-01-01",
// lower cutoff date for data
dataMinDate: "2009-12-31",
// four months in milliseconds
interval: 10368000000,
// function to turn date into string appropriate for service
formatDate: function(d) {
return TimeMap.util.formatDate(d, 1);
}
}
}
*/
],
bandInfo: [ //上軸時間間隔與大小設定
{
width: "70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 210
},
{ //下軸時間間隔與大小設定
width: "30%", intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 150,
showEventText: false,
trackHeight: 0.2,
trackGap: 0.2
}
],
/*
bandIntervals: [
Timeline.DateTime.DECADE,
Timeline.DateTime.CENTURY
] */
});
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);
// DragZoom Properties
var otherOpts = {
buttonStartingStyle: {background: '#FFF', paddingTop: '4px', paddingLeft: '4px', border:'1px solid black'},
buttonHTML: "",
buttonStyle: {width:'25px', height:'25px'},
buttonZoomingHTML: '請選取範圍',
buttonZoomingStyle: {background:'yellow',width:'85px', height:'100%'},
backButtonHTML: "",
backButtonStyle: {display:'none',marginTop:'5px',width:'25px', height:'25px'},
backButtonEnabled: true,
overlayRemoveTime: 1500
}
// DragZoom Control
map.addControl(new DragZoomControl({}, otherOpts, {}),new GControlPosition(G_ANCHOR_BOTTOM_LEFT,new GSize(20,60)));
// 設定預設經緯度北緯 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);
}
}