本文中將使用工具輕松構(gòu)建終極的Hello World mashup：Google地圖mashup……
查看下面的 HTML 片斷來(lái)了解這一結(jié)構(gòu)：
| <table> <tr> <td valign="top"> <div id="google_map_div" style="width: 500px; height: 300px"> </div> </td> <td valign="top"> <p id="getLocations_div" align="center"> <> <form id="getLocationsForm"> <input value="Get the Locations" type="submit" onclick="javascript:getLocationsAndMap();return false" /> </form> </p> <p> <div id="locations_div"> <> </div> </p> </td> </tr> </table> |
請(qǐng)注意，當(dāng)用戶(hù)按下按鈕時(shí)，將觸發(fā)一個(gè)onclick 事件。該事件連接到了前述getLocationsAndMap() 函數(shù)，該函數(shù)將調(diào)用針對(duì)REST 服務(wù)的XMLHttpRequest。您已經(jīng)看到，getLocationsAndMapCallback() 函數(shù)之后會(huì)將服務(wù)響應(yīng)從JSON 文本轉(zhuǎn)換為注入到DOM 的HTML。
現(xiàn)在，您需要將地址組合到Google 地圖中。首先，getLocationsAndMapCallback() 中的JavaScript 代碼會(huì)編寫(xiě)HTML ，因此每個(gè)地址都會(huì)有一個(gè)調(diào)用JavaScript 函數(shù)的錨定標(biāo)記。函數(shù)showAddress()和代碼會(huì)傳遞所點(diǎn)擊的位置地址。以上代碼中g(shù)etLocationsAndMapCallback()函數(shù)的 TODO注釋替換為這行代碼：
| var anchor = ‘<a href="irrelevant" onclick="javascript:showAddress(\‘‘+ response.locations.location[i].address+‘\‘);‘+ ‘ return false">‘; |
這會(huì)為每個(gè)地址創(chuàng)建一個(gè)錨定標(biāo)記，單擊地址時(shí)就會(huì)觸發(fā)showAddress() 函數(shù)。
下一步，showAddress() 函數(shù)會(huì)連接到Google 地圖 API，由它真正在地圖中顯示傳遞過(guò)來(lái)的地址。這是通過(guò)Google 提供的樣板代碼來(lái)完成的。請(qǐng)注意以下代碼中的GMap2 和 geocoder 對(duì)象，它們都是作為Google地圖API的一部分提供的。該代碼將檢索地圖，然后更新HTML 文檔的google_map_div div 標(biāo)記。
| function showAddress(address) { var map = new GMap2( document.getElementById("google_map_div")); var geocoder = new GClientGeocoder(); geocoder.getLatLng(address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); } |
無(wú)論您相信與否，這樣就完成了Ajax支持的Google 地圖 mashup!在本教程中我還沒(méi)有展示完整的文件，我展示的是重要部分。查看下載一節(jié)，獲取完整代碼。
