var anchor = '   nclick="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!在本教程中我还没有展示完整的文件，我展示的是重要部分。查看下载一节，获取完整代码。

　Google 地图 Mashup预览

　　在此，直接运行示例代码将帮助您将所有的代码片断连接到一起。为了指导您如何使用代码，下面的列表突出了上文提到的重要代码片断，以及它们之间如何协作。

　　用户向浏览器请求ajaxGoogleMapsMashup.html，其结构如下 ：

　　单击时调用getLocationsAndMap() 函数的 HTML 按钮

　　id 为locations_div的空div 标记，地址将在此插入

　　id 为google_map_div 的空 div 标记，Google 地图将被插入

　　用户单击按钮， getLocationsAndMap() 向REST 服务(getD2DSites.html)发出一个XMLHttpRequest 。

　　REST 服务以JSON文本返回一个地址列表，该列表会在getLocationsAndMapCallback()中进行反序列化。

　　getLocationsAndMapCallback()为在返回列表中查找到的每个地址插入 HTML，其中包含一个锚定标记。

　　用户单击一个地址的锚定标记，将触发对showAddress() 的调用，并传递位置的街道地址。

　　showAddress() 从Google API调用 JavaScript. 代码，它将正确的地图注入到google_map_div 元素中。

　　结束语

　　如您所见，我将HTML、JavaScript、XMLHttpRequest、Google API和 JSON 组合在一起，创建了一个Hello World mashup 的实例。第一次这样使用这些技术，您可能会感到难以理解，但是会很快对于这些技术的组合感到满意。Web 2.0 是Web 应用程序开发的主流趋势，这种创建mashup的模式可以成功在Web 2.0项目中应用。

14734354_200808071301431.jpg

14734354_200808071301432.jpg

阅读(787) | 评论(0) | 转发(0) |

0

上一篇：Google升级企业搜索套件 可搜索1000万文档

下一篇：使用Google Ajax Search API

相关热门文章

给主人留下些什么吧！~~

评论热议

请登录后评论。

登录 注册