联合使用 HTML 5、地理定位 API

查找并跟踪位置坐标以用在各种 Web 服务中

在这个由五个部分所组成的系列的第一部分中，您将接触到移动 Web 应用程序中最流行的新技术：地理定位。高端智能手机都内置 GPS，现在您将了解 Web 服务如何使用它。在本文中，您将学到如何使用各种地理定位标准，以及如何使用流行的 Web 服务来创建有趣的移动混搭程序。

关于本系列​

HTML 5 是一项让人振奋的技术，这有着充分的理由。这将会是一次技术突破，因为它可以将桌面应用程序功能带入浏览器中。除了传统浏览器外，对于移动浏览器，其潜力甚至更大。不仅如此，最流行的移动浏览器甚至已经采用并实现了 HTML 5 规范中很多重要部分。在这个由五个部分组成的系列里，您将仔细了解 HTML 5 中的一些新技术，它们对移动 Web 应用程序开发具有重大影响。在本系列的每一部分中，您将动手开发一个展示 HTML 5 新特性的移动 Web 应用程序，这些特性可用于最新的移动 Web 浏览器上，如那些基于 iPhone 和 Android 的设备。

常用缩略语

• API: 应用程序编程接口

• CSS: 层叠样式表
• GPS: 全球定位系统
• HTML: 超文本标记语言
• JSONP: 带填充的 JSON
• SDK: 软件开发工具包
• UI: 用户界面
• W3C: 万维网联盟
• 先决条件

本文中，您将使用最新的 Web 技术开发 Web 应用程序。这里大多数代码是 HTML、JavaScript 和 CSS — 所有 Web 开发的核心技术。您最需要的东西是用来测试的浏览器。对于本文，强烈建议您使用 Mozilla Firefox 3.5+，因为它是支持地理定位的桌面浏览器。当然，您还需要在移动浏览器上测试，还需要最新的 iPhone 和 Android SDK。在本文中使用的是 iPhone SDK 3.1.3 和 Android SDK 2.1。查看 参考资料

 部分中的链接。

基础知识：了解一下

地理定位本身就是一项新技术。它能让您知道用户在哪。但是仅仅知道这点并报告给用户并不是十分有用。难道所有人都关心自己所在的确切经纬度？这时可以结合其他数据和服务，让这个位置信息变得有用，可以产生一些有趣的结果。这些服务都需要用户的经度和纬度作为输入。这就是所需要的，让我们看看是如何获得的。清单 1

 显示的是这方面的标准 JavaScript API。

清单 1. 找到用户： getCurrentPosition

navigator.geolocation.getCurrentPosition(successCallback, 
errorCallback, options);

这是地理定位中重要的 API。对于一大类应用程序，只需用到这个 API。地理定位对象是标准导航器对象的一部分，它有几个方法，最常用的是getCurrentPosition。访问用户位置是耗时的操作（就像在太空中找个卫星一样！），它还要取得用户的同意。因此这是一个异步操作。它的参数是回调函数：一个用于成功，一个用于失败。

成功函数将通过一个单独的 Position 类型的参数传递。这个对象有两个属性：一个时间戳的属性和称为坐标的 Coordinates 类型的属性。一个 Coordinates 对象有几个属性：

• latitude

• longitude
• altitude
• accuracy
• altitudeAccuracy
• heading
• speed

这些参数不是在所有设备上都可用，除了 latitude、longitude 和 accuracy。如果支持地理定位 API，并且设备可以解析位置，就可以获取 latitude、longitude 和 accuracy。

失败 callback

 函数将传递一个 PositionError 类型参数。PositionError 实例有两个参数：code 和 message。message 是设备特定的，可用于调试。code 有以下三个取值：

• PERMISSION_DENIED (1)

• POSITION_UNAVAILABLE (2)
• TIMEOUT (3)

应用程序将根据 code 向用户友好显示失败消息。

请注意，W3C 规范还允许选择第三个参数。这包含花费多长时间取得用户位置的超时时间。尽管如此，像 iPhone 这样的设备目前还不支持，因此不建议使用。既然已经详细看过 API，看看实际如何使用的例子吧。

与 Twitter 集成

现在 hello world 混搭程序可通过某种方式使用 Twitter。在第一个例子中，将使用 Twitter 的搜索 API。它支持根据位置范围搜索微博。清单 2

 显示的是本地 Twitter 搜索。

清单 2. 本地 Twitter 搜索

（!DOCTYPE html）
（html）
（head）

转载于:https://www.cnblogs.com/yy-5616/p/5062514.html