Ａｊａｘ在Ｇｏｏｇｌｅ Ｍａｐｓ中的應用

摘要：隨著Google Maps應用的日趨普及，地圖界面刷新速度較慢的問題急需解決。給出Ajax技術在Google Maps二次開發中的應用模型和實現方法，實例顯示Ajax技術是解決地圖界面刷新較慢問題的有效方法。

關鍵詞：Ajax；Google Maps；XMLHttpRequest

中圖分類號：TP391文獻標識碼：A文章編號：1009-3044(2008)31-0974-02

The Application and Research on Google Maps Based on Ajax

HE Cheng-wan， WAN Ming

(College of Computer Science and Engineering，Wuhan Institute of Technology，Wuhan 430205，China)

Abstract: With the increasingly popularization of the Google Maps application，refreshing the map interface is so slowly that is urgently to be solved.The paper presents the application models and realization methods of the Ajax technology in the re-development of Google Maps，moreover，instances have demonstrated that Ajax technology is effective to resolve the problem mentioned above.

Key words: Ajax; Google maps; XMLHttpRequest

1 引言

隨著Internet技術的不斷發展和GIS的不斷完善和普及，利用Internet在Web上發布和出版空間數據，為用戶提供空間數據瀏覽、查詢和分析等相關業務已經成為WebGIS發展的必然趨勢。Ajax的出現解決了瀏覽器與Web服務器異步通信問題，提高了Web應用程序執行效率，以及和用戶之間的交互程度。將Ajax應用于Google Maps二次開發中，利用Ajax獨特的異步請求機制，使基于Ajax技術的WebGIS不再像傳統的WebGIS一樣一次請求同步響應，而是有針對性的異步響應，提高界面刷新速度。

2 Ajax技術和Google Maps

Ajax是Asynchronous JavaScript + XML的簡稱，也就是異步的JavaScript和XML處理技術[1]。Ajax是一個客戶端技術，通過調用HttpRequst實現與服務器的異步通訊，并最終在網頁中實現豐富友好的用戶界面。因此， Ajax并不是一種技術，而是已經成功地用于現代瀏覽器中的若干成功技術的可能性組合。這些技術包括：XHTML，CSS，DOM，XML和XSLT，XMLHttpRequest以及JavaScript等，Ajax技術是目前在瀏覽器中通過JavaScript腳本可以使用的所有技術的集合。

傳統的基于Web的應用程序，每次服務器請求發出后，該頁面將整個刷新以顯示新內容；基于Ajax異步方法的因特網服務，客戶端Web頁面可以發送多個服務器請求，請求發出后，服務器根據客戶端發出的請求作出回應，只返回對客戶請求所需的數據信息，從而實現頁面的局部刷新而不是全部刷新[2]。圖1和圖2分別闡釋了傳統的和基于Ajax的請求/響應模式的區別：

■

圖1 基于Web的應用應程序采用傳統的服務器請求/響應模式 圖2 使用Ajax異步方法的因特網請求/響應模式

Google公司于2005年推出了自己的Google Maps API，開發者可以利用它自行開發自己的Google Maps服務，而Google也可以通過API來對這些服務進行管理[3]。開發者可以利用Google Maps API向公眾提供簡單而有效的地圖服務，可以嵌入大量的在線地圖和網絡服務，并且可以和數據庫結合起來，創建自己的應用程序。

3 基于Ajax技術的Google Maps應用模型

基于Ajax技術的Google Maps應用模型大致分為五個層次：客戶端瀏覽器，Ajax引擎，Goolge Maps服務器，Web服務器，數據庫。系統網絡體系結構如圖3所示。

1) 客戶端瀏覽器，它的任務是訪問Web服務器中的相關頁面，并請求地圖數據，顯示地圖信息。

2) Ajax引擎，處于用戶與服務器之間。它的主要任務是實現頁面無刷新的傳遞，消除網絡交互過程中用戶在得到響應之前只能等待的缺點。

3) Google Maps服務器，在頁面加載之后顯示從Google Maps服務器獲得的地圖數據。

