本文中將使用工具輕松構(gòu)建終極的Hello World mashup：Google地圖mashup……
Google 地圖 Mashup預(yù)覽
在此，直接運(yùn)行示例代碼將幫助您將所有的代碼片斷連接到一起。為了指導(dǎo)您如何使用代碼，下面的列表突出了上文提到的重要代碼片斷，以及它們之間如何協(xié)作。
- 用戶向?yàn)g覽器請(qǐng)求ajaxGoogleMapsMashup.html，其結(jié)構(gòu)如下 ：
- 單擊時(shí)調(diào)用getLocationsAndMap() 函數(shù)的 HTML 按鈕
- id 為locations_div的空div 標(biāo)記，地址將在此插入
- id 為google_map_div 的空 div 標(biāo)記，Google 地圖將被插入
- 用戶單擊按鈕， getLocationsAndMap() 向REST 服務(wù)(getD2DSites.html)發(fā)出一個(gè)XMLHttpRequest 。
- REST 服務(wù)以JSON文本返回一個(gè)地址列表，該列表會(huì)在getLocationsAndMapCallback()中進(jìn)行反序列化。
- getLocationsAndMapCallback()為在返回列表中查找到的每個(gè)地址插入 HTML，其中包含一個(gè)錨定標(biāo)記。
- 用戶單擊一個(gè)地址的錨定標(biāo)記，將觸發(fā)對(duì)showAddress() 的調(diào)用，并傳遞位置的街道地址。
- showAddress() 從Google API調(diào)用 JavaScript 代碼，它將正確的地圖注入到google_map_div 元素中。
下載
MashupDeveleporDemo-070612.zip
結(jié)束語(yǔ)
如您所見，我將HTML、JavaScript、XMLHttpRequest、Google API和 JSON 組合在一起，創(chuàng)建了一個(gè)Hello World mashup 的實(shí)例。第一次這樣使用這些技術(shù)，您可能會(huì)感到難以理解，但是會(huì)很快對(duì)于這些技術(shù)的組合感到滿意。Web 2.0 是Web 應(yīng)用程序開發(fā)的主流趨勢(shì)，這種創(chuàng)建mashup的模式可以成功在Web 2.0項(xiàng)目中應(yīng)用。
