目前 Google 为 Ajax 技术做出了巨大的投入，Google 这两年推出的一些应用如 Gmail、Google Groups、Google Suggest、Google Maps 等等都采用了 Ajax 的技术。其中最为醒目和最复杂的应用就是 Google Map。下面我将 Google Maps 作为 Ajax 应用的一个典型为大家做一些介绍。
2、Ajax 之实例应用——Google Maps
在做这个演讲之前，我参考网上的一些资料对 Google Maps 做了一些 hack 的工作。目前已经可以做到除了地图图片要从 Google 请求外，其余所有的数据都在本地运行。
但是因为 Google Maps 前台的代码量比较大，并且是经过混淆的。所以整理这些代码花费了比较多的功夫。目前这个工作尚未全部完成。因此以下讲述的内容仅仅是根据我目前的成果。
在做这个演讲之前，我参考网上的一些资料对 Google Maps 做了一些 hack 的工作。目前已经可以做到除了地图图片要从 Google 请求外，其余所有的数据都在本地运行。
但是因为 Google Maps 前台的代码量比较大，并且是经过混淆的。所以整理这些代码花费了比较多的功夫。目前这个工作尚未全部完成。因此以下讲述的内容仅仅是根据我目前的成果。
Google Maps 使用了那些技术？
Google Maps 所使用的技术，基本上就是上面 Ajax 所提到的这些技术。
1. standards-based presentation using XHTML and CSS;
2. dynamic display and interaction using the Document Object Model;
3. data interchange and manipulation using XML and XSLT;
4. asynchronous data retrieval using XMLHttpRequest;
5. and JavaScript binding everything together.
1. standards-based presentation using XHTML and CSS;
2. dynamic display and interaction using the Document Object Model;
3. data interchange and manipulation using XML and XSLT;
4. asynchronous data retrieval using XMLHttpRequest;
5. and JavaScript binding everything together.
Google Maps 的主页在
http://maps.google.com
Google Maps 每一张地图的请求方式是：
http://maps.google.com/maps?ll=49.29,-123.12&spn=0.017998,0.027586&z=3&hl=en
我们看到每一张地图有 4 个参数，按照值来算实际上是 6 个。
ll：地图中心的精度和纬度
spn：地图的范围（跨度，分横向和纵向）
z：地图的缩放级别
hl：地图采用的语言
http://maps.google.com
Google Maps 每一张地图的请求方式是：
http://maps.google.com/maps?ll=49.29,-123.12&spn=0.017998,0.027586&z=3&hl=en
我们看到每一张地图有 4 个参数，按照值来算实际上是 6 个。
ll：地图中心的精度和纬度
spn：地图的范围（跨度，分横向和纵向）
z：地图的缩放级别
hl：地图采用的语言
Google Maps 每一张大的地图实际上都是很多张小的 gif 贴图。普通地图每一张小图片的大小为 128x128 像素，卫星地图每一张小图片的大小为 256x256 像素。每一张小图片都有自己独立的 URL，其格式为：
http://mt.google.com/mt?v=.1&x=50&y=20&zoom=4
其中包括几个参数：
v：当前版本号。.1 被推测为 0.1 版
x：图片的 x 索引
y：图片的 y 索引
zoom：图片的缩放级别。
http://mt.google.com/mt?v=.1&x=50&y=20&zoom=4
其中包括几个参数：
v：当前版本号。.1 被推测为 0.1 版
x：图片的 x 索引
y：图片的 y 索引
zoom：图片的缩放级别。
每张地图需要哪些贴图使用固定的算法算出。然后自动像服务器请求这些贴图。当地图发生任何变化（例如：拖拽、移动、缩放等等）时，都会自动像服务器请求需要的图片。例如刚才我们看到了当地图发生移动时，图片会自动补全新的显示区域。所有的这些计算和处理，全部都是使用 JS 在浏览器端完成的。
因为浏览器有图片的缓存功能，因此如果你经常查看某个相同地区的地图的话，久而久之，浏览器会缓存大量的图片，这样你使用 Google Maps 的性能就会越来越好了。
Google Maps 还有搜索的功能，而且非常强大。我这里录制了一个简单的演示。
Google Maps 还可以完成复杂的搜索，例如搜索 lax 这个地方的旅馆，结果为：
点击地图右边旅馆条目，可以在地图上面出现旅馆的说明。这个说明是使用 XSLT 技术产生的。
还可以搜索两点之间的路径。例如搜索 jfk to 350 5th ave, new york，得到的结果就是带有两点之间路径路径的地图。这里的路径在 IE 上是使用 VML 画的，而在其它浏览器上使用后台自动生成的透明 png 图片舆地图图片叠加产生。因为 IE 完全是在客户端完成，所以 IE 的性能会好一些。
另外 Google Maps 的地图既可以加载在一个 DIV 中，也可以加载在一个 IFRame 中。熟悉 XMLHttp 的朋友知道，出现了 XMLHttp 后，需要通过隐藏的 IFrame 从服务器获得数据的场合已经非常少了。但是 IFrame 还有一些其它的用途。IFrame 比 XMLHttp 有优势的一个地方是 IFrame 可以和浏览器的历史记录结合起来，而 XMLHttp 做不到这一点。就是说如果数据来自于一个 IFrame，以后可以使用浏览器的back和forward功能这样可以带给用户更好的交互体验。比如刚才我们看到的用户搜索完 Boston，可能还想再看看 New York 的地图，他可以简单地使用浏览器的 back 按钮，而不需要重新输入 New York 再查一遍。他如果还想看 Boston 的地图，那么使用 forward 按钮就可以了。
![[8-|]](http://www.aspxclub.com/emoticons/ubb/emotion-15.gif)
![[:#]](http://www.aspxclub.com/emoticons/ubb/emotion-16.gif)
![[:-*]](http://www.aspxclub.com/emoticons/ubb/emotion-17.gif)
![[:^)]](http://www.aspxclub.com/emoticons/ubb/emotion-18.gif)
![[<:o)]](http://www.aspxclub.com/emoticons/ubb/emotion-19.gif)
![[|-)]](http://www.aspxclub.com/emoticons/ubb/emotion-20.gif)
![[mo]](http://www.aspxclub.com/emoticons/ubb/emotion-38.gif)
![[8o|]](http://www.aspxclub.com/emoticons/ubb/emotion-39.gif)
![[^o)]](http://www.aspxclub.com/emoticons/ubb/emotion-40.gif)
![[+o(]](http://www.aspxclub.com/emoticons/ubb/emotion-41.gif)
![[*-)]](http://www.aspxclub.com/emoticons/ubb/emotion-42.gif)
![[8-)]](http://www.aspxclub.com/emoticons/ubb/emotion-43.gif)
![[Z]](http://www.aspxclub.com/emoticons/ubb/emotion-47.gif)
