一、动态标记
现在，既然我们已经对Google Maps API工作机理有了一个基本的理解，并且了解了Ajax对我们有什么帮助；那么接下来，让我们来探讨如何使用Ajax技术把一幅Google地图集成到我们的Java web应用程序中。作为示例，在我们的Elbonian网站上，我们想显示Elbonia地区所有的旅游景点。你可能想实现一种交互式地图；从中，用户能够使用地图上的标记定位一个特定的旅游景点。当用户点击一个景点时，一个显示有详细信息的窗口弹出。
为了实现以上目的，首先要集成一组服务器提供的标记。这样做的一种方法是在服务器端动态地生成JavaScript代码。然而，这是相当麻烦的，并且会导致生成过度庞大的HTML页面。幸好，还存在一种更好的方法。Google Maps API提供了一个称为GDownloadUrl()的方便的函数，你可以通过这个函数以XML形式下载数据并且在你的JavaScript代码中处理它。这样以来，把你的XML数据转换成Google Map标记是很容易的。
这个Ajax应用程序在其服务器端利用了仅有的一个servlet。这个servlet以XML形式提供关于旅游景点和包含这些旅游景点城市的数据。这个servlet的实现细节对于这里的讨论来说并不特别重要；最重要的是，这个servlet基于它接收的查询参数返回的是XML(而不是HTML)数据：
ublic class TouristSiteDirectoryServlet extends javax.servlet.http.HttpServletimplements javax.servlet.Servlet {
*数据存取对象提供了搜索旅游景点数据库的方法
rivate SiteDAO getSiteDAO() {
rotected void doGet(HttpServletRequest request， HttpServletResponse response)
throws ServletException， IOException {
String method=request.getParameter("method");
XStream xstream = new XStream();
xstream.alias("marker"， Marker.class);
response.setContentType("application/xml");
String id = request.getParameter("id");
Site site = getSiteDAO().findSiteById(id);
xstream.alias("site"， Site.class);
String xml = xstream.toXML(site);
ites = getSiteDAO().findAllAsMarkers();
String xml = xstream.toXML(sites);
} else if (method.equals("findAllCities")) {
cities = getSiteDAO().findAllCityAsMarkers();
String xml = xstream.toXML(cities);
} else if (method.equals("findByCity")) {
String city = request.getParameter("city");
ites = getSiteDAO().findByCityAsMarkers(city);
这里大多数的代码也大都加入了注释。大致说来，这个servlet经由DAO对象实现数据库查询，并使用XStream技术把数据转换成XML形式（还可以把这些数据存储在一个普通XML文件中）。当然，把地理站点坐标存储在一个数据库中的优点是可以根据需要对它们进行更新—例如，在发生一场大型地震或陆地滑坡或大陆漂移等情况下。
然后，这个XML被直接写到servlet响应流中。结果列表看起来如下所示：
ame The Famous Mud Baths of central Elbonia /name
ame The North Elbonian Mud Baths /name
在客户端，我们取回XML标记列表，并且在地图上生成一组相应的标记。为了实现这一目的，我们经由一个Google工具类—GXmlHttp—来使用Ajax。这个类把一个查询发送到服务器端以取回一个XML文档—然后你可以使用JavaScript DOM函数对之加以分析。
下面，让我们来分析一下如何在真实环境下应用上面的技术。上面的XML数据由loadSites()函数（它再调用processSiteData()函数来处理站点数据）取回：
cript language="javascript" type="text/javascript"
var request = GXmlHttp.create();
request.open("GET"， "/maps/SiteDirectory?method=findAll"， true);
request.onreadystatechange = getCallbackFunction(request， processSiteData);
这个processSiteData()函数及相关联的displaySiteMarkers()函数，都使用了JavaScript DOM处理技术来提取关于旅游景点的有用数据，并且在地图上创建相应的标记：
function processSiteData(xmlDoc){
//取得标记数组并循环遍历它
iteMarkers = xmlDoc.documentElement.getElementsByTagName("marker");
displaySitesMarkers();
function displaySitesMarkers() {
map.clearOverlays();
for (var i = 0; i siteMarkers.length; i++) {
//获得每个标记的属性
var lat = parseFloat(siteMarkers[i].getElementsByTagName("latitude")
[0].firstChild.nodeValue);
var lng = parseFloat(siteMarkers[i].getElementsByTagName("longitude")
var id = siteMarkers[i].getElementsByTagName(
var label = siteMarkers[i].getElementsByTagName(
"name")[0].firstChild.nodeValue;
createSiteMarker(new GLatLng(lat，lng)，label，id);
[2]下一页【内容导航】
滚动新闻术语词典问题悬赏发表评论查看评价叫个好拍一砖
相关
专题
文档《ASP.NET AJAX Web 应用开发秘诀（VB版..
解析Ajax开发框架 走进Ajax开发应用
Ajax明天会HOT还是OVER？
微软的Ajax：Atlas(ASP.net AJAX)
AJAX 51CTO技术座谈会
基于Google Maps与Ajax在Java Web应用程..
三种主流RIA开发平台对比
修复iPhone上的ASP.NET AJAX
ASP.NET的AJAX控件工具包已经更新
基于REST的Web服务及其基于Ajax的客户端
相关
博客
帖子AJAX实践:开发你自己的RSS在线阅读器
第 1 部分: Ajax 简介
ajax注册用户无刷新自动验证代码及调用..
静态页中利用AJAX.NET实现无刷新页面？
AJAX实践:开发你自己的RSS在线阅读器
ajax课程－东方标准－李毅主讲
利用AJAX和ASP.NET实现简单聊天室
qiuqiu 各位哥哥姐姐叔叔阿姨爷爷奶奶，..
.Net环境下基于Ajax的MVC方案
基于PHP的AJAX技术实现文件异步上传
相关
白皮书
资料SQL培训文件：绝对精华
SQL SERVER命令大全
SQL-Security学习资料
2007-DSG SnapArchiving-Oracle历史数据..
2007-DSG-SnapAssure数据备份产品白皮书
Ajax 培训教程
支持php的AJAX最新 开发工具
AJAX Webshop 3 beta
用Ajax读取XML格式的数据源码
AJAX开发简略
相关
讨论组
技术人小红帽
技术讨论
维护也疯狂
网络存储讲义
alcatel
y21369638进圈的~留下你的网名 从事什..
utingbuxiang欢迎
我也说两句评论共 条
匿名发表
验证码： (如果看不清请点击图片进行更换)
中 国 领 先 的 IT 技 术 网 站 ·
技 术 成 就 梦 想解析Ajax开发框架 走进Ajax开发应用
基于Google Maps与Ajax在Java Web..
揭开“阴暗”面纱 看实..
用于帮助理解SOA与企业..
SOA术语概述，第3部分..
WindowsMobile应该如何..
如何用正则删除不包含..
Spring2 Hibernate3 Ju..
光凭毅力难做事 央企CI..
技术+业务 未来CIO将承..
央企CIO职责定位有待明..
ajax课程－东方标准－..
利用AJAX和ASP.NET实现..
qiuqiu 各位哥哥姐姐叔..
排行榜专题榜叫好榜拍砖榜点击榜Ajax的应用开发
SOA 面向服务架构
AJAX技术汇总
Ajax技术简介
SOA概览
Ajax开发系列访谈：它是技巧而不是技术
SOA 面向服务架构
Ajax的应用开发
解析Ajax开发框架 走进Ajax开发应用
架构师谈Ajax框架：它不是泡沫
Ajax开发系列访谈：它是技巧而不是技术
SOA 面向服务架构
Ajax的应用开发
解析Ajax开发框架 走进Ajax开发应用
架构师谈Ajax框架：它不是泡沫
2006年前沿技术频道热点关注
解析Ajax开发框架 走进Ajax开发应用
透析SOA的技术支持
BEA World 2006 北京
Ajax明天会HOT还是OVER？
国庆充电之IT培训认证
51CTO主编推荐经典专题
51CTO“十·一”特别专..
对应需求 如何选择最合..
SPEC：AMD四核浮点性能..
FB-DIMM、RDDR3谁是服..
Avaya股东批准私募基金..
未来游戏设计将要面临..
微软发布全新FTP7.0
网络嗅探教程：用Sniff..
能够改变IT格局的五大..
微软统一沟通系列视频..
专家教你理解ARP欺骗攻..
微软屈从用户PC厂商压..
企业如何对付DDoS攻击 ..
思科称三年后网真系统..
北京歌华出现网络故障 ..
苹果与黑客大斗法 破解..
订阅技术快讯查看样刊电子杂志下载名称：网络安全精品应用黄皮书
简介：《2007精品网络安全黄皮书》包括了9个大类24个小类， 800余篇文章，内容包含了熊猫烧香病毒、DDOS攻击、ARP病等热点问题的介绍及解决方案。从病毒查杀、防范、系统、数据等各方面的安全设置到黑客技术的了解、防范，涉及到了安全应用的全部领域, 由浅至深内容全面。名称： Vista精品应用黄皮书
简介：《Vista精品应用黄皮书》囊括了Vista的各方面内容。此次的精简版，是将里面的内容做了提取，便于用户下载和使用。内容包含了各种Vista的安装与实施、技巧与解析以及各种Vista相关学习文档和相关软件的安全下载。该电子书是了解和应用Vista人员必备的工具手册，并且也是第一本名称： 2006中国IT论坛精品集合
简介：本书由“51CTO论坛推广联盟”制作完成。书中所有内容均来自各联盟成员的论坛（网站）。制作本书的目的是为了集中大家的优势资源，将更多更精彩的内容带给广大技术爱好者。本书是联盟成立以来制作的第一本书。阅读提示：本文为《基于Google Maps与Ajax在Java Web应用程序中集成地图信息》的实战篇。在本文中，我们将分析如何使用Ajax技术在地图中添加可视化标记并通过数据库动态地更新这些标记。
二、实时显示细节信息
当用户点击一个景点时，我们想弹出一个信息框来显示该景点的细节信息(参考图3)。这在一个基于地图的应用程序中是经常要求实现的。
图3.显示细节信息
然而，在真正世界应用程序中，经常存在太多的数据需要立即全部加载。你需要取回并且根据特定要求实现相应的显示。为此，我们将再次使用Ajax技术。首先，我们在标记中添加一个监听器—调用openInfoWindow()函数实现：
openInfoWindow(marker，"" + id);
这个openInfoWindow()函数显示一个临时消息(“Loading details...”)，然后继续从服务器取回详细的信息。这种临时消息对用户来说是一种重要的可视化线索，从而让用户知道请求正在处理中。
function openInfoWindow(marker， id) {
marker.openInfoWindowHtml("Loading details...");
fetchDetails(id，marker);
该fetchDetails()函数很类似于前面我们所看到的Ajax代码（displayDetails()函数），它也使用了JavaScript DOM来提取一些有用的域，然后准备HTML细节文本以显示在信息窗内：
var req = GXmlHttp.create();
req.open("GET"， "/maps/SiteDirectory?id="+id， true);
req.onreadystatechange = getCallbackFunction(req， displayDetails);
function displayDetails(siteDetailsXML) {
//从文档中取得根“site”元素
var site = siteDetailsXML.getElementsByTagName("site")[0];
var name = getNodeValue(site.getElementsByTagName("name")[0]);
var id = getNodeValue(site.getElementsByTagName("id")[0]);
var symbol = getNodeValue(siteDetailsXML.getElementsByTagName(
var website = getNodeValue(siteDetailsXML.getElementsByTagName(
var address = site.getElementsByTagName("address")[0]
var address1 = getNodeValue(siteDetailsXML.getElementsByTagName(
var city = getNodeValue(siteDetailsXML.getElementsByTagName(
var postcode = getNodeValue(siteDetailsXML.getElementsByTagName(
marker = getMarker(id);
marker.showMapBlowup();
var html = ' span class="site-title-line" '
+ ' span class="site-details-line" '
三、总结
显然还存在许多更高级的话题没有在本文中涉及。例如，在这种类型的实际应用程序中，可能存在相当多的位置(或旅游景点，或待售的房子)需要轻松地显示在一幅小规模的地图上。因此，一开始，当要显示整个国家时，我们仅需要标记出我们所感兴趣的城市，而当用户点击一个城市时，地图将放大并且显示在站点中显示这个相应的城市。借助于在本文尚未讨论的其它Google Map API特征，这种功能是很容易实现的；但是，你可以在本文相应的示例代码中看到这样的例子。
最后，希望本文能够为你使用Google Maps和Ajax技术在你的web应用程序中集成基于地图的功能助一臂之力。作为一篇入门性文章，这里所涉及的服务器端Ajax技术是非常基本的。对于更复杂的应用程序来说，例如DWR这样的Ajax框架是非常值得深入探讨的。
