基于Google Maps与Ajax在Java Web应用程序中集成地图信息(上)

转载 2007年09月14日 09:27:00

一、引言

当今,交互式的地图日益流行于现代Web应用程序中。而且,在这方面的确存在大量的潜在的用户:房地产和旅游业就是两个很明显的领域;交互式的地图 能够提供实时的附加值,而且还有其它许多功能。然而,尽管今天许多的Web应用程序都能够充分利用集成式地图软件所带来的优点,但是许多开发团队却经常选 择避开集成具有完整功能的地理数据库系统所导致的复杂性。诚然,地图点击软件已经上市多年;然而,真正具有交互功能的地图(实时地与服务器端进行交互)却 一直被认为是相当复杂的,直到现在也是如此。

两种最近出现的技术—Google Maps与Ajax,使得在上述领域的开发相对容易多了。在本文中,我们将讨论如何在你的Java Web应用程序中加入动态的交互式地图功能—以Google Maps API实现web接口,以Ajax提供与服务器端的实时交互。本小系列(上下篇)意在对Google Maps和Ajax这两个框架作快速入门性介绍,使你能够快速而容易地创建自己的交互式地图程序。

二、Google Maps简介

在本篇中,我们将讨论如何使用Google Maps API把一个具有丰富特征的地图集成到你的应用程序中。Google Maps API是一种易于使用的JavaScript API,它能够使你把交互式地图直接嵌入到你的应用程序的web页面内部。并且我们将会看到,你会很容易地扩展它以便使用Ajax技术集成实时的服务器请 求。

另一方面,Google Maps API入门是很容易的。不需要任何下载;你仅需要注册一下以取得一个使用这种API的密钥即可,也不存在相应的收费问题。但是,你需要提供你的网站的 URL;并且,当你的应用程序发布于一个网站上时,你的密钥将仅使用这个URL工作。这种限制的一个恼人之处是,你需要针对你的开发或测试机器建立一个专 门使用的密钥:为了实现本文的示例代码,我不得不创建一个相应于http://localhost:8080/maps的特定的密钥。

一旦你拥有了一个有效的密钥,你就可以开始使用Google Maps API。让我们先从一些简单的问题入手:在我们的web页面上显示一幅地图。假定你已受命于Elbonia的旅游部门构建一个关于Elbonia地区的许 多旅游景点的宣传网站,特别是关于它的著名的温泉浴。注意:在我们的示例中,既然Elbonia很难在当前地图中找到,那么,我们不妨显示一幅New Zealand(一个南太平洋中部的小岛国家)的地图。

尽管该API并不特别复杂,但是使用Google Maps也要求掌握一些基本的JavaScript知识。你还需要知道你想显示的地区的纬度和经度。如果你不确定的话,你可以在互联网上查找这类信息,甚至是查阅一本地图集!

我们的第一个Google Map的完整的代码实现列举如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type"

content="text/html; charset=UTF-8">

<title>Our first Google Map</title>

<script src="http://maps.google.com/maps?file=api&v=2&key=MYKEY"

type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(-41.5, -185), 5);

}

}

//]]>

</script>

</head>

<body onload="load()" onunload="GUnload()">

<div id="map" style="width: 420px; height: 420px"></div>

</body>

</html>

在此,首先要注意的是,该代码从Google Maps服务器取回实际的JavaScript代码。要使该代码能够工作,你需要提供你的相应密钥。

<script src="http://maps.google.com/maps?file=api&v=2&key=MYKEY"

type="text/javascript">

</script>

接下来,我们看一下实际从服务器端下载地图的代码:

<script type="text/javascript">

//<![CDATA[

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(-41.5, -187.5), 5);

}

}

//]]>

</script>

在此,你创建了一个GMap2对象,并提供了一个对你的页面中的一些元素的引用。在本示例中,我们引用了页面body部分的元素。你需要提供给地图一个有效的纬度和经度以及缩放级别。缩放级别越高,地图将显示得越详细。

Google Maps能够与大多数现代浏览器的最新版本良好地协同工作。不过,通过使用GBrowserIsCompatible()方法来确保使所有的浏览器尽可以保持一致是一种良好的编码实践。

 

最后,在页面的body部分,我们显示该地图。地图的大小和形状都来自于相应的HTML元素。当页面加载(经由onload事件)时地图被初始化。 另外,当用户离开页面时,调用GUnload()方法(经由onunload事件)—它会清除地图的数据结构以避免发生在Internet Explorer中的内存漏洞问题。

