Google Maps JavaScript API

Google 致力於線上圖資的發佈及應用，在 Google 地圖推出之後不久，即釋 出了有關Google Maps 存取的應用服務 API，目前的 Google Maps JavaScript API 已經來到了第３版，將原本需要API Key 的限制移除，而在使用者操作的反應上 也更快更靈敏。Google Maps API 區分為免費版及專業版，專業版除了提供更高

10

的使用流量、HTTPS 安全性協定以外，最重要的當然是技術服務上的支援。

Google Maps JavaScript API 包含了以下功能：

1. 地點搜尋：這是 Google Maps 服務中最常被使用的部份，藉由 API 的幫 助，程式可以快速的從一個經緯度搜尋出地址，或是藉由地址反查經緯 度；此外，Google 也導入了 Google Place API 服務，可藉由特定的地點 往外延伸，搜尋附近的店家及景點等資訊。

4. 自定義圖層：Google Maps JavaScript API 也允許使用者自行增加圖層，

除了最常使用的定位點圖層，可以快速找到自己的位置外，還可利用 KML 格式的檔案匯入，繪製出自定義的圖層架構，甚至能夠利用 GeoRSS 協定，蒐集網路上定期釋出的地理資訊，如 USGS 國際地震資

11

訊、洪水及颱風資訊等等。

2.3.3 球面三角學

由於地球是一個球體，在測量地球上兩點之間的最短距離，也就是計算球面 上兩個點索相連的一段弧長，在這裡最常會使用到的便是球面三角學中的半正矢 公式（The haversine formula）。

求得弧長的公式定義如下：

 d 為兩點之間的弧長

 r 為球體的半徑

 分別為點1 和點 2 的緯度

 分別為點1 和點 2 的經度。

而當中以夾角帶入計算的半正矢公式如下：

利用此公式，即可計算出兩個經緯度座標之間的弧長。

12

第三節 JavaScript Framework

JavaScript 一路走來，擺脫了過去難以撰寫以及難以維護的缺點，漸漸的被各 大瀏覽器所接受，其執行速度甚至比以往的CGI 或 VBScript 等語言更快更穩定，

在HTML5 當中也直接明定了許多 JavaScript API，試圖以規範的方式統一動態網 頁的撰寫方式，達成共通的跨平台協定。

圖 4 JavaScript Framework 架構圖

但JavaScript 目前也仍存在一些相容性的問題，由於各家瀏覽器所使用的 JavaScript 解析引擎各不相同，導致部分功能在各瀏覽器的呈現結果略有不同，其 支援程度也有所差異，為了閃避這些瀏覽器上的差異，使用者往往必須在程式碼 上下更多的功夫去判斷，不僅讓程式碼膨脹，導致維護成本及難度增加，甚至由 於必須重複驗證，導致效能上的低落。

因此，為了統整瀏覽器上的撰寫環境，部分開發團隊便開始撰寫適用於各大 瀏覽器平台的JavaScript Framework，企圖解決瀏覽器平台的相容性問題，由於

Browser  

JavaScript  Engine,  CSS  parser,  …

JavaScript  

Framework(jQuery,  …) JavaScript  

Plugin

13

Framework 的發佈方式，都是以.js 檔的方式發行，所以開發者在使用這些

Framework 時也非常方便，只要將其檔案掛載於網頁前端，瀏覽器便會自動在解 譯期間先將這些Framework 載入。

目前的JavaScript Framework 依照功能取向，協助一般的網頁開發者解決了 以下的幾個問題：

而現今的JavaScript Framework，大致上都已解決了 DOM 文件在搜尋及管理 上的問題，例如jQuery 採用簡易的 DOM Selector 觀念，以指定名稱讀取標籤，

直接尋找該元素的位置並進行控制，不但精簡了以往程式邏輯上的繁雜，甚至在 瀏覽器的引擎配合之下，大幅壓縮了其處理DOM 文件上的速度。

2. 使用者介面

14

早期的HTML 靜態網頁，在控制網頁元素的呈現上經常使用 CSS 版型，但 在動態網頁的設計則上欠缺靈活以及變化性，許多動態的功能，必須等待動態網 頁技術（如ASP.NET/JSP）背後的 Framework 逐步的開放支援，才能做出較為生 動的介面。

這一切在Google、Opera 及 Apple 全力支持 HTML5 之後有了改變，在新版 CSS 標準逐步成型之時，JavaScript 也隨著瀏覽器的更新，獲得更完善的畫面控制，

以及更多樣化的動態網頁撰寫方式，使得目前的純HTML 網頁技術，能夠設計出 不輸給Flash，甚至在效能上更加超越 Flash 的動態網頁。

3. Ajax 支援

Ajax（Asynchronous JavaScript and XML）的具體概念，由 Jesse James Garrett 於2005 年提出，他定義了 Ajax 的技術組成如下：

 使用 XHTML+CSS 標準來設計

15

 利用 JavaScript 操控標準的 DOM 元件，來達成動態呈現效果

 利用 XML 以及 XSLT 來進行資料交換及轉換

 使用 XMLHttpRequest 物件，與網頁伺服器做非同步資訊交換

 一切的程式運作皆以 JavaScript 做串連

圖 5 Ajax 網頁技術與傳統網頁技術之比較

自從Ajax 問世以來，所謂的非同步處理技術，便成為網頁設計上的顯學，其 不需將整份網頁回傳至伺服器的特性，不但減少了使用者回傳資料至伺服器的次

16

以下介紹的是本研究所使用的JavaScript Framework。