基于Google Maps与Ajax在Java Web应用程序中集成地图信息（上）
来源：互联网 发布：软件著作权材料 编辑：程序博客网 时间：2024/06/01 13:51
当今，交互式的地图日益流行于现代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部分的<div>元素。你需要提供给地图一个有效的纬度和经度以及缩放级别。缩放级别越高，地图将显示得越详细。
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("<p>More details</p>");
});
现在，既然我们已经了解了有关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">
//<