<body onload="load()" onunload="GUnload()">

<div id="map" style="width: 420px; height: 420px"></div>

</body>

最终的结果地图显示于图1中。

 

图1.一幅简单的地图

三、平移与缩放

现在,既然我们能够成功地显示一幅地图,那么接下来,让我们试着添加一些缩放功能。Google Maps API允许你在你的地图上加入一些不同的控件,包括平移与缩放工具,一个地图比例尺,还有一组按钮允许你改变地图和卫星之间的观察位置。在我们的示例中, 我们要添加一个小型平移/缩放控件和一个“概括地图”控件—这将放置一个小型的可折叠的概括性地图。你可以使用addControl()方法来添加这些控 件,如下所示:

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(-41.5, -187.5), 5);

map.addControl(new GSmallMapControl());

map.addControl(new GOverviewMapControl());

}

}

我们的新的地图展示于图2中。

 

图2.一幅带有一些控件的地图

四、在地图中加入标记

Google Maps API并不仅仅是显示一幅地图;你还能够配置更具动态的地图。为此,你需要在你的地图中添加“overlay”(覆盖图)。Overlay是一些对象,它 们被显示为地图上的某些位置,并且用户能够与其进行交互。overlay的一个典型的使用是把一个标记放在一个给定位置以指示一些特殊位置或地址。

现在,让我们在地图上添加一个简单的标记。我们想把一个标记显示在Elbonia地区的一个特定的旅游景点上面。在取得该点的纬度和经度后,我们创建一个新的GMarker对象并且使用addOverlay()方法把它添加到地图中:

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(-41.5, -187.5), 5);

map.addControl(new GSmallMapControl());

map.addControl(new GOverviewMapControl());

var point = new GLatLng(-41.28, -185.22);

marker = new GMarker(point);

map.addOverlay(marker)

}

}

在我们的示例中,当一个用户点击我们的标记时,我们想显示一些细节信息。我们仅把一个监听器添加到标记上并且调用openInfoWindowHtml()方法—它能够通过一个文本气泡窗显示一段HTML消息。

marker = new GMarker(point);

map.addOverlay(marker)

