查找并跟蹤位置坐標(biāo)以用在各種 Web 服務(wù)中

在這個(gè)由五個(gè)部分所組成的系列的第一部分中，您將接觸到移動(dòng) Web 應(yīng)用程序中最流行的新技術(shù)：地理定位。高端智能手機(jī)都內(nèi)置 GPS，現(xiàn)在您將了解 Web 服務(wù)如何使用它。在本文中，您將學(xué)到如何使用各種地理定位標(biāo)準(zhǔn)，以及如何使用流行的 Web 服務(wù)來(lái)創(chuàng)建有趣的移動(dòng)混搭程序。

關(guān)于本系列?

HTML 5 是一項(xiàng)讓人振奮的技術(shù)，這有著充分的理由。這將會(huì)是一次技術(shù)突破，因?yàn)樗梢詫⒆烂鎽?yīng)用程序功能帶入瀏覽器中。除了傳統(tǒng)瀏覽器外，對(duì)于移動(dòng)瀏覽器，其潛力甚至更大。不僅如此，最流行的移動(dòng)瀏覽器甚至已經(jīng)采用并實(shí)現(xiàn)了 HTML 5 規(guī)范中很多重要部分。在這個(gè)由五個(gè)部分組成的系列里，您將仔細(xì)了解 HTML 5 中的一些新技術(shù)，它們對(duì)移動(dòng) Web 應(yīng)用程序開(kāi)發(fā)具有重大影響。在本系列的每一部分中，您將動(dòng)手開(kāi)發(fā)一個(gè)展示 HTML 5 新特性的移動(dòng) Web 應(yīng)用程序，這些特性可用于最新的移動(dòng) Web 瀏覽器上，如那些基于 iPhone 和 Android 的設(shè)備。

常用縮略語(yǔ)

• API: 應(yīng)用程序編程接口

• CSS: 層疊樣式表
• GPS: 全球定位系統(tǒng)
• HTML: 超文本標(biāo)記語(yǔ)言
• JSONP: 帶填充的 JSON
• SDK: 軟件開(kāi)發(fā)工具包
• UI: 用戶界面
• W3C: 萬(wàn)維網(wǎng)聯(lián)盟
• 先決條件

本文中，您將使用最新的 Web 技術(shù)開(kāi)發(fā) Web 應(yīng)用程序。這里大多數(shù)代碼是 HTML、JavaScript 和 CSS — 所有 Web 開(kāi)發(fā)的核心技術(shù)。您最需要的東西是用來(lái)測(cè)試的瀏覽器。對(duì)于本文，強(qiáng)烈建議您使用 Mozilla Firefox 3.5+，因?yàn)樗侵С值乩矶ㄎ坏淖烂鏋g覽器。當(dāng)然，您還需要在移動(dòng)瀏覽器上測(cè)試，還需要最新的 iPhone 和 Android SDK。在本文中使用的是 iPhone SDK 3.1.3 和 Android SDK 2.1。查看?參考資料

?部分中的鏈接。

基礎(chǔ)知識(shí)：了解一下

地理定位本身就是一項(xiàng)新技術(shù)。它能讓您知道用戶在哪。但是僅僅知道這點(diǎn)并報(bào)告給用戶并不是十分有用。難道所有人都關(guān)心自己所在的確切經(jīng)緯度？這時(shí)可以結(jié)合其他數(shù)據(jù)和服務(wù)，讓這個(gè)位置信息變得有用，可以產(chǎn)生一些有趣的結(jié)果。這些服務(wù)都需要用戶的經(jīng)度和緯度作為輸入。這就是所需要的，讓我們看看是如何獲得的。清單 1

?顯示的是這方面的標(biāo)準(zhǔn) JavaScript API。

清單 1. 找到用戶： getCurrentPosition

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

這是地理定位中重要的 API。對(duì)于一大類應(yīng)用程序，只需用到這個(gè) API。地理定位對(duì)象是標(biāo)準(zhǔn)導(dǎo)航器對(duì)象的一部分，它有幾個(gè)方法，最常用的是getCurrentPosition。訪問(wèn)用戶位置是耗時(shí)的操作（就像在太空中找個(gè)衛(wèi)星一樣！），它還要取得用戶的同意。因此這是一個(gè)異步操作。它的參數(shù)是回調(diào)函數(shù)：一個(gè)用于成功，一個(gè)用于失敗。

成功函數(shù)將通過(guò)一個(gè)單獨(dú)的?Position?類型的參數(shù)傳遞。這個(gè)對(duì)象有兩個(gè)屬性：一個(gè)時(shí)間戳的屬性和稱為坐標(biāo)的?Coordinates?類型的屬性。一個(gè)?Coordinates?對(duì)象有幾個(gè)屬性：

• latitude

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

這些參數(shù)不是在所有設(shè)備上都可用，除了 latitude、longitude 和 accuracy。如果支持地理定位 API，并且設(shè)備可以解析位置，就可以獲取 latitude、longitude 和 accuracy。

失敗?callback

?函數(shù)將傳遞一個(gè)?PositionError?類型參數(shù)。PositionError?實(shí)例有兩個(gè)參數(shù)：code 和 message。message 是設(shè)備特定的，可用于調(diào)試。code 有以下三個(gè)取值：

• PERMISSION_DENIED (1)

• POSITION_UNAVAILABLE (2)
• TIMEOUT (3)

應(yīng)用程序?qū)⒏鶕?jù) code 向用戶友好顯示失敗消息。

請(qǐng)注意，W3C 規(guī)范還允許選擇第三個(gè)參數(shù)。這包含花費(fèi)多長(zhǎng)時(shí)間取得用戶位置的超時(shí)時(shí)間。盡管如此，像 iPhone 這樣的設(shè)備目前還不支持，因此不建議使用。既然已經(jīng)詳細(xì)看過(guò) API，看看實(shí)際如何使用的例子吧。

與 Twitter 集成

現(xiàn)在 hello world 混搭程序可通過(guò)某種方式使用 Twitter。在第一個(gè)例子中，將使用 Twitter 的搜索 API。它支持根據(jù)位置范圍搜索微博。清單 2

?顯示的是本地 Twitter 搜索。

清單 2. 本地 Twitter 搜索

（!DOCTYPE html） （html） （head）

轉(zhuǎn)載于:https://www.cnblogs.com/yy-5616/p/5062514.html

總結(jié)

以上是生活随笔為你收集整理的联合使用 HTML 5、地理定位 API的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。