跳转到主要内容

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

当您初次登录到 developerWorks 时,将会为您创建一份概要信息。您在 developerWorks 概要信息中选择公开的信息将公开显示给其他人,但您可以随时修改这些信息的显示状态。您的姓名(除非选择隐藏)和昵称将和您在 developerWorks 发布的内容一同显示。

所有提交的信息确保安全。

  • 关闭 [x]

当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

所有提交的信息确保安全。

  • 关闭 [x]

开发一个基于位置的动态 mashup

Mashup、地图和快照

Ken Bluttman, 自由 Web 开发人员, Freelance Consultant
Ken Bluttman
Ken Bluttman 在计算机领域工作了将近二十年。在这二十年间,他掌握了多种编程语言并且撰写了六部计算机书籍,而且总是有做不完的事情。

简介:  Mashup 是一种全新的、高度交互的 Web 开发方法。mashup 是来自不同资源的相关内容的综合,为超级用户体验提供了丰富的动态内容。在开发工具箱中加入 Asynchronous JavaScript + XML (Ajax)mashup 将会让您在不断变化发展的 Web 2.0 工作空间所带来的高要求方面游刃有余。

发布日期:  2008 年 11 月 11 日
级别: 中级

访问情况 : 3902 次浏览
评论: 

开始之前

本教程带您亲历了使用 Ajax 动态更新 Web 页面的全过程。这个 Web 页面由多个其它数据源填充的不同部分拼装而成,而使用 Ajax 调用更新其中一部分所需要的数据取自于填充页面另外一部分的数据源。这是 mashup 的基础 — 聚合数据。Ajax 是此过程的关键,因为它让页面的其他部分在无需刷新整个页面的情况下也能更新。具备 Ajax 的基础知识将对您跟随本教程的学习很有帮助;本教程也给出了 Ajax 的概览/回顾以便让您能快速掌握 Ajax。

有关本教程

本教程展示了一种常见的 mashup 技巧并以此为基础进行 mashup 应用的构建。地图在 Web 中十分流行,也是创建优秀 mashup 的原因所在。在本教程中,Google Maps API 提供了地图和地图绘制函数。从地图返回的数据 — 纬度和经度坐标 — 被应用于另一个 API,此 API 由流行的图片 Web 站点 Flickr 提供。Flickr 具备一个终端用户特性,它让您能地理标记 所上传的图片:图片拍摄位置的纬度和经度坐标与此图片相关。

mashup 包括单击 Google 地图并让 Map API 返回您单击之处的坐标。这些值再使用 Ajax 发送给 Flickr API。最终结果是返回由此坐标进行了地理标记后的一系列图片。

在此过程中,还会使用 Flickr API 的一个额外功能:标签。标签(而非地理标记)是描述图片的关键词。比如,您可以将金门大桥的图片标签为 San FranciscobridgeGolden Gatefog(该桥大部分处于大雾之中)等。这些标签由向 Flickr 上传图片的人添加。在本例中,我们不是创建新标签,而是搜索这些标签。

由于此 mashup 包含很多不同的 API,而 Ajax 也在其中,所以本教程按顺序介绍了这些组件:

  1. 展示有关 Google 地图的基础知识。让您了解如何创建并更改它。
  2. 随后,介绍 Ajax,这是因为 Ajax 使用来自 Google 地图的数据。关于 Ajax 的介绍中包括对基本 Ajax 调用的回顾。
  3. 介绍 mashup:来自 Google 地图的纬度和经度坐标通过 Ajax 机制发送给 Flickr API,图片从 Flickr 返回。
  4. 展示使用 Flickr API 的基础知识。让您了解如何获得 Flickr 帐号和使用 Flickr API。

目标

本教程的目标是将您的 Ajax 知识付诸应用,即利用 Ajax 调用将来自一个 API 的数据发送给另一个 API 。几个参数也随此 Ajax 调用发送。由此 Ajax 调用返回的信息随后被格式化以便适合在 Web 页面显示。


先决条件

本教程大部分使用的是 JavaScript 代码。Ajax 并不是一种语言,而是一种在很大程度上依赖于 JavaScript 代码的编程范型。因此,具备 Ajax 的知识将会很有帮助,但如果不具备,那么至少也要具备使用 JavaScript 代码的知识和经验。本教程还假设您了解地图的一些关键特性:距离、坐标和比例尺。


系统要求

具备对 Web 服务器的访问和一个有效的域名是本教程最基本的技术要求。此外,还需要具备向此域添加文件的权限。服务器端语言使用的是 PHP,但服务器端代码很简单。在服务器端,主要是使用代码来查询数据库或从服务检索数据。这些概念在任何一种服务器语言中都很常见,所以用您自己选择的服务器端语言对 PHP 代码进行重写应该不难。

1 页,共 9 | 后一页

评论



static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development, XML, Open source
ArticleID=350888
TutorialTitle=开发一个基于位置的动态 mashup
publish-date=11112008
author1-email=ken_@kenbluttman.com
author1-email-cc=cmwalden@us.ibm.com

标签

Help
使用 搜索 文本框在 My developerWorks 中查找包含该标签的所有内容。

使用 滑动条 调节标签的数量。

热门标签 显示了特定专区最受欢迎的标签(例如 Java technology,Linux,WebSphere)。

我的标签 显示了特定专区您标记的标签(例如 Java technology,Linux,WebSphere)。

使用搜索文本框在 My developerWorks 中查找包含该标签的所有内容。热门标签 显示了特定专区最受欢迎的标签(例如 Java technology,Linux,WebSphere)。我的标签 显示了特定专区您标记的标签(例如 Java technology,Linux,WebSphere)。