GEvent.addListener(marker, "click", function() {

marker.openInfoWindowHtml("

More details

");

});

现在,既然我们已经了解了有关Google Maps API的基本知识,那么接下来,让我们来看一下如何把一幅Google地图集成到一个服务器端应用程序中。

五、AJAX简介

Ajax是Google Maps所依赖的背后技术。它也是我们在一个动态的web应用程序扩展和集成我们的Google Map所使用的技术。Ajax代表“异步JavaScript和XML”。从根本上来看,Ajax是一种技术;它支持使用JavaScript代码把一个 请求发送到一个服务器端,检索一些响应数据(通常以XML格式,相应于Ajax中的“X”),处理该数据,并相应地更新web页面。其中的第一个“A”代 表“异步”;Ajax请求能够在后台向服务器发送一个请求而不会中断用户的当作操作。当结果到达客户端浏览器时,调用一个回调函数来处理该数据并动态地更 新屏幕。在每一次更新过程中,不必重载整个屏幕,从而实现了一种更为平滑和更快速的用户体验。

Ajax技术的核心体现在XMLHttpRequest类。

<script language="javascript" type="text/javascript">

var req = new XMLHttpRequest();

</script>

事实上,创建一个XMLHttpRequest对象并不是那么简单:这主要存在于长久以来存在于不同浏览器之间的“丑陋”的兼容性问题。简言之,微 软Internet Explorer使用两个可能的ActiveXObject对象中的一个,而几乎所有其它的浏览器都使用了XMLHttpRequest类。对于这个问题 已经存在许多现成的解决方案;其中,大多数方案通常包含类似下列的代码行:

<script language="javascript" type="text/javascript">

<script type="text/javascript">

//<![CDATA[

var req = false;

if (window.XMLHttpRequest) {

//在非微软浏览器下创建XMLHttpRequest对象

req = new XMLHttpRequest();

} else if (window.ActiveXObject) {

//经由MS ActiveX创建XMLHttpRequest

try {

//试图在新版本的Internet Explorer中创建XMLHttpRequest对象

req = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e1) {

//无法创建要求的ActiveXObject

try {

// Try version supported by older versions

// of Internet Explorer

req = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e2) {

//无法使用ActiveX创建一个XMLHttpRequest

}

}

}

</script>

然而,Google Maps API却通过使用GXmlHttp类提供一种更为方便而安全的浏览器“快捷方式”:

<script language="javascript" type="text/javascript">

var req = GXmlHttp.create();

</script>

你可以使用你的XMLHttpRequest对象从服务器端取回数据。既然Ajax是异步的,那么,你根本不知道何时得到一个响应,并且你的应用程 序也不会“悬挂起来”来等待服务器的响应。因此,当你发送请求时,你还要提供一个特殊的回调函数。这个回调函数的主要目的是处理返回的数据。然而, Ajax处理问题的方法决定了它需要预先验证请求的状态以确保它真正正确地收到数据。

下面的代码示例中调用了一个Ajax请求—以XML形式取回地图上所有城市的列表,从而把它们显示在地图上。

<script language="javascript" type="text/javascript">

//创建XMLHttpRequest对象

var request = GXmlHttp.create();

//准备向服务器发出一个异步的HTTP请求

request.open("GET", "/maps/SiteDirectory?method=

findAllCities",true);

//返回的数据由这个函数处理

request.onreadystatechange = getCallbackFunction(

request,processCityData);

//发送请求

request.send(null);

</script>

这里大多数的代码都已加入了注释。其中的重点函数是getCallbackFunction()函数。这个函数对请求的状态进行一些检查,并且当接收到一个正确的响应时调用processCityData()函数—此函数包含所有有趣的业务逻辑:

<script language="javascript" type="text/javascript">

function getCallbackFunction(req, processData) {

//返回一个监听XMLHttpRequest实例的匿名函数

return function () {

//如果请求状态为“complete”

if (req.readyState == 4) {

if (req.status == 200) {

//把响应中的XML信息传递给

//处理器函数

processData(req.responseXML);

} else {

//发生一个HTTP问题

alert("HTTP error: "+req.status);

}

}

}

}

function processCityData(xmlDoc) {

//处理返回的XML数据

...

}

</script>

对于本示例程序而言,这就是目前为止我们所需要了解的

相关文章推荐

在本机 Android 应用程序中载入 Google Maps API 网站

目标 本辅导手册适用于熟悉 Android 开发的 Java 开发人员。本辅导手册中的代码将使用 1.1 版 Android SDK 和 Google Maps API 第 3 版。 完成...

Java Web应用程序设计

  • 2013年11月10日 15:59
  • 10.09MB
  • 下载

在Tomcat中部署Java Web应用程序

  • 2010年04月05日 15:07
  • 92KB
  • 下载

Tomcat5.5.x中部署Java Web应用程序

原文出处:http://www.blogjava.net/ocean07000814/articles/331694.html 本文的重点是如何部署,所以暂且先不介绍怎样开发Web应用程序和怎样启动...

《Java Web应用程序设计》

  • 2011年03月04日 20:24
  • 4.99MB
  • 下载

关于Java Web应用程序的若干经验总结

最近与木木一起做毕设。作为一个新手,在这里总结开发项目时的一些经验。供诸君参考。 关于Struts :经常用到的是两种地址格式,即/*和*.action,/*包括*.action。 也就是当服...
  • Acfang
  • Acfang
  • 2012年05月17日 08:58
  • 432

Java Web应用程序:Oozie及其使用方式

简单示例   为了向你展示Oozie的使用方法,让我们创建一个简单的示例。我们拥有两个Map/Reduce作业[3]——一个会获取最初的数据,另一个会合并指定类型的数据。实际的获取操作需要执行最初的...

Java Web应用程序开发1

一、Web应用程序简介 应用程序:指允许用户执行特定任务的软件程序,主要分为桌面应用程序和Web应用程序两种类型。 1、桌面应用程序(Desktop Application):一般是指采用客户机/...

2011-10-10 Java web应用程序开发

十一开学第一天,大家都是很快得进入状态.我也要努力啊.      今天学习了web应用程序开发的运行环境的搭建和web应用程序开发中一些相关知识.例如知道了应用程序一般可以分为桌面应用程序和web应...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基于Google Maps与Ajax在Java Web应用程序中集成地图信息(上)
举报原因:
原因补充:

(最多只允许输入30个字)