4) Web服務器，接收到來自瀏覽器端的請求后，對請求進行處理、分析、計算等。如果需要數據庫中的數據，則對數據庫中的信息數據進行一系列操作處理，并把處理后的數據返回給客戶端瀏覽器。

5) 數據庫，用以存儲服務相關的數據信息。

4 應用實例

本節通過一個地理位置坐標顯示的實例介紹Ajax技術在Google地圖中的應用。

4.1 實例功能介紹

當用戶點擊頁面上的“Get Locations”按鈕時，地圖上將會顯示出兩個地理位置的標注，這兩個位置的數據是預先設置好的。在這里，我們將數據信息以JSON格式保存在locations.html文件當中。當用鼠標分別點擊這兩個標注時，會彈出相應的信息窗口來顯示地理位置的相關信息。運行結果如圖4所示。

當點擊觸發按鈕以后，地圖上出現了兩個標注圖案，頁面并沒有完全刷新，地址欄的地址也沒有發生改變。然后再點擊標注，標注上方將會彈出一個信息窗口來顯示這個標注位置的坐標信息。而在此過程中也沒有發生全頁面刷新。這就是Ajax所帶來的頁面局部刷新的效果。當客戶端向服務器端發送請求后，服務端返回給客戶端的信息只是客戶所需要的數據。在客戶等待響應的過程中，客戶可以繼續在頁面上做其他操作，而不需要等待服務器端的響應。

4.2 功能實現

下面介紹此實例的具體設計與實現方法。

4.2.1 導入Google Maps API庫文件和創建地圖容器

首先，必須在網頁中導入Google Maps API[4]庫文件。在HTML文件的Head部分加入如下格式的代碼：

然后在HTML的Body部分加入一個具有id屬性的元素作為Google地圖的容器（通

常會使用DIV元素）。另外，通過此元素還可以定義地圖大小和其他一些屬性：

4.2.2 頁面加載事件onload和關閉事件onunload事件

頁面加載事件onload在網頁加載時觸發，通常用于加載Google地圖。onunload事件會在關閉網頁時觸發。在含有Google地圖的網頁中通常會令onunload=\"Gunload()\"，這會減少瀏覽器因內存泄露導致的崩潰。

4.2.3 功能函數代碼實現

在HTML的Head部分通過加入如下代碼導入functions.js文件。此文件包含了Google Maps及Ajax功能的全部內容：load()—地圖加載函數；getXmlHttpRequestObject()—用以創建一個XMLHttpRequest對象；getLocations()—判斷狀態、發送請求；getLocationsCallback()—處理返回數據。

load函數在網頁加載時用于初始化Google地圖。通過它創建Gmap2對象，添加Gcontrol控件，設置地圖中心位置。

function load() {

if (GBrowserIsCompatible()) {

map = new GMap2(document.getElementById(\"map\"));

map.addControl(new GMapTypeControl());

map.addControl(new GLargeMapControl());

map.addControl(new GScaleControl());

map.setCenter(new GLatLng(30.50607，114.39899)，14);

}}

在HTML代碼中，通過Get Locations按鈕觸發getLocations函數，這里的req是已經定義好的XMLHRequest對象。該函數使用GET方法向locations.html發送請求以獲取數據，并定義了自己的onreadystatechange函數用以處理返回的數據。

function getLocations() {

if (req.readyState == 4 || req.readyState == 0)

{

req.open(\"GET\"， 'locations.html'， true);

req.onreadystatechange = getLocationsCallback;

req.send(1);

}}

5 結束語

Google Maps API為地圖服務的快速開發提供了可能。提出了基于Ajax技術解決地圖界面刷新速度較慢的問題的方法，通過一個地理位置信息顯示的實例給出Ajax技術在Google Maps二次開發中的應用和實現方法。

參考文獻：

[1] Asleson R，Schutta N T.Ajax基礎教程[M].金靈，譯.北京:人民郵電出版社，2006.

[2] Babin L.Ajax與PHP基礎教程[M].徐鋒，陳紹繼，譯.北京:人民郵電出版社，2007.

[3] 孫曉茹，趙軍.Google Maps API在WEBGIS中的應用[J].微計算機信息，2006，22(7-1).

[4] http://code.google.com/apis/maps/documentation/reference.html[EB/OL].