【正文】 javascript/script 程序設(shè)計(jì) 在Google Maps API中，Google 地圖的加載是通過對GMap2()對象初始化來實(shí)現(xiàn)的。實(shí)現(xiàn)方法是，先導(dǎo)入Google Maps API庫文件并建立地圖容器，然后在地圖容器里創(chuàng)建一個(gè)GMap2()對象，最后為其設(shè)置中心和縮放級別完成初始化。下面對其關(guān)鍵點(diǎn)進(jìn)行著重講解。導(dǎo)入Google Maps API庫文件和創(chuàng)建地圖容器首先，必須在網(wǎng)頁中導(dǎo)入Google Maps API庫文件。具體方法是在HTML文件的Head部分加入類似下面的代碼。 script src=。v=2amp。amp。key=ABQIAAAA1j86tnUDFv8OAtC8dZVtKRT8YXSkg32FmSueYimfV_yj5DJguRRW5eQHwEBk10jwkDxLKNltT_kuQA type=text/javascript/script 然后在HTML的Body部分加入一個(gè)具有id屬性的元素作為Google地圖的容器（通常會使用DIV元素）。另外，通過此元素還可以定義地圖大小和其他一些屬性。例如，需要一個(gè)寬為1000像素，高為500像素的地圖，則可以加入如下代碼。div id=container style=width: 1000px。 height: 500px。 margin: 0 auto/div頁面加載事件onload和關(guān)閉事件onunload事件 頁面加載事件onload將在頁面加載時(shí)觸發(fā)，通常用于加載Google 地圖，因此十分重要。而onunload事件則會在關(guān)閉網(wǎng)頁時(shí)觸發(fā)。在含有Google 地圖的網(wǎng)頁中通常會令onunload=GUnload()。這是因?yàn)椴挥眠@個(gè)函數(shù)時(shí)，瀏覽器常因?yàn)榧虞d大量Javascript而導(dǎo)致內(nèi)存泄露，所以現(xiàn)在特意提供了GUnload()函數(shù)用于銷毀對象并釋放內(nèi)存。這一做法大大減少了瀏覽器因內(nèi)存泄露導(dǎo)致的崩潰，因此建議在所有使用Google 地圖的網(wǎng)頁中都在網(wǎng)頁卸載時(shí)調(diào)用該函數(shù)。調(diào)用方法如下。body onload=“加載地圖的函數(shù)” onunload=GUnload()創(chuàng)建GMap2()對象 在Google Maps API里，GMap2()對象用于創(chuàng)建和控制地圖等最基本的功能，因此也是最重要的一個(gè)對象。該對象包含的方法相當(dāng)豐富，在此先介紹其創(chuàng)建的方法。和其他Javascript對象一樣，GMap2()對象使用new關(guān)鍵字進(jìn)行創(chuàng)建，其語法格式如下所示。 New GMap2(container,opts) 其中，第一個(gè)參數(shù)container 便是Google地圖的容器。該參數(shù)是一個(gè)HTML DOM對象，()方法取得。第二個(gè)參數(shù)可省略，一般用于控制更復(fù)雜的地圖特性。設(shè)定地圖中心坐標(biāo)并顯示地圖 設(shè)定地圖中心坐標(biāo)的函數(shù)有兩個(gè)，并且都是GMap2對象的類方法，分別為setCenter()和panTo（）。 ()是其中相對重要的一個(gè)，該函數(shù)作用很多，但主要可以用于設(shè)置地圖中心、設(shè)定縮放級別及顯示地圖。其語法格式如下所示。 (point, zoomlevel,opts) 其中，第一個(gè)參數(shù)point即為將要設(shè)定的地圖中心，是一個(gè)GLatLng（）對象。其創(chuàng)建方法為new GLatLng(緯度，經(jīng)度)。第二個(gè)參數(shù)zoomlevel為017的整數(shù)，用于設(shè)定縮放級別，可省略。第三個(gè)對象opts同樣用于設(shè)置高級屬性。 Google地圖已經(jīng)成功加載后，()仍可以重新設(shè)置地圖中心。不過這樣就會把中心定位到新的位置，更好的辦法是使用panTo（）。panTo（）方法可以把地圖中心平滑地移動(dòng)到新的坐標(biāo)，其語法格式如下所示。 (point) ()()中的point參數(shù)含義一樣，為地圖的中心。()類似，(),并不常用。 值得注意的是，在以上三個(gè)函數(shù)中，()可以完成Google地圖的初始化。因此，在創(chuàng)建GMap2()對象之后，()方法才可以顯示出地圖。設(shè)定地圖類型 ()顯示出的地圖為普通地圖。實(shí)際上內(nèi)置的地圖類型有三個(gè)，分別為普通地圖、衛(wèi)星地圖和混合地圖，()方法進(jìn)行設(shè)定。其語法格式如下所示。(type)其中type參數(shù)可為G_NORMAL_MAP、G_SATELLITE_MAP和G_HYBRID_MAP，當(dāng)然如果添加了自定義的地圖類型，還可以為自定義的地圖類型。 功能拓展添加API內(nèi)置GControl()控件 GControl()控件是對地圖進(jìn)行操控的一組對象的總稱。Google Map API中不僅為自定義GControl()對象提供了豐富的接口，也為常用功能制作了默認(rèn)的控件。它們分別是：精簡地圖控件GSmallMapControl()、完整地圖控件GLargeMapControl()、精簡縮放控件GsmallZoomControl()、比例尺控件GScaleControl()和地圖類型控件GMapTypeControl(). 首先，必須了解GControl控件本身只是一個(gè)抽象類，僅用于提供接口。真正具備功能的控件實(shí)際上都繼承GControl（），如GSmallMapControl()控件。和所有Javascript類一樣，屬于GControl（）類的對象也用new關(guān)鍵字創(chuàng)建新的實(shí)例。 要在Google地圖上添加自己創(chuàng)建的GControl（）控件，()方法。常見的添加方法如下。此時(shí)控件會被置于默認(rèn)位置。（new GSmallMapControl()）；!DOCTYPE html PUBLIC //W3C//DTD XHTML Strict//EN html xmlns= head meta equiv=contenttype content=text/html。 charset=utf8/titleGoogle Maps JavaScript API Example/title!導(dǎo)入Google Maps API庫文件。注意將本代碼中的API Key替換為前文申請到的API Key script src=。v=2amp。amp。key=ABQIAAAA1j86tnUDFv8OAtC8dZVtKRT8YXSkg32FmSueYimfV_yj5DJguRRW5eQHwEBk10jwkDxLKNltT_kuQA type=text/javascript/scriptscript type=text/javascript//![CDATA[ var map。 //添加GControl()控件 function load() { if (GBrowserIsCompatible()) { map = new GMap2((map))。 //添加一個(gè)GSmallMapControl()控件 (new GSmallMapControl())。 //顯示地圖，并設(shè)置其中心，縮放值 (new GLatLng(, ), 2)。 } } //]] /script /head !加載時(shí)調(diào)用load()函數(shù)加載地圖，注意加上onunload=GUnload()防止內(nèi)存泄露 body onload=load() onunload=GUnload() !以下id為map的DIV元素即為Google地圖的容器 div id=map style=width: 500px。 height: 300px/div /body/html使用GMarker()地標(biāo) GMarker()地標(biāo)是Google地圖中用于標(biāo)記地理位置的對象。在實(shí)際應(yīng)用中，GMarker()地標(biāo)也是所有對象中最常用的一個(gè)。通常情況下，可以認(rèn)為GMarker()對象是除GMap2()對象外API中最重要的一個(gè)對象。許多基本功能，如指示位置，顯示信息都必須依賴GMarker()對象，因此其屬性和方法也非常豐富。（1）創(chuàng)建基本的GMarker()對象GMarker()對象使用new關(guān)鍵字進(jìn)行創(chuàng)建，其語法格式如下 new GMarker(point ，opts)其中，第一個(gè)參數(shù)point為地標(biāo)標(biāo)記的地理位置，該參數(shù)為GLatLng（）對象。實(shí)際上，GLatLng（）是一個(gè)包含經(jīng)緯度信息的地理點(diǎn)。第二個(gè)參數(shù)可省略，用于自定義GMarker()對象。（2）自定義GMarker（）對象 自定義GMarker（）對象需要用到GMarker（）構(gòu)造函數(shù)中的第二個(gè)參數(shù)，官方稱其為GMarkerOptions類。實(shí)際上，此參數(shù)屬于Javascript中的無名類，其中屬性會隨API升級而增加或變更。這里只介紹最常用的屬性。更改默認(rèn)的圖標(biāo)設(shè)定icon屬性 如果需要自定義GMarker（）對象在地圖上顯示的圖標(biāo)，就必須制定GMarkerOptions中的icon屬性。Icon屬性值應(yīng)為GIcon（）對象，默認(rèn)是G_DEFAULT_ICON，即那個(gè)紅色的圖標(biāo)。為該屬性賦值后則顯示新的圖標(biāo)。下面這段代碼詳細(xì)描述了如何建立一個(gè)典型的GIcon()對象。//創(chuàng)建一個(gè)自定義的GIcon var myIcon= new GIcon()。 //前景圖片 = 。 //陰影圖片 = 。 //前景圖片大小，長x寬 = new GSize(20, 25)。//陰影圖片大小，長x寬 = new GSize(12, 20)。//以下兩個(gè)屬性很難解釋，可自行調(diào)整其數(shù)值以便理解其意義// myIcon錨定點(diǎn)相對于myIcon圖片左上角的像素距離 = new GPoint(6, 10)。//信息窗口相對于myIcon圖片左上角的像素距離//關(guān)于信息窗口 = new GPoint(5, 1)。添加其他屬性 將上段代碼中的如下部分： Var marker1= new GMarker（geoPoint1,{icon:myIcon}）；更改為：Var marker1 = new GMarker（geoPoint1，{icon:myIcon，title：“把鼠標(biāo)移上來，看看有什么”}）；添加其他屬性，如draggable、clickable等其他屬性的方法類似。 完整程序及功能截圖!DOCTYPE html PUBLIC //W3C//DTD XHTML Strict//EN html xmlns=head meta equiv=contenttype content=text/html。 charset=utf8 / title畢業(yè)設(shè)計(jì)/title !導(dǎo)入Google Maps API庫文件。注意將本代碼中的API Key替換為前文申請到的API Key script src=。v=2amp。amp。key=ABQIAAAA1j86tnUDFv8OAtC8dZVtKRT8YXSkg32FmSueYimfV_yj5DJguRRW5eQHwEBk10jwkDxLKNltT_kuQA type=text/javascript /script/head!加載時(shí)調(diào)用load()函數(shù)加載地圖，注意加上onunload=GUnload()防止內(nèi)存泄露body onunload=GUnload() !以下id為map的DIV元素即為Google地圖的容器 div id=container style=width: 1000px。 height: 500px。 margin: 0 auto br / script type=text/javascript//![CDATA[ //在這里構(gòu)造所有的坐標(biāo)點(diǎn)使用json構(gòu)造數(shù)據(jù)數(shù)據(jù)來源將來可以使用其他互聯(lián)網(wǎng)車需提供生成。var center = { X: , Y: }。 //設(shè)置地圖中心坐標(biāo)var items1= [ { name: 第1秒90km/h, data: { weidu: ,jingdu: } }, { name: 第2秒89km/h, data: { weidu: , jingdu: } }, { name: 第3秒92km/h, data: { weidu: , jingdu: } }, { name: 第4秒93km/h, data: { weidu: , jingdu: } }, { name: 第5秒95km/h, data: { weidu: , jingdu: } }, { name: 第6秒94km/h, data: { weidu: , jingdu: } }, { name: 第7秒94km/h, data: { weidu: , jingdu: } }, { name: 第8秒93km/h, data: { weidu: , jingdu: } } ]。 var items2= [ { name: 第1秒88km/h, data: { weidu: , jingdu: } }, { name: 第2秒90km/h, data: { weidu: , jingdu: } }, { name: 第3秒88km/h, data: {weidu: , jingdu: } }, { name: 第4秒89km/h, data: { weidu