GoogleMaps探秘.pdf

Ajax 系列讲座之 Google Maps 探秘 演讲人：李锟 Ajax 的兴起 • 什么是 Ajax – Asynchronous JavaScript + XML 的缩写 – 发明人 Jesse James Garrett Ajax: A ew Approach to Web Applications • Ajax 不等同于 XMLHTTP Ajax 采用的技术 • 基于 XHTML/CSS 准的展现 • 使用 DOM 的动态显示和交互 • 使用 XML 和 XSLT 的数据交换和处理 • 使用 XMLHttpRequest 的异步数据获取 • JavaScript 把所有的一切捆绑在一起 Ajax 交互模式与传统交互模式的对比 • 传统的基于 HTML Form 的交互模式 – 传统交互模式的缺点 • Ajax 交互模式 – Ajax 交互模式解决了传统交互模式的缺点，为 用户带来了更好的交互体验 Ajax 不是一种新技术 • 基于 XHTML/CSS/JavaScript 开发的复兴 • 新瓶装旧酒 – 客户端 （浏览器端）技术的重新包装 – 更加适合企业应用，与服务器端结合更加紧密 • 不是某种具体的开发技术或者开发框架 – 浏览器端一系列技术相结合的统称 Ajax 应用的范例 • Google 开发的应用： – Gmail – Google Groups – Google Suggest – Google Maps • 小公司开发的应用 – Bindows – ... Ajax 实例研究—— Google Maps • 主页： • Google Maps 使用到的技术 • Google Maps 使用体验 – 准操作 • 移动 • 缩放 • 拖拽 • 居中 Google Maps 请求格式 • 请求一张完整的地图 – /maps?ll=49.29,- 123.12spn=0.017998,0.027586z=3hl=en • ll ：地图中心的精度和纬度 • spn ：地图的范围 （跨度，分横向和纵向） • z ：地图的缩放级别 • hl ：地图采用的语言 Google Maps 请求方式 • 一张地图由多个小贴图构成 – /mt?v=.1x=50y=20z oom=4 • v ：当前版本号。 .1 被推测为 0.1 版 • x ：图片的 x 索引 • y ：图片的 y 索引 • zoom ：图片的缩放级别 • 在客户端使用固定的算法算出需要的贴图 ，然后 自动请求 • 固定的 URL 使得可以利用浏览器端的缓存 Google Maps 强大的搜索能力 • 基本搜索功能 • 高级搜索功能 • 路径搜索功能 • 使用了隐藏的 IFrame 获取数据以改善交互 体验 – 与浏览器的历史功能相结合 Google Maps 的地图数据格式 • 基于 XML 格式 • 强大描述和定制能力 • 最简形式 ?xml version=1.0? page center lat=49.29 lng=-123.12/ span lat=0.017998 lng=0.027586/ /page • 更复杂的形式 Google Maps 服务器端使用的技术 • 庞大的存储空间 • 廉价 PC 服务器构成的 Linux 集群 • 可能用到的其它技术 Google Maps 的定制 • 提供 自