本科毕业设计论文-基于Google-Maps-API的应用开发.doc

摘要 摘要 在互联网 2 0 时代 围绕 JavaScript 的各种应用方兴未艾 越来越多的公司开 发了以浏览器为平台的开发平台 特别是 Google 在该领域已经做了大量的开发 推出了包括地图 API 在内的一整套互联网开发接口 初步建立了一个以浏览器为 平台的互联网开发环境 可以期待 基于 JavaScript 的浏览器开发将越来越丰富 并最终成为主流 本文就谷歌地图这一热门技术展开讨论 并通过编程实现了一 个基于谷歌地图的公交查询网站 在讨论了谷歌地图的背景 WEB2 0 及其核心理论与技术后 本文详尽地研究 了谷歌地图 API 的语法规范以及基于谷歌地图的信息聚合 并在此理论基础上 在前台用 JavaScript 语言 后台用 PHP 语言编程实现了一个简单的基于谷歌地图 的公交查询网站 该网站需运行在 suse 操作系统上的 Apache 服务器上 程序实 现了 Ajax 技术 来解析 XML 文档 生成公交站点的信息 关键词 关键词 web2 0web2 0 谷歌地图 谷歌地图 JavaScriptJavaScript 公交查询公交查询 Abstract Abstract In the era of WEB2 0 the applications which surrounding JavaScript are developed More and more companies have development platforms in the browser especially Google which has done a lot of development including the web maps API Preliminary development establish a platform in the Internet browser for development environment In the future the development based on JavaScript will be rich and finally become the mainstream This paper reports on Google maps and through discussions with a simple programming based on Google maps of the public bus website After discussion of the background of google maps and its core technology and WEB2 0 theory This paper discuss syntax of google maps API Then this paper5 build a simple public web site with JavaScript and PHP for bus query This site runs on the apache servers in the suse operating system The site use Ajax technology to analyze the XML document of the bus stops Keywords web2 0 google map JavaScript bus query 目录i 目录 第一章第一章 绪论绪论 1 1 1 选题的目的及意义 1 1 2 国内外研究状况 1 1 2 1 国内研究状况 1 1 2 2 国外研究状况 2 1 3 本选题研究内容 3 第二章第二章 WEB2 0 介绍介绍 5 2 1 WEB2 0 概念 5 2 2 WEB2 0 理论与技术 5 2 2 1 六度关系理论 5 2 2 2 XML 6 2 2 3AJAX 6 2 3 MASHUP的介绍 6 2 4 JAVASCRIPT语言 7 2 4 1 JavaScript 起源 7 2 4 2 JavaScript 目前标准 7 2 4 3 JavaScript 在互联网应用中的作用 8 2 4 4 Prototype 库介绍 9 第第三三章章 GOOGLE API 技术技术 11 3 1 GOOGLE API 概述 11 3 1 1 Google API 定义 11 3 1 2 Google API 技术的特点 12 3 1 3 Google API 对于互联网意义 12 3 2 GOOGLE API 语法规范 12 3 2 1 基础语法 JavaScript 12 3 2 2 Google API 规范 13 3 2 3 Google Maps API 几个主要对象 14 ii目录 3 2 4 Google Maps API 的事件处理 16 3 2 4 Google Maps API 提供的服务 16 第第四四章章 编程实现基于编程实现基于 GOOGLE API 的的公交应用公交应用 17 4 1 需求分析 17 4 1 1 功能需求 17 4 1 2 性能需求 17 4 1 3 运行需求 17 4 2 总体设计 18 4 2 1 功能模块设计 18 4 2 2 算法与数据结构 19 4 2 3 界面设计 19 4 3 开发环境 19 4 3 1 操作系统 suse10 0 19 4 3 2 服务器 apache2 21 4 3 3 数据库 mysql5 0 22 21 4 3 4 开发语言 PHP5 21 4 4 常见的公交应用 22 4 5 代码的设计 调试与运行 24 4 5 1 核心功能的实现 24 4 5 2 Ajax 功能的实现 36 第五章第五章 结束语结束语 41 致谢致谢 43 参考文献参考文献 45 第一章 绪论 1 第一章 绪论 本课题探讨使用 Google 地图 API 建立公交线路的应用开发 本章就这一课 题展开讨论 对选题作一初步介绍 1 1 选题的目的及意义 互联网用户查询公交线路时 一般需要解决两个问题 一是线路信息的获取 例如线路名称 经过站点 发车时间和间隔等 二是信息的显示 直观的显示能 够更好的帮助用户选择合适的出行方案 第一个问题的解决主要需要公交站点的数据库和合适的查询算法 第二个问 题可以利用本论文介绍的 Google 地图 API 很好的解决 本论文设计了一个解决 方案以解决这两个问题 1 2 国内外研究状况 1 2 1 国内研究状况 关于 Google 地图的研究在国内已经蓬勃发展起来了 也有一些同类型的网 站提供类似服务 如 和 等 Mapbar 是中国最大的在线地图服务商 拥有 80 的市场覆盖率 地图联盟 向各类网站提供免费的标准化产品 包括百度 腾讯在内的 5000 多家网站 都 采用了 Mapbar 地图 Mapbar 提供一套类似谷歌地图的开发接口 2008 年 5 月 30 日地图 API 正式发布 1 北京灵图软件技术有限公司旗下的我要地图网 借鉴谷歌地图自主 开发了一套地图接口在引擎之上 提供了 iframe JavaScript Http Xml WebService 四种形式的接口 可以满足网站类 B S 结构 和非网站类 C S 结构 的应用 如果用户有自己的数据 信息 可以非 常方便的与地图结合起来 形成互动性的地图应用 而且提供 7 24 的运营维护 和技术支持 该接口主要有地图频道接口 地图接口 标注接口 搜索接口 导 基于 Google Maps API 的应用开发 2 航接口 公交接口 开发中 位置描述接口等 自 2005 年 12 月 22 日推出 1 1 版以后 逐渐进行更新 目前是 2 13 版本 可以用于构建营业网点发布系统 销 售服务地图系统 渠道地图管理系统 烟草配送行业系统 GPS 监控调度系统 已经应用在北京移动和海淀工商局的系统中 2 北京图盟科技有限公司 以下简称 Mapabc 数字地图及地图发布技术提供 出行服务指南 拥有自主知识产权的 Mapabc 地理信息系统软件 为实现互联 网和移动终端互动地图服务提供解决方案 Mapabc 基于此系统构建的基础地图 服务运营平台 可不间断地 快速地应对大并发访问请求 满足电信运营商和搜 索引擎的苛刻性能指标 新浪 Google 中国搜索 新华网 阿里巴巴 搜房网 等网站采用 Mapabc 基础地图服务来支持其互联网或手机增值业务 可以获取基 础地图 黄页数据 公交换乘 驾车路径等基础地图服务资源 并把这些位置信 息与搜索引擎或者自有内容无缝整合 除了基础地图服务外 Mapabc 与移动运 营商合作开展手机定位和无线地图等服务 自主开发了 企业地标 无线多媒体 信息采集系统 地图名片 等众多地理位置服务产品 3 目前国内的研究集中在两个方面 一是基于谷歌地图的应用系统设计和开发 上 目的是实现地理空间数据的共享和交互 给人们的生活带来方便 二是对我 国自主开发地理信息服务的研究 从数字化建设 地理信息服务市场培育 卫星 遥感技术商业化发展等方面提出我国地理信息服务发展的对策与建议 4 1 2 2 国外研究状况 谷歌地图是在 web2 0 深入发展的背景下提出的 单纯来自一种数据来源已经 无法满足现今网络使用者的需求 未来的服务将是以软件混搭 Mashup 的概念 意即 Web 应用系统整合多种不同的信息来源 来发展 信息的整合势必是未来 的趋势 目前国外已经在谷歌地图的基础上开发出了很多实用应用 例如 ATsite 提供 的一个天文学的旅游应用 可以通过网站的形式让人们虚拟体验天文学历史上的 重要地点 5 谷歌致力于网络技术研发及创新服务的提供 目前谷歌的业务已经从 Web 平 台扩展到个人桌面化服务 在网络世界的布局已经由点 单一个别的 Google 服 第一章 绪论 3 务 展开到线 Google 服务之间的彼此整合 未来将逐渐扩展到面 提供网络服 务整合平台 充分体现的 web2 0 的整合平台性 目前谷歌提供的接口从功能上可以分成两类 1 简化开发过程的接口 比如谷歌的 Ajax 供稿 API 可以帮助开发人员简化解析 xml 文档的过程 2 强化网站功能 谷歌的地图服务可以让开发人员将自己的数据以更直观有效 的方式呈现出来 增强网站的功能 利用谷歌提供这些功能 国外还开发出了自驾车导航系统和奥运场馆向导系 统 目前 谷歌地图和谷歌地球之间的联系越来越紧密 谷歌地图也可以直接使 用 KML 文件进行解析 具有更强大的数据分析能力 1 3 本选题研究内容 本课题最终实现的公交查询网站要求实现查询 显示与交互的功能 查询是指用户通过网页输入要查询的起始站点 在网站的地图上异步的显示 路线 如果中间有换乘的话 提示换乘站点 显示是在网站的地图界面上使用 Ajax 技术异步显示公交路线 交互是用户可以在结果中加更多的条件 来进一步 得到更精确的结果 本课题最终的网站的要求是 输入起始站点 返回乘车路线 并且利用谷歌 地图接口显示在页面上 如果用户对结果不满意可以进一步查询更精确的结果 基于 Google Maps API 的应用开发 4 第 2 章 WEB2 0 介绍5 第二章 WEB2 0 介绍 2 1 WEB2 0 概念 Web2 0 是相对 Web1 0 2003 年以前的互联网模式 的新的一类互联网应 用的统称 是一次从核心内容到外部应用的革命 由 Web1 0 单纯通过网络浏览 器浏览 html 网页模式向内容更丰富 联系性更强 工具性更强的 Web2 0 互联网 模式的发展已经成为互联网新的发展趋势 Web1 0 到 Web2 0 的转变 具体的说 从模式上是单纯的 读 向 写 共同 建设 发展 由被动地接收互联网信息向主动创造互联网信息迈进 从基本构成 单元上 是由 网页 向 发表 记录的信息 发展 从工具上 是由互联网浏览器向 各类浏览器 rss 阅读器等内容发展 运行机制上 由 Client Server 向 Web Services 转变 作者由程序员等专业人士向全部普通用户发展 应用上由初级的 滑稽 的应用向全面大量应用发展 总之 Web2 0 是以 Flickr Craigslist Linkedin Tribes Ryze Friendster Del icio us 43T 等网站为代表 以 Blog TAG SNS RSS wiki 等应用为核心 依据六度分隔 xml ajax 等新理 论和技术实现的互联网新一代模式 2 2 WEB2 0 理论与技术 2 2 1 六度关系理论 1967 年哈佛大学的心理学教授 Stanley Milgram 1933 年 1984 年 想要描绘一 个连结人与社区的人际连系网而做过一次连锁信实验 结果发现了 六度分隔 现 象 简单地说 你和任何一个陌生人之间所间隔的人不会超过六个 也就是说 最多通过六个人你就能够认识任何一个陌生人 6 2001 年 哥伦比亚大学针对全球上百个国家的 6 万名志愿者所作的一项实验 也证明 一封邮件平均被转发 6 次 即可回到原始发件人那里 基于 Google Maps API 的应用开发 6 2 2 2 XML XML Extensible Markup Language 即可扩展标记语言 是 SGML Standard Generalized Markup Language 标准通用标记语言 的一个子集 7 Xml 是 Internet 环境中跨平台的 依赖于内容的技术 是当前处理结构化文档信息的有力工具 扩展标记语言 XML 是一种简单的数据存储语言 使用一系列简单的标记描述数 据 而这些标记可以用方便的方式建立 虽然 XML 占用的空间比二进制数据要 占用更多的空间 但 XML 极其简单易于掌握和使用 2 2 3AJAX AJAX 全称为 Asynchronous JavaScript and XML 异步 JavaScript 和 XML 是指一种创建交互式网页应用的网页开发技术 8 AJAX 主要包含了以下几种技 术 基于 web 标准 standards based presentation XHTML CSS 的表示 使用 DOM Document Object Model 进行动态显示及交互 使用 XML 和 XSLT 进 行数据交换及相关操作 使用 XMLHttpRequest 进行异步数据查询 检索 使用 JavaScript 将所有的东西绑定在一起 英文参见 Ajax 的提出者 Jesse James Garrett 的原文 原文题目 Ajax A New Approach to Web Applications 类似于 DHTML 或 LAMP AJAX 不是指一种单一的技术 而是有机地利用 了一系列相关的技术 2 3 Mashup 的介绍 Mashup 是一种新型的基于 Web 的数据集成应用程序是糅合 是当今网络上 出现的一种网络现象 将两种以上使用公共或者私有数据库的 web 应用 加在一 起 形成一个整合应用 9 一般使用源应用的 api 接口 或者是一些 rss 输出 含 atom 作为内容源 合并的 web 应用什么技术 则没有什么限制 mashup 在 geek 群体和互联网玩家之中获得了极大的欢迎 mashup 未必需要很高的编程技 能 只需要熟悉 api 和网络服务工作方式 都能进行开发 所以很快成为一个流 行的网络现象 很多公司例如 yahoo google 都为此提供开放接口 以吸引这个群 体 第 2 章 WEB2 0 介绍7 2 4 JavaScript 语言 2 4 1 JavaScript 起源 JavaScript 是 Netscape 公司与 Sun 公司合作开发的 在 JavaScript 出现之前 Web 浏览器不过是一种能够显示超文本文档的软件的基本部分 而在 JavaScript 出现之后 网页的内容不再局限于枯燥的文本 它们的可交互性得到了显著的改 善 JavaScript 的第一个版本 即 JavaScript 1 0 版本 出现在 1995 年推出的 Netscape Navigator 2 浏览器中 10 在 JavaScript 1 0 发布时 Netscape Navigator 主宰着浏览器市场 微软的 IE 浏览器则扮演着追赶者的角色 微软在推出 IE 3 的时候发布了自己的 VBScript 语言并以 JScript 为名发布了 JavaScript 的一个版本 以此很快跟上了 Netscape 的 步伐 面对微软公司的竞争 Netscape 和 Sun 公司联合 ECMA 欧洲计算机制造商 协会 对 JavaScript 语言进行了标准化 其结果就是 ECMAScript 语言 这使得 同一种语言又多了一个名字 虽说 ECMAScript 这个名字没有流行开来 但人们 现在谈论的 JavaScript 实际上就是 ECMAScript JavaScript 是一种脚本语言 JavaScript 脚本通常只能通过 Web 浏览器去完成 某种操作而不是像普通意义上的程序那样可以独立运行 因为需要由 Web 浏览器 进行解释和执行 所以 JavaScript 脚本不像 Java 和 C 等编译型程序设计语言那 样用途广泛 不过 这种相对的简单性也正是 JavaScript 的长处 因为比较容易 学习和掌握 所以 JavaScript 很受那些本身不是程序员 但希望能够通过简单的 剪贴操作把脚本嵌入他们的现有网页中的普通用户们的欢迎 2 4 2 JavaScript 目前标准 Netscape 微软和其他一些浏览器制造商们与 W3C 携手制定新的标准 并于 1998 年 10 月完成了 第 1 级 DOM DOM Level 1 微软公司在 IE 5 浏览器中内建了对 W3C 制定的标准化 DOM 的支持 但同 基于 Google Maps API 的应用开发 8 时继续支持其专有的 Microsoft DOM Netscape 公司发布了一种与 NN 4 无任何共 同点的浏览器 Netscape Navigator 6 NN 6 该浏览器跳过了主版本号并使用一 个与以前完全不同的呈现引擎 新引擎对 CSS 提供了更多更好的支持 NN 6 也 支持标准化的 DOM 但不再向后兼容早期的 Netscape DOM 之后 Netscape 和微软公司都发布过几个新版浏览器产品 而每个新版本都 在老版本的基础上通过增加对各项 Web 标准的支持来不断完善自己 2 4 3 JavaScript 在互联网应用中的作用 JavaScript 一直都当作是解析型的脚本语言 长期被程序开发人员忽视 而直 到 Jesse James Garrett 把 JavaScript XMLhttp DOM 等组合在一起正式提出 Ajax 后 JavaScript 才忽然地炙手可热起来 加上 Google Yahoo Microsoft 等大型公司 在 Ajax 方面的大量应用 JavaScript 随着 Ajax 也越来越受到关注 Ajax 不是一种技术 而是一种概念 这种能给互联网应用带来革新的概念让 程序开发人员产生浓厚兴趣 原因不仅在于技术组合本身 也在于互联网应用技 术模式的发展趋势 RIA 的发展趋势需要新的技术和方法来配合 Ajax 在现阶段 正好满足了丰富互联网应用的部分发展要求 而重新利用上和定位 JavaScript 将 是一种较好实现 RIA 的选择 Ajax 或者说目前最佳丰富互联网技术应用 中真正 的核心应当是 JavaScript 目前的趋势是需要用 JavaScript 这种程序语言来重构网 页 用 JavaScript 来格式化数据 而 XMLhttp 是一种传输数据的桥梁和协议 与 原来 GET 和 POST 相类似 而 XMLhttp 很好地为 JavaScript 服务罢了 JavaScript 具有面向对象的概念 也可以继承类和抛出异常 程序开发者已经 意识到 JavaScript 语言的重要性 对于无论是前端还是后台开发人员 JavaScript 都不只是简单的脚本 在一个项目当中 尤其网页开发项目 JavaScript 几乎是必不可少的语言 它 不要编译器 也不需要专门的解析器 只要客户端机器上有浏览器 只要把开源 的 JavaScript 引擎加入浏览器中 几乎所有的浏览器都支持 所有的电脑都有浏览 器 不管是电脑还是手机 JavaScript 都将很好地被支持 而使用 JavaScript 至少有下面这几点好处 1 增加交互动态应用 丰富界面应用 提高用户体验 第 2 章 WEB2 0 介绍9 2 节省后台开发成本 减少后台开发量 显示 HTML XHTML 和格式化数据交 给 JS 处理 3 节省网络带宽 让浏览速度更快 减轻服务器压力 XMLhttp 减少刷新数据 4 体现 RIA B S 模式的利器 通过 JS 可以达到 C S 模式的效果 5 WEB 版软件最好的界面实现者 Flash Applet 也还不错 不过目前 JavaScrip 是最好的 浏览器的兼容性或者用户屏蔽 JS 虽然是个头疼的问题 但绝大多数浏览器 都在遵循 ECMAScript1 5 标准 大多数用户是不会禁用 JS 的 因为关闭 JS 使用 互联网几乎是件困难的事 虽然还有安全 开发和维护成本等等的不利因素在里面 但如果把 JavaScript 很好地与后台结合起来 JavaScript 将是网页开发非常重要的一门语言 甚至不亚 于 Java 现在利用 Java php 做后台的网站越来越多 而再有效结合 JavaScript 利用 JavaScript 来处理和显示页面 这样 丰富互联网应用 提高用户体验将成 为可能 RIA 发展是个趋势 B S 模式也是一个趋势 JavaScript 也还在一直向前发展 新的版本也在研究 我相信随着 WEB2 0 这种用户与网站以及用户之间的彼此 交互应用越来越多 也随着网络带宽越来越快 RIA 将会有一个很好的发展 而 JavaScript 在 RIA 中也将发挥越来越重要的作用 2 4 4 Prototype 库介绍 prototype js 是 Sam Stephenson 写的一个 Javascript 的框架 实际上是一个函 数库 该框架首页是 http www prototypejs org Prototype 对 JavaScript 做了 大量的扩展 而且很好的支持 Ajax Prototype 具备兼容各个浏览器的优秀特性 使用它可以不必考虑浏览器兼容性的问题 目前的版本是 1 0 6 3 版 11 Prototype 对 JavaScript 的内置对象 如 String 对象 Array 对象等 进行了很 多有用的扩展 同时它也新增了不少自定义的对象 包括对 Ajax 开发的支持等 都是在自定义对象中实现的 Prototype 可以帮助开发人员实现以下的目标 对字符串进行各种处理 基于 Google Maps API 的应用开发 10 使用枚举的方式访问集合对象 以更简单的方式进行常见的 DOM 操作 使用 CSS 选择符定位页面元素 发起 Ajax 方式的 HTTP 请求并对响应进行处理 监听 DOM 事件并对事件进行处理 第三章 Google API 技术 11 第三章 Google API 技术 3 1 Google API 概述 3 1 1 Google API 定义 Google 地图 API 是 Google 的 AJAX API 的一个组成部分 Google 地图 API 是 Google 公司推出编程接口 可以让全世界对 Google 地图有兴趣的程序开 发人员自行开发基于 Google 地图的服务 建立自己的地图网站 程序开发人员 可以使用 JavaScript 将 Google 地图嵌入自己的网页中 API 提供了大量实用工 具用以处理地图 如 网页上的地图 并通过各种服务向 地图添加内容 从而使程序开发人员可以创建功能强大的地图应用程序 如图 3 1 所示 图 3 1 谷歌 AJAX 接口内容 基于 Google Maps API 的应用开发 12 3 1 2 Google API 技术的特点 Google 地图 API 的第一个特点是入门简单 可以使用 JavaScript 和 HTML 完整构建内容丰富的动态网站 只需使用几行 JavaScript 就可以向网站中添加 地图应用 第二个特点是可以结合其他应用 在 Google 地图 API 中可使用 Google Mapplets 构建嵌入 Google 地图站点中的迷你应用程序或者使用 Google 街道视图将街道视图全景对象集成到地图 API 应用程序中 第三个特点是更新 速度快 到目前为止 Google 地图 API 已经推出第二版 并且在不断增加新的 功能 3 1 3 Google API 对于互联网意义 几年以前 在互联网上使用地图极不方便 那时的网络 GIS 系统多半基于 Microsoft ActiveX 技术或 Sun Java Applet 技术 这些产品使用起来十分笨重 而 且需要另行安装辅助工具进行加载 不过这一切已经成为往事 Google 地图服务 一经推出便改变了这一切 Google 推出的全新的地图服务与 Gmail 服务一样 完 全基于 Ajax 技术实现 全新的用户体验让人耳目一新 众多的网民这才发现原 来网络地图还可以这样使用 正是由于 Google 地图服务的极大成功 吸引了像 Yahoo MSN 等众多强有力的竞争对手进入该领域参与角逐 在不断的竞争中 地图服务的品质得到极大的提高 12 3 2 Google API 语法规范 3 2 1 基础语法 JavaScript 对于浏览器兼容的问题 Google API 提供了一个全局方法 GBrowserIsCompatible 进行检查 对于不兼容的浏览器版本 该方法不产生行 为 需要开发人员自行决定在不兼容浏览器下的行为 Google API 推荐使用 xhtml 并在页面开始处写 xhtml 的 DOCTYPE 目的使 得浏览器的显示可以预期 第三章 Google API 技术 13 3 2 2 Google API 规范 使用 Google API 首先要申请 Google 的 API 密钥 此密钥是与用户的域名相 关的一串加密后的字符串 需要用 Google 的帐户来申请 此密钥的申请和使用 是免费的 对每天可使用 Maps API 生成的页面浏览量没有限制 如果每天需要 的页面浏览量超过 50 万 需要与 Google 公司提前联系 Google 公司要求应用 API 的产品必须让最终用户免费使用 在 Maps API 中不含广告 但是要求保留 地图上的徽标和归属内容 获得 API 密钥以后就可以在页面中加入 Google 提供的 JavaScript 库 如果需 要显示诸如控件名称 版权说明和驾车指南的文本信息时 默认使用英语 改变 语言可以在标签中加入 hl 参数 如 script type text javascript src 当加载页面时调用此函数 function initialize var map new google maps Map2 document getElementById map map setCenter new google maps LatLng 37 4419 122 1419 13 google setOnLoadCallback initialize 在地图上显示折线时 要在元素中增加命名空间 xmlns v urn schemas microsoft com vml 这样才能保证在 IE 浏览器中正常显示 3 2 3 Google Maps API 几个主要对象 GMap2 类是谷歌地图的基础类 这个类可以在页面上定义一个地图 可以 创建多个对象以显示多个地图 创建对象时 使用 JavaScript 的 new 操作符创建 该类的一个实例 构造方法是 GMap2 container opts container 是显示地图的 html DOM 容器 一般使用 div 元素 可以通过 document getElementById 方 法来取得 div 元素的一个引用 创建 GMap2 的实例以后 马上要执行 GMap2 类的 setCenter 方法来完成地 图的初始化 这个方法有两个参数 第一个参数用一个 GLatLng 对象指定地图的 中心点 第二个参数指定地图的缩放级别 目前中国地图只有普通地图 但是谷歌地图 API 可以支持其他模式的地图 可以用 GMap2 类的 setMapType 方法指定地图的模式 GMap2 类的 openInfoWindow 方法可以建立一个信息窗口 这个方法接 受两个参数 一个点和一个 DOM 元素 可以在地图上显示一个固定到给定点的 信息窗口 GLatLng 类是使用很频繁的一个类 这个类通过纬度和经度确定地图上的一 个位置 许多方法都有这个参数 第三章 Google API 技术 15 谷歌地图上与很多可以改变地图属性的 UI 元素 官方文档称为 控件 这 些控件具有很多功能 可以改变地图的缩放级别 改变地图的类型 增加搜索项 显示版权信息等等 可以使用 GMap2 方法 addControl 向地图添加控件 该方 法的参数可以指定增加控件的种类和位置 叠加层 Overlay 是地图上绑定到经度 纬度坐标的对象 会随您拖动或缩放 地图而移动 叠加层表现为 添加 到地图上以指明点 线或区域的对象 13 地图 API 有以下几种叠加层 标记 Marker 折线 Polyline 多边形 Polygon 图块叠加层 Tile overlay 和信息窗口等 每个叠加层都实现 GOverlay 接口 可以使用 GMap2 addOverlay 方法向 地图添加叠加层 使用 GMap2 removeOverlay 方法删除叠加层 信息窗口会默 认加载到地图中 标记默认是气球状不可拖拽的元素 可以更改 draggable 属性使标记可以拖 拽 也可以改变 image 属性的路径改变默认图片 不过要选择和默认大小相同的 图片以得到最好的效果 在地图上显示大量标记的情况下 可以加载一个不属于 谷歌地图 API 的 JavaScript 包来使用标记管理器 这样可以提高显示的效率和在 特定缩放级别下的显示效果 折线可以使用 GPolyline 对象创建 GPolyline 的构造方法接受一个 GLatLng 对象的数组 并且按照这个数组的顺序显示折线 在底层 该方法在 IE 浏览器 中调用 VML 在其他浏览器中调用 SVG 来绘制折线 可以在参数中指定 绘制 符合地理学意义的侧地线 即在地球上显示距离最短的线 不过 在小范围内使 用折线时 两者区别不大 谷歌提供了一个算法 可以将一系列的 GLatLng 对象编码 这样可以提高使 用效率 静态编码可以使用谷歌提供的交互工具 如果要在服务器上动态生成编 码 可以从谷歌得到编码算法 绘制多边形可以使用 GPolygon 对象 该对象和 GPolyline 对象的使用方法相 似 底层也是调用浏览器提供的矢量图形绘制功能 GGroundOverlay 对象用来在地图上显示图片 这个功能可以用来制作历史地 图 基于 Google Maps API 的应用开发 16 3 2 4 Google Maps API 的事件处理 谷歌 API 的事件模型和浏览器提供的事件模型不一样 使用谷歌地图 API 的 事件模型的时候 可以不考虑浏览器之间的差异 在谷歌地图中使用事件模型可以通过 GEvent 名称空间中的工具函数来实现 例如在注册事件时 可以使用静态方法 GEvent addListener 这个方法带有三个 参数 可以指定事件发生时的对象 接受的事件和回调函数 如果不需要某个事 件侦听器了 可以使用 removeOverlay 函数删除事件侦听器 3 2 4 Google Maps API 提供的服务 谷歌地图提供一些很有用的服务 而且还在不断增加 例如 XML 和数据 解析 地址解析 街道视图全景对象 本地搜索 KML 和 GeoRss 叠加层 交通 叠加层和驾车指南 GXmlHttp 和 GDownloadUrl 方法可以分别以不同的方式提供独立于浏览器 的 XmlHttpRequest 对象 然后使用 GXml 对象进行解析 驾车指南可以提供两种形式的返回 一种是基于地图显示的 另一种是文本 形式的 地图显示形式的可以在地图上显示出路线 文本形式的可以给出行驶提 示 比如何处转弯 大约行驶时间等 谷歌地图 API 使用 GDirections 对象提供 驾车指南功能 这个对象的构造方法接受两种形式的查询 一是字符串形式 另 一个是经纬度形式 驾车指南的返回对象是 GMap2 对象或 div 元素 在执行查询 的过程中 可以捕捉事件进行处理 第四章 编程实现基于 Google API 的公交应用 17 第四章 编程实现基于 Google API 的公交应用 4 1 需求分析 4 1 1 功能需求 本网站程序具有如下功能 1 查询功能 可以输入起始站点和终到站点的名字 返回到达的路线 2 显示功能 用户返回的路线可以使用谷歌地图接口形象直观的显示出来 3 交互功能 如果没有合适的路线 或者用户给出的信息不详细 可以让用户 选择更详细的选项 和用户完成交互 4 1 2 性能需求 1 精确度要求 公交站点的经纬度在小数点后五位 可以在城市地图中精确显 示公交站点的位置 2 反应时间要求 网站返回时间一般在 20 秒以内 可能的时间瓶颈在数据库查 询 网站访问并发数和浏览器解析 正常情况下 网站返回时间在用户可以接受 的范围内 3 适应性 由于使用谷歌地图的 API 所以网站设计中浏览器兼容的问题可以很 好解决 符合标准的现代浏览器都可以运行 4 可重用性 前台程序运行在一个 div 元素中 可以利用其他程序插入网页中 与外部的耦合度较低 4 1 3 运行需求 1 硬件接口 支持一般 PC 台式机 笔记本电脑 2 软件接口 页面运行在 IE7 和 firefox2 以上版本及其他支持 web 页面标准的浏 览器 后台程序运行在 suse 系统的 apache 服务器上 基于 Google Maps API 的应用开发 18 3 用户接口 使用浏览器界面 需要支持 JavaScript 和 XML 解析 支持标准鼠 标和键盘 4 2 总体设计 4 2 1 功能模块设计 完成以上需求分析之后 就可以进行功能模块的分析了 图 4 1 表示了各功 能模块的关系 图 4 1 程序模块设计 下面简单介绍一下这一程序模块 1 浏览器模块 网站的用户界面是在浏览器上实现的 浏览器主要的功能就是 支持浏览器标准 正确显示谷歌地图 并且在接受后台数据以后可以进行解析 2 Google Maps API 模块 在这个网站中 使用的是 G 前缀的 API 接口 没有使 用 AJAX 的接口 3 PHP 模块 这个模块的程序运行在 suse 系统上的 apache 服务器上 采用 PHP5 的标准 4 Mysql 数据库模块 这个模块可以运行在本机 也可以在数据库服务器上 浏 览 器 XML 解析 JavaScript 浏览器标准 Google Maps API PHP 后台程序Apache 服务器 Suse 操作系统 MySQL 数据库 第四章 编程实现基于 Google API 的公交应用 19 4 2 2 算法与数据结构 网站的数据结构主要涉及以下几个方面 1 XML 的解析 在前台和后台传递数据的时候 选择了 XML 格式进行传递 采用这种格式 可以减少前台和后台之间的耦合性 如果改变程序的数据 仅改 变对 XML 的解析就可以了 2 数据库的设计 数据库的设计主要考虑到了公交站点的数据一次输入以后 改动不多 但是查询的请求量会很大 网站的算法尽可能简单 不采用过于复杂的算法 在 SQL 语句的设计上注意 针对 MySQL 的特点选择效率较高的查询语句 4 2 3 界面设计 根据以上对程序的分析 基本的界面设计如下 图 4 2 初步界面设计 如图 4 2 所示 这个界面设计比较简单 全部放在一个 div 中 需要的美化 工作全部交给 css 完成 必要的动态设计也可以使用 JavaScript 来实现 这方面的 要求和功能性的需要尽可能分离 交互区用来输入用户查询的站点 显示文字提 示 地图显示区用来显示地图 4 3 开发环境 4 3 1 操作系统 suse10 0 介绍 suse 首先要介绍 Linux Linux 是芬兰赫尔辛基的一位名叫 Linus Torvalds 的大学生在 1991 开发的一个类 unix 操作系统 该操作系统在 GPL 协议 地图显示区交互区 基于 Google Maps API 的应用开发 20 下发布 所以在 Linux 内核的开发过程中 全世界许多的程序开发者都参与到了 Linux 内核的开发过程中 目前的 Linux 分发版主要有 Red Hat Linux SUSE Linux Debian 等 分发版中将众多使用的开源软件和 Linux 系统打包在了一起 并且在有的分发版中提供了一些特别的工具 以方便用户的使用 通常意义上的 Linux 就是指各种 Linux 的分发版 14 Linux 现在已经广泛应用在服务器领域 这主要是由于 Linux 具有很多优点 稳定性 Linux 的优秀的内存管理和设计方式使 Linux 可以连续运行 很长时间不需要重新加载 安全性 Linux 的开源特性使得从发现漏洞到修补漏洞的过程大大缩 短 效率 Linux 对硬件使用效率高 特别是在服务器领域 Linux 可以 完全在命令行下运行 避免了 GUI 对资源的占用 成本 Linux 可以以很低的成本获得 SUSE Linux 发展之初是以 Slackware Linux 为基础 并提供完整德文使用界 面的产品 1992 年 Peter McDonald 成立了 Softlanding Linux System SLS 这个发 行版 SuSE 于 1992 年末创办 1994 年 首次推出了 SLS Slackware 的安装光碟 命名为 S u S E Linux 1 0 其后综合了 Florian La Roche 的 Jurix distribution 也是 一个基于 Slackware 的发行版 于 1996 年推出一个完全自家打造的发行版 S u S E Linux 4 2 其后 SUSE Linux 采用了不少 Red Hat Linux 的特质 使用 RPM 及 etc sysconfig S u S E 后来改称 简短为 SuSE 意思为 Software und System Entwicklung 那是一句德文 英文为 Software and system development 现在这 家公司的名字再度更改成 SUSE Linux SUSE 一字已经不包含甚么意义了 2003 年 11 月 4 日 Novell 收购 SuSE 2005 年 Novell 提出新的开发计划名 为 openSUSE 目前最新版为 SUSE Linux 10 3 测试版 SUSE 包含了一个安装及系统管理工具 YaST2 它能够进行磁盘分割 系统 安装 在线更新 网络及防火墙组态设定 用户管理和其他更多的工作 它为原 来复杂的设定工作提供了方便的组合界面 SUSE 收录了 Linux 下的多个桌面环境如 KDE 和 GNOME 及一些窗口管理器 第四章 编程实现基于 Google API 的公交应用 21 YaST2 安装程序也会让使用者选择使用 GNOME KDE 或者不安装图形界面 SUSE 已经为使用者提供了一系列多媒体程序如 K3B CD DVD 烧录 amaroK 音 乐播放器 和 Kaffeine 影片播放器 它也收录了 OpenOffice org 以及其他的文字 阅读 处理软件 如 PDF 格式文件阅读软件等 最新的版本 SUSE Linux 10 1 分别有零售版本及自由 开放源码的版本 叫 作 SUSE Linux OSS SUSE Linux 提供了一个企业服务器版本 名为 SUSE Linux Enterprise Server 可以免费取得 但如果不付款 它只提供 30 天的更新服务 4 3 2 服务器 apache2 Apache 是全世界市场占有率最高的网站服务器 除提供基本的 HTTP 通信协 议外 对于虚拟主机 网络安全传输规格 SSL 及 PHP 等程序模块的扩充功能都 有支持 在各方面的测试下所展现的高稳定性与高性能使得它成为网站服务器的 首选 目前可以在 Linux Windows Solaris 等多种平台上运行 目前由 http www apache org 来维护 Apache 这一套软件 15 4 3 3 数据库 mysql5 0 22 MySQL 是一个 SQL 关系式数据库 由于执行效率与稳定性高 操作简易 所以用户众多 官方文件中这么说 MySQL 是一个真正的多用户 多线程的 SQL 数据库服务器 SQL Structured Query Language 结构化查询语言 是世 界上最流行的和标准化的数据库语言 SQL 是一种标准化的语言 它使得存储 更新和访问信息更容易 同时 MySQL 也足够快和灵活以允许你保存记录文件和 图像 MySQL 主要特点是快速 稳定和易用 简单来说 这个东西就是一个数据 库软件 也有提供网页式的操作管理界面 简单易学 管理方便 15 4 3 4 开发语言 PHP5 PHP 即 PHP Hypertext Preprocessor 是一种被广泛使用的开放源代码多 用途脚本语言 尤其适用于 web 开发并可以嵌入到 HTML 中去 其语法利用 了 C Java 和 Perl 非常容易学习 该语言的主要目标是让 web 开发人员可以 基于 Google Maps API 的应用开发 22 很快写出动态生成的网页 但 PHP 的功能远不止如此 16 PHP 最初是 1994 年 Rasmus Lerdorf 创建的 2004 年 7 月 13 日推出了 PHP 5 版 这一版本使用了第二代的 Zend 引擎 强化了面向对象功能 目前 PHP5 是 唯一在开发的 PHP 版本 PHP 可以做为一个功能模块加载到 apache 服务器中运行 PHP 是动态网页 的支持模块 提供程序员开发浏览器界面 Web BASE 系统的功能 扩充性强 几乎支持包括 Oracle 在内的所有数据库的 SQL 查询 包括 LDAP 和 POP3 在内 的多种通信协议 包括 XML XSL PDF FLASH 等