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

作者: 朱先忠编译出处:51CTO.com　 ( ) 砖 ( ) 好评论 ( ) 条　进入论坛

更新时间：2006-12-26 14:37
关键词：Google Maps Ajax
阅读提示：在本文中，我们将讨论如何在你的Java Web应用程序中加入动态的交互式地图功能—以Google Maps API实现web接口，以Ajax提供与服务器端的实时交互。本小系列（上、下篇）意在对Google Maps和Ajax这两个框架作快速入门性介绍，使你能够快速而容易地创建自己的交互式地图程序。

一、引言

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

共3页: 1 [2] [3] 下一页

【内容导航】

滚动新闻　术语词典　问题悬赏

发表

共条查看

评价

叫个好

拍一砖

相关

博客

帖子

·AJAX实践:开发你自己的RSS在线阅读器
·第 1 部分: Ajax 简介
·ajax注册用户无刷新自动验证代码及调用..
·静态页中利用AJAX.NET实现无刷新页面？
·AJAX实践:开发你自己的RSS在线阅读器

·ajax课程－东方标准－李毅主讲
·利用AJAX和ASP.NET实现简单聊天室
·qiuqiu 各位哥哥姐姐叔叔阿姨爷爷奶奶，..
·.Net环境下基于Ajax的MVC方案
·基于PHP的AJAX技术实现文件异步上传

我也说两句

中国领先的 IT 技术网站 ·
技术成就梦想

·解析Ajax开发框架走进Ajax开发应用
·基于Google Maps与Ajax在Java Web..

· 揭开“阴暗”面纱看实..
· 用于帮助理解SOA与企业..
· SOA术语概述，第3部分..
· WindowsMobile应该如何..
· 如何用正则删除不包含..
· Spring2 Hibernate3 Ju..

· 光凭毅力难做事央企CI..
· 技术+业务未来CIO将承..
· 央企CIO职责定位有待明..
· ajax课程－东方标准－..
· 利用AJAX和ASP.NET实现..
· qiuqiu 各位哥哥姐姐叔..

排行榜

·Ajax的应用开发 (查看118483次)
·SOA 面向服务架构 (查看60374次)
·AJAX技术汇总 (查看27699次)
·Ajax技术简介 (查看19645次)
·SOA概览 (查看16595次)

·Ajax开发系列访谈：它是技巧而不是技术 (439个砖)
·SOA 面向服务架构 (368个砖)
·Ajax的应用开发 (362个砖)
·解析Ajax开发框架走进Ajax开发应用 (297个砖)
·架构师谈Ajax框架：它不是泡沫 (184个砖)

·Ajax开发系列访谈：它是技巧而不是技术 (723个好)
·SOA 面向服务架构 (468个好)
·Ajax的应用开发 (422个好)
·解析Ajax开发框架走进Ajax开发应用 (298个好)
·架构师谈Ajax框架：它不是泡沫 (198个好)

·2006年前沿技术频道热点关注 (01月)
·解析Ajax开发框架走进Ajax开发应用 (12月)
·透析SOA的技术支持 (12月)
·BEA World 2006 北京 (12月)
·Ajax明天会HOT还是OVER？ (12月)

·国庆充电之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论坛推广联盟”制作完成。书中所有内容均来自各联盟成员的论坛（网站）。制作本书的目的是为了集中大家的优势资源，将更多更精彩的内容带给广大技术爱好者。本书是联盟成立以来制作的第一本书。

专题

· 我是黑客我怕谁——讲..
· ARP攻击防范与解决方案
· Solaris 10 配置管理
· Solaris基础知识入门
· RIP路由协议专栏
· MPLS路由协议专栏
· OSPF路由协议专栏
· 思科路由器产品

Java编程开发手册

Java基础教程

· Java基础教程
· VPN技术
· ARP攻击防范与解决方案
· SQL Server 2005全解
· SOA 面向服务架构
· SQL Server 2005全解
· Java编程开发手册
· RAID——磁盘阵列基础

· 三层交换技术专题
· SQL Server入门到精通
· Windows Server 2003企..
· Windows远程桌面应用
· C#技术开发指南
· VPN技术
· Solaris 10 配置管理
· C#技术开发指南

Java编程开发手册

Java基础教程

· ARP攻击防范与解决方案
· VPN技术
· SQL Server 2005全解
· Java基础教程
· SQL Server入门到精通
· SQL Server 2005全解
· SOA 面向服务架构
· Java编程开发手册

· C#技术开发指南
· 三层交换技术专题
· C#技术开发指南
· Windows远程桌面应用
· RAID——磁盘阵列基础
· Windows Server 2003企..
· 邮件服务器专题
· wimax技术与趋势

专家

博客

导读

关键字阅读

频道精选

组网建网	安全频道
· NGN:下一代网络 · 网络访问中断大排查 · FTTx光纤接入	· 教你使用Anti ARP Sniff.. · 网络嗅探教程：使用Snif.. · 常见病毒手工清除方法大..
编程频道	前沿技术
· C++是垃圾语言？！ · 2007年IT界七大抄袭事件 · Java实用开发全集	· 解析Ajax开发框架走进A.. · 基于Google Maps与Ajax.. · 使用GWT实现文件上传功能
操作系统	服务器
· 热门 IT 培训认证官方资.. · Ubuntu 中文开源频道 · Solaris基础知识入门	· 费力不讨好数据中心主.. · AMD Phenom三核处理器解.. · 51CTO主编推荐经典专题
数据库	存储频道
· 甲骨文Oracle 11g正式发.. · Oracle数据库开发之PL/S.. · Oracle数据库开发基础教..	· 存储2006，一个并购的大.. · IDC宣布浪潮蝉联存储市.. · 双机热备技术

主编信箱热线:010-66476606　告诉我们您想看的：专题　文章

DB2 9技术资源中.. 推荐阅读
·DB2 Viper快速入门 ·DB2 9数据库的镜像分割与..	·将XML应用程序从DB2 8.x.. ·DB2 9中的pureXML：如何..
51CTO.com编辑部.. 推荐阅读
·服务器中的“傻瓜机”在.. ·盖茨也喜欢登录Youtube看..	· ·

张振伦的博客
·拯救系统管理员 ·美国选民：我为什么选布什	·VMware公司中文命名挑战赛 ·我们真缺乏创新吗?
梁林的博客
·J0ker的CISSP之路：复习-.. ·J0ker的CISSP之路:复习-I..	·9月第3周安全回顾内网安.. ·教你几招识别和防御Web网..