本文中將使用工具輕松構(gòu)建終極的Hello World mashup：Google地圖mashup……
Google 地圖 API
Google地圖和 Yahoo!地圖(我們不會(huì)進(jìn)一步討論Yahoo!)均創(chuàng)建了可公開訪問的JavaScript API，用于免費(fèi)將地圖嵌入隨機(jī)的Web 站點(diǎn)。這形成了小規(guī)模的mashup Web 應(yīng)用程序集，它們使用這些API來標(biāo)繪地理位置，從芝加哥的 犯罪地點(diǎn)到全世界的AP 新聞發(fā)生地。 這種流行的模式是查詢針對(duì)一組地址的服務(wù)，然后使用Google Map API映射這些地址，這也是我構(gòu)建mashup所使用的方法。您會(huì)看到，這種實(shí)現(xiàn)方法簡(jiǎn)單直白，但是有兩件事需要注意。
首先，瀏覽器的跨域安全功能似乎不利于用JavaScript 在瀏覽器中實(shí)現(xiàn)Google 地圖 mashup。這是由于用戶必須導(dǎo)航到托管REST 服務(wù)的網(wǎng)絡(luò)域，該服務(wù)會(huì)生成一個(gè)地址列表。在該網(wǎng)絡(luò)域中，將不允許瀏覽器請(qǐng)求http://maps.google.com 。Google 在其JavaScript 庫(kù)中實(shí)現(xiàn)了一種解決方案，重載對(duì)于google.com 腳本的資源請(qǐng)求，以便將數(shù)據(jù)注入到瀏覽器中。
第二件事不是技術(shù)問題，而是商業(yè)問題。Google 擁有映射數(shù)據(jù)和API ，保留定義 服務(wù)條款的權(quán)利，Google 限制每個(gè)Web 站點(diǎn)的免費(fèi)服務(wù)為每天50,000 請(qǐng)求。如果這是個(gè)問題，那么 付費(fèi)服務(wù) 是沒有限制的。為了實(shí)施這種使用策略，每個(gè)Web 站點(diǎn)都有一個(gè)惟一的API密鑰，必須將其配置為可追蹤站點(diǎn)的使用情況。獲得該密鑰是免費(fèi)的，而且簡(jiǎn)單容易， 然后在HTML 頁(yè)面的腳本源塊中可以對(duì)它進(jìn)行配置，如下所示(為簡(jiǎn)潔起見，截?cái)嗔嗣荑€)：
| <script src="http://maps.google.com/maps?key=ABQIAAAAT" type="text/javascript"> </script> |
從 REST 數(shù)據(jù)服務(wù)檢索地理位置
既然已經(jīng)具備了開發(fā)所用的工具箱，那么就該開始實(shí)現(xiàn)Ajax 支持的Google 地圖mashup 了。本節(jié)將逐步介紹如何構(gòu)造一個(gè)REST 服務(wù)，該服務(wù)通過地址指示位置。在下一小節(jié)中，我們將把REST 服務(wù)連接到Google 地圖來創(chuàng)建mashup。
關(guān)于 REST 服務(wù)，要說的第一點(diǎn)是它很簡(jiǎn)單。本教程的內(nèi)容和演示可以作為構(gòu)建更復(fù)雜的mashup 的起點(diǎn)。因此，其中的 Hello World mashup 盡可能簡(jiǎn)單而去掉復(fù)雜性。為此， REST 服務(wù)是一個(gè)靜態(tài)服務(wù)：位置是硬編碼到HTML 頁(yè)面中的。盡管這看似不靈活，但用一個(gè)動(dòng)態(tài)服務(wù)很容易就可以代替整個(gè)方法。精通JSP、PHP或 Ruby on Rails 的開發(fā)人員可以用從數(shù)據(jù)庫(kù)、Web 服務(wù)或其他技術(shù)中尋找方法來代替靜態(tài)的HTML 服務(wù)。
REST 服務(wù)是在示例的getD2DSites.html 中實(shí)現(xiàn)的。請(qǐng)看一下這個(gè)文件，您會(huì)發(fā)現(xiàn)它只是JSON 格式的地址對(duì)象的序列化JavaScript 數(shù)組：
| {"locations": {"location":[ {"id": "WashingtonDC", "city": "Washington DC", "location": "Hilton Hotel, Tysons Corner", "address": "7920 Jones Branch Drive", "date": "May 2nd, 2007" }, {"id": "NYC", "city": "New York City", "location": "Grand Hyatt New York", "address": "109 East 42nd Street, NY 10017", "date": "May 3rd, 2007" }, etc... |
