您所在的位置:IT专家堂 > 开发 > 基于Google Maps与Ajax在Java Web应用程序中集成地图信息(上)(1)

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

2006-12-26 14:37 朱先忠 编译 51CTO.com 我要评论(0) 字号:T | T
一键收藏,随时查看,分享好友!

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

AD:

一、引言

当今,交互式的地图日益流行于现代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()方法来确保使所有的浏览器尽可以保持一致是一种良好的编码实践。

内容导航

分享到:

网友评论TOP5

查看所有评论(

提交评论

栏目热门

更多>>

  • 头条 使用检查约束验证SQL Server中的数据
  • 构建应用程序最关键的目标之一是确保所有进入数据库的数据都要符合你的业务规则,数据校验是应用程序的关键部分,确保你的数据满足业务分析师制定的需求。本文将给大家介绍如何使用检查约束验证SQL Server中的数据。
  1. 对话职业经理人阿朱:程序员转型期的职业选择
  2. 从检测到防护:全面打造网站安全

热点职位

更多>>

热点专题

更多>>

读书

Expert C# 2005 Business Objects中文版
本书描述了怎样应用面向对象的概念来进行.NET应用程序的架构、设计和开发。作者将重点放在了面向业务的对象,即业务对象和怎样在

51CTO旗下网站

领先的IT技术网站 51CTO 领先的中文存储媒体 WatchStor 中国首个CIO网站 CIOage 中国首家数字医疗网站 HC3i 51CTO学院