用Ajax开发GoogleMap与Flicker MushUp应用.pdfVIP

MushUp应用 ax开发GoogleMap与Flicker i用Aj 乏……～。 吴亚峰 苏亚光 索依娜 Web2．0应用。通过实际案例的开发，向读者介绍了如 务的世界各地旅游景点导航MushUp 何使用Ajax进行GoogleMap地图应用的开发，以及如何使用Google 图片服务中相关的图片资源。 关键词：Ajax；GoogleMap；Flickr；MushUp (1)左上部分用于显示对应景点附近的地图。 一、背景 (2)左下部分为提供用户控制功能的面板。 随着Web2．0时代的到来，Ajag已经成为web应用程序客(3)右上部分的列表用来记录已经浏览过景点的历史信 户端开发的利器，通过Ajax可以非常方便地开发出各种良好息。 用户体验的富客户端应用。 (4)右下部分用来显示当前正在浏览景点的图片。 在这种背景下。Google、Flicker等国际知名企业与组织也 分别对AjaX开发提供了丰富的支持，基本情况如下所列。 1．OoogleMap是由Google提供的全球地图信息系统，其中 不但有传统的地图还可以方便地查阅对应地点的卫星图片。同 时GoogleMap支持使用Aj麟进行二次开发。可以通过Ajax开 发出各种需要地图、导航的应用，如本例中的世界各地旅游景 点地图导航。 2．Flicker是Internet上非常著名的一个图片分享系统，其 中的图片资源异常丰富，几乎囊括了世界各地的各个方面。如 本例中使用C,oosleFeed与Ajax的结合，通过Internet从Flicker 上即时获取对应旅游景点的图片信息。 从前面的背景知识介绍中可以看出，本例中使用的信息来 自于多个信息提供者，如旅游景点地图来自于GoogleMap，旅 游景点的图片来自Flicker。这种应用开发的方式就是 MushUp，具体说就是将Intemet上存在的各种应用、信息根据 自己的需要进行组合、开发，这也是现在Web2．0应用开发的 一个重要方向。 二、功能 本文将结合旅游景点导航Web应用的开发来介绍Aj腻、 Feed与Flicker在开发中的使用，下面首先 GoogleMap、Goosle 对本Web应用的功能、界面进行简单的介绍。 1．Web应用的界面 本应用主要包含一个界面，其中分成四个部分，每部分用 于显示不同的信息，如图l所示。界面中每一部分的用途如下 图2卫星图像模式下的Web应用界面 所列： 万方数据 ，’。。。。‘‘。。。‘‘。。‘。。。’。‘。。。‘。。。。‘‘。。。。。。。。‘。。。。。‘。‘。。’‘。。。。。。。。。。。。‘‘。 实用第-／智慧密集 ．．．．．．．．．．．．．．．．．．．．-．．．．．-．．．-．．．．．．．．-．-．．．．．．．．．．．．．．．．．．．．．．．．．．—， 2．Web应用实现的主要功能 ／div／td／tr (1)在左下侧面板的“景点名称”文本框中输入需要的景 trtddivid=。ControlDiv。 b景点名称／b 点名称并按下“查询”按钮，应用会在地图上弹出气球及信息 框，指示对应景点所在的位置，同时右下侧会播放对应景点的 宫”nbsp； 图片幻灯片，左下侧会显示景点的经纬度。