以程式進行圖台座標繪製流程

當進行繪製座標時，為了避免資訊過多導致畫面延遲，會先擷取目前畫面上 的地圖範圍，在這裡是以google.maps.Map.getBounds()來取得一個方框範圍的物 件，此物件可以藉由getNorthEast()及 getSouthWest()來取得邊界點的經緯度。

再透過Bounds 物件的 contains()方法，來檢查座標點是否在這個方框範圍內，

判斷是否需要繪製在畫面上，而當畫面離開範圍時，藉由座標的setMap(null)方法，

可以將其從地圖上移除。

在這裡利用了一個小技巧，稍微延伸方框的範圍至原本的1.2 倍，可使使用 者在操作上，並不會覺得座標是在操作過程中才放置上去，增進了使用者的使用 體驗。

36

實作多人同時定位的方式，與新增資料地標圖層相同，也是透過實作一個座 標陣列，藉由操作陣列裡的座標物件，將點位放置在地圖上，唯在座標圖示上，

為了與資料圖層作區隔，而使用不同的圖示以示區隔。

第四節 Web Storage 應用

3.4.1 使用者資訊暫存

Web Storage 中定義了 sessionStorage 以及 localStorage 兩個層級，其中的 sessionStorage 的使用情境，如同以往的 session 性質，儲存的變數在瀏覽器／分 頁籤關閉後即會消失，而localStorage 在將資料存入後，會一直存放在對應網域 的localStorage 當中，直到應用服務將之清除，或是使用者透過瀏覽器進行快取 的清除，存放的資料才會消失。

在本研究中，使用sessionStorage 的時機，在於存放使用者每次定位後的經緯 度資訊，而localStorage 則用來存放跟隨使用者裝置的一些變數，使用者個人的 暱稱以及其裝置唯一碼等等。

37

圖 10 Web Storage 架構圖

W3C 關於 sessionStorage 的 Schema 標準定義，定義出三個基本的操作函式 必須進行實作，在此條列如下：

 DOMString window.sessionStorage.getItem(DOMString key) 取得指定session 名稱的變數。

 void window.sessionStorage.setItem(DOMString key, DOMString value) 以指定名稱設定或新增一個變數。

 void window.sessionStorage.removeItem(DOMString key) 移除一個指定名稱的變數。

使用sessionStorage 必須注意到一點，由於目前的 sessionStorage 並沒有到期 時間（expired time）的設定，所以其生命週期必定會在瀏覽器或分頁關閉時即結

Web   Storage

sessionStorage localStorage

38

束，而其存活的區域也限定在單一頁面或分頁，所以在跨頁面存取時，若是涉及 到開啟新分頁的行為，則sessionStorage 並沒有辦法幫你做到傳遞變數的動作，必 須利用localStorage 來進行傳值，再自行手動清除。

而對於localStorage 的 scehma 同樣也定義了三個實作函式：

 DOMString window. localStorage.getItem(DOMString key) 取得指定localStorage 名稱的變數。

 void window. localStorage.setItem(DOMString key, DOMString value) 以指定的名稱設定或新增一個變數。

 void window. localStorage.removeItem(DOMString key) 移除一個指定名稱的變數。

localStorage 存放在瀏覽器的快取資料，與以往 cookie 不同的是，他並沒有創 造實體檔案位置，而是統一交由瀏覽器作快取管理，因此在效率上比起cookie 要 來的好，而使用者可以從瀏覽器工具中，觀察該網域目前Web Storage 的使用狀 態，也可利用瀏覽器支援的管理工具，作管理及刪除動作。目前IE9 及 Chrome 都有內建支援的管理工具。

39

圖 11 以瀏覽器檢視 Web Storage 狀況

目前W3C 針對 Web Storage 的協定，只允許存放 DOMString 屬性參數，並 不允許存放如物件等變數型態。

第五節 Open Data 服務介接

台北市政府在2011 年，提供了公開資料平台的服務，針對台北市政府公共 區域服務的資訊，實作出一套可供使用者利用程式存取的平台，不僅提供了JSON

／XML／KML 等介接格式，部分也提供了 CSV 或 XLS 的格式，讓一般民眾也 能下載觀看。

本研究使用的是JSON 的資料來源格式，JSON 帶來的好處已在第二章詳細 描述，而本公開資料平台，在取得資料時，必須在呼叫的網址後方，加

上”?format=json”，代表所要求的資料回傳格式為 JSON。

40

台北市公開資料平台背後是使用Windows Azure 雲端服務架設，故此資料平 台在實作上，採用了一個JSON 的擴充協定，稱為 JSONP（JSON with Padding），

此種作法有以下幾點特色：

 可以透過傳遞參數的方式，告知伺服器在回傳資料時，可以主動執行自 定義的回呼（callback）函式，這種作法可以省去自行定義非同步函式的 處理流程。

 在要求資料時，可以規避跨網站的存取限制，當網頁透過 JavaScript 進 行Ajax 跨站要求時，會因跨網站存取權限的問題遭到阻擋，而 JSONP 協定可以躲避跨網站的問題，直接回傳資訊。

但由於JSONP 可以跨網站要求資訊的特性，這也相繼造成了一些安全上的疑 慮，而因本系統為公開資料平台，一切資料都沒有保密性的問題，故此服務仍使 用此非官方的擴充協定，讓程式在擷取資訊時能夠透過Ajax 進行存取，並搭配主 動回呼函式，加速資料的處理速度。

公開資料平台上計有72 個服務，在資料介接的部份，特別挑出其中的 8 個 服務，由於挑選出來的資料中皆帶有經緯度，故可直接使用經緯度資訊，作為地 理資訊對應的來源，並將資訊放置在地圖上：

41

42

 地：使用者所在的位置

利用使用者角色的功能，可以區分出適合於使用者的資訊，當中包含了“人”

以及“事”的意義。目前的使用者角色有以下定義：

 居民：居住在台北市的民眾，可提供關於居家資訊等等。

 觀光客：從外地進入台北市，提供關於景點以及便民的資訊，諸如無線網路 分布以及公廁位置等

 運動員：利用台北市的運動公共資源，例如公園及自行車道等資訊。