频 道 直 达 - 新闻 - 读书 - 培训 - 教程 - 前沿 - 组网 - 系统应用 - 安全 - 编程 - 存储 - 操作系统 - 数据库 - 服务器 - 专题 - 产品 - 案例库 - 技术圈 - 博客 - BBS
51CTO.COM_中国领先的IT技术网站
找资料:

基于Google Maps与Ajax在Java Web集成地图信息(下)(1)

作者: 朱先忠 编译 出处:51CTO.com  (  ) 砖  (  ) 好  评论 ( ) 条  进入论坛
更新时间:2006-12-26 14:12
关 键 词:Google Maps  Ajax
阅读提示:本文为《基于Google Maps与Ajax在Java Web应用程序中集成地图信息》的实战篇。在本文中,我们将分析如何使用Ajax技术在地图中添加可视化标记并通过数据库动态地更新这些标记。

一、动态标记

现在,既然我们已经对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)数据:

public class TouristSiteDirectoryServlet
 extends javax.servlet.http.HttpServlet
implements javax.servlet.Servlet {
...
/**
*数据存取对象提供了搜索旅游景点数据库的方法
*/
private SiteDAO getSiteDAO() {
...
}
/**
*提供的数据存取对象提供了搜索旅游景点数据库的方法
*/
protected 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");
if (method == null) {
String id = request.getParameter("id");
Site site = getSiteDAO().findSiteById(id);
xstream.alias("site", Site.class);
String xml = xstream.toXML(site);
response.getWriter().write(xml);
} else if (method.equals("findAll")) {
List sites = getSiteDAO().findAllAsMarkers();
String xml = xstream.toXML(sites);
response.getWriter().write(xml);
} else if (method.equals("findAllCities")) {
List cities = getSiteDAO().findAllCityAsMarkers();
String xml = xstream.toXML(cities);
response.getWriter().write(xml);
} else if (method.equals("findByCity")) {
String city = request.getParameter("city");
List sites = getSiteDAO().findByCityAsMarkers(city);
String xml = xstream.toXML(sites);
response.getWriter().write(xml);
}
}
}

这里大多数的代码也大都加入了注释。大致说来,这个servlet经由DAO对象实现数据库查询,并使用XStream技术把数据转换成XML形式(还可以把这些数据存储在一个普通XML文件中)。当然,把地理站点坐标存储在一个数据库中的优点是可以根据需要对它们进行更新—例如,在发生一场大型地震或陆地滑坡或大陆漂移等情况下。

然后,这个XML被直接写到servlet响应流中。结果列表看起来如下所示:

<list>
<marker>
<id>3</id>
<name>The Famous Mud Baths of central Elbonia</name>
<latitude>-36.87</latitude>
<longitude>185.22</longitude>
</marker>
<marker>
<id>5</id>
<name>The North Elbonian Mud Baths</name>
<latitude>-36.77</latitude>
<longitude>185.92</longitude>
</marker>
...
</list>

在客户端,我们取回XML标记列表,并且在地图上生成一组相应的标记。为了实现这一目的,我们经由一个Google工具类—GXmlHttp—来使用Ajax。这个类把一个查询发送到服务器端以取回一个XML文档—然后你可以使用JavaScript DOM函数对之加以分析。

下面,让我们来分析一下如何在真实环境下应用上面的技术。上面的XML数据由loadSites()函数(它再调用processSiteData()函数来处理站点数据)取回:

<script language="javascript" type="text/javascript">
function loadSites() {
var request = GXmlHttp.create();
request.open("GET", "/maps/SiteDirectory?method=findAll", true);
request.onreadystatechange = getCallbackFunction(request, processSiteData);
request.send(null);
}
</script>

这个processSiteData()函数及相关联的displaySiteMarkers()函数,都使用了JavaScript DOM处理技术来提取关于旅游景点的有用数据,并且在地图上创建相应的标记:

<script language="javascript" type="text/javascript">
function processSiteData(xmlDoc){
//取得标记数组并循环遍历它
siteMarkers = 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")

[0].firstChild.nodeValue);
var id = siteMarkers[i].getElementsByTagName(

"id")[0].firstChild.nodeValue;
var label = siteMarkers[i].getElementsByTagName(

"name")[0].firstChild.nodeValue;
createSiteMarker(new GLatLng(lat,lng),label,id);
}
}
</script>


共2页: 1 [2] 下一页
【内容导航】
发表
查看
我也说两句

匿名发表

(如果看不清请点击图片进行更换)


中 国 领 先 的 IT 技 术 网 站 ·
技 术 成 就 梦 想
·Ajax的应用开发 (查看118483次)
·SOA 面向服务架构 (查看60374次)
·AJAX技术汇总 (查看27699次)
·Ajax技术简介 (查看19645次)
·SOA概览 (查看16595次)
订阅技术快讯
电子杂志下载
名称:网络安全精品应用黄皮书
简介:《2007精品网络安全黄皮书》包括了9个大类24个小类, 800余篇文章,内容包含了熊猫烧香病毒、DDOS攻击、ARP病等热点问题的介绍及解决方案。从病毒查杀、防范、系统、数据等各方面的安全设置到黑客技术的了解、防范,涉及到了安全应用的全部领域, 由浅至深内容全面。
名称:Vista精品应用黄皮书
简介:《Vista精品应用黄皮书》囊括了Vista的各方面内容。此次的精简版,是将里面的内容做了提取,便于用户下载和使用。内容包含了各种Vista的安装与实施、技巧与解析以及各种Vista相关学习文档和相关软件的安全下载。该电子书是了解和应用Vista人员必备的工具手册,并且也是第一本
名称:2006中国IT论坛精品集合
简介:本书由“51CTO论坛推广联盟”制作完成。书中所有内容均来自各联盟成员的论坛(网站)。制作本书的目的是为了集中大家的优势资源,将更多更精彩的内容带给广大技术爱好者。本书是联盟成立以来制作的第一本书。
关键字阅读
频道精选
主编信箱 热线:010-66476606 告诉我们您想看的:专题 文章
关于我们 | 诚聘英才 | 联系我们 | 网站大事 | 意见反馈 | 网站地图
Copyright©2005-2007 51CTO.COM 版权所有