國
立 政 治 大 學
‧
N a
tio na
l C h engchi U ni ve rs it y
3.2 地理標記照片(Geotagged Photo)的預先處理和應用
本 系 統 取 得 使 用 者 上 傳 的 地 理 標 記 照 片 (Geotagged Photo) 後 ， 會 使 用 PHP 提 供 的 exif_read_data()函式預先處理。我們使用 JSON 檔案搭配 Google Maps Platform 的 Maps JavaScript API 和 Google Chart 來視覺化地理標記照片(Geotagged Photo)的地理位置和照片數 量貢獻度。
3.2.1 處理 GPS 座標
座標系統可用來表示地表現象絕對位置的系統。在小比例尺地圖中，常使用經緯線座標；
在大比例尺地圖中，則常使用圖網方格座標。經緯線是一套適用於全球的定位座標系統，
由地心、南極、北極三個定點，以及地軸和赤道兩條定線所構成的球面座標。地表上某地 的經度，就是該地經線和本初經線在地心所夾的角度，例如：通過臺北的經線，在本初經 線以東，二者在地心的夾角為 121˚30'，所以經度為 121˚30'E。座標單位是平面方格座標一 種，利用 X、Y 軸座標值(十進位)來標示位置，單位是公尺，不同於球面經緯度座標(六十 進位)以度分秒表示[20]。
圖 8. 經緯線與經緯度表示圖
‧
PHP(Hypertext Preprocessor)是一種伺服器端網頁程式語言，可嵌入於 HTML 中來運行。
本研究使用 PHP 提供的 exif_read_data()函式，從 JPG、JPEG 或 TIFF 圖像檔案中讀取 EXIF 表 頭資訊，這樣就可以讀取數位相機所產生的屬性資料(Metadata)。這些屬性資料包含地理標 記照片(Geotagged Photo)的經緯度和拍攝的日期時間等，並且進一步將經緯度的格式轉換後 存於 MySQL 資料庫。由 exif_read_data()函式直接取出地理標記照片(Geotagged Photo)的 GPS 座標會以六十進位[度數、分數、秒數](DMS)來標示，為了搭配 Google Maps JavaScript API 和 Google Charts 的應用，我們必須將 GPS 座標的六十進位[度數、分數、秒數](DMS)轉換成 十進位度數(DD)的經緯度表示格式。緯度座標的整數需介於 -90 和 90 之間，經度座標的 整數需介於 -180 和 180 之間。轉換公式為 X 度 Y 分 Z 秒 = X + Y/60 + Z/3600，轉換過程可 以參考圖 9 範例。
圖 9. 取得 GPS 座標後再經過格式轉換的範例
‧ 國
立 政 治 大 學
‧
N a
tio na
l C h engchi U ni ve rs it y
3.2.2 建立 JSON 檔案
JSON 是 JavaScript 物件表示法(JavaScript Object Notation)的縮寫[27]，它是一種用 JavaScript 撰寫的資料格式，也是一種用於交換資料的格式。JSON 用於描述資料結構，有物件(Object) 和陣列(Array)兩種結構。每一個物件由一對大括號( { } )所構成，一個物件包含一系列非排 序成對的「名稱：值」{Name : Value}組成，每一成對的名稱和值之間使用分號「：」分割，
物件成員之間使用逗號「,」分隔。而每一個陣列是由一對中括號( [ ] )所構成，一個陣列是 一個值或多個值[Value, Value]的集合，陣列成員之間使用逗號「,」分隔。
圖 10. JSON 物件格式
圖 11. JSON 陣列格式
我們使用 PHP 提供的 json_encode()函式，將由資料庫動態取得的資料轉換成 JSON 格 式，並且將結果存至 JSON 檔案。之後再使用 Google Maps JavaScript API 和 Google Charts 搭 配 JSON 檔案來應用。
圖 12. json_encode()函式片段範例
‧
3.2.3 Google Maps Platform
Google 地圖(Google Maps)是 Google 公司向全球提供的電子地圖服務[26]，提供靈活的自訂 地圖體驗，透過靜態和動態地圖，街景服務圖像以及 360 度環景，帶給使用者身歷其境的
6. Maps JavaScript API：
在網站中加入互動式地圖，使用您自己的內容和圖像自訂地圖。
本研究使用第 6 點的 Google Maps JavaScript API 技術來客製化 Maps，提供使用者旅遊 歷程軌跡(旅遊回顧功能)。Google Maps JavaScript API 是專門設計給網頁開發者所使用的開
‧ 國
立 政 治 大 學
‧
N a
tio na
l C h engchi U ni ve rs it y
發工具，可以使用此 API 將 Google 地圖安插在自己的網頁中，並且將自己準備的資料呈現 於地圖上。而且使用 Google Maps JavaScript API 時會需要一個 API 金鑰，開發者必須先從 Google Developers Console 取得 API 的金鑰才能使用 Google Maps JavaScript API 進行開發，
金鑰的取得與使用都是免費的，不過在使用上有配額(Quota)的限制，如圖 13 就是使用 Google Maps JavaScript API 進行開發的範例程式，開發者必須將 API 金鑰填入 YOUR_API_KEY 的位置。
圖 13. 使用 Google Maps JavaScript API 的範例程式
3.2.4 Google Charts
Google Charts 是由 Google 公司提供的互動式圖表工具，可以視覺化使用者所提供的資料。
本研究使用 Google Charts 提供的圓餅圖(Pie Chart)來視覺化使用者提供的照片數量貢獻度。
‧ 國
立 政 治 大 學
‧
N a
tio na
l C h engchi U ni ve rs it y
圖 14. 使用 Google Charts 的範例程式(For Pie Charts)