Ajax支持的Google地图Mashup教程(6)

来源：百度文库 编辑：神马文学网 时间：2024/05/03 20:09:29
作者: , 　出处:Dev2Dev,　责任编辑: 叶江,　2007-06-13 14:59
本文中将使用工具轻松构建终极的Hello World mashup：Google地图mashup……
查看下面的 HTML 片断来了解这一结构：






style="width: 500px; height: 300px">



<>


type="submit"
onclick="javascript:getLocationsAndMap();return false"
/>




<>



请注意，当用户按下按钮时，将触发一个onclick 事件。该事件连接到了前述getLocationsAndMap() 函数，该函数将调用针对REST 服务的XMLHttpRequest。您已经看到，getLocationsAndMapCallback() 函数之后会将服务响应从JSON 文本转换为注入到DOM 的HTML。
现在，您需要将地址组合到Google 地图中。首先，getLocationsAndMapCallback() 中的JavaScript 代码会编写HTML ，因此每个地址都会有一个调用JavaScript 函数的锚定标记。函数showAddress()和代码会传递所点击的位置地址。以上代码中getLocationsAndMapCallback()函数的 TODO注释替换为这行代码：
var anchor = ‘onclick="javascript:showAddress(\‘‘+
response.locations.location[i].address+‘\‘);‘+
‘ return false">‘;
这会为每个地址创建一个锚定标记，单击地址时就会触发showAddress() 函数。
下一步，showAddress() 函数会连接到Google 地图 API，由它真正在地图中显示传递过来的地址。这是通过Google 提供的样板代码来完成的。请注意以下代码中的GMap2 和 geocoder 对象，它们都是作为Google地图API的一部分提供的。该代码将检索地图，然后更新HTML 文档的google_map_div div 标记。
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);
}
}
);
}
无论您相信与否，这样就完成了Ajax支持的Google 地图 mashup!在本教程中我还没有展示完整的文件，我展示的是重要部分。查看下载一节，获取完整代码。
Ajax支持的Google地图Mashup教程( 6) Ajax支持的Google地图Mashup教程(6) Ajax支持的Google地图Mashup教程(2) Ajax支持的Google地图Mashup教程(3) Ajax支持的Google地图Mashup教程(4) Ajax支持的Google地图Mashup教程(5) Ajax支持的Google地图Mashup教程(7) 技术文章-AJAX支持的 GOOGLE 地图 MASHUP 教程 Ajax支持的Google地图Mashup教程(2) Ajax支持的Google地图Mashup教程(3) Ajax支持的Google地图Mashup教程(5) Ajax支持的Google地图Mashup教程(7) 技术文章-AJAX支持的GOOGLE 地图 MASHUP 教程 打造安全 Ajax mashup 的未来 struts2的ajax支持，ajax校验 通过Google Maps Mashup能完成的25件事 Opera推出PPC上的浏览器正式版 加强AJAX支持 用 AJAX 构建支持实时验证的 Web 应用程序 Google 地图 Google 地图 地图 (Google) Mashup Google推“我的地图”服务 用户可创建地图 Google地图深度社会化：支持多人协作编辑等,第1页