HTML5移动应用开发第1章：用HTML5、地理定位API和Web服务来开发

名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。

本篇文章的具体介绍如下

网页网页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

JavaScript Code 复制内容到剪贴板

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

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

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

JavaScript Code 复制内容到剪贴板

latitude
longitude
altitude
accuracy
altitudeAccuracy
heading
speed

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

失败 callback 数据库函数将传递一个 PositionError 类型具体参数。PositionError 具体相关有两个具体参数：code 和 message。message 是设备特定的，可用于调试。code 有以下三个取值：

JavaScript Code 复制内容到剪贴板

PERMISSION_DENIED (1)
POSITION_UNAVAILABLE (2)
TIMEOUT (3)

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

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

与 Twitter 集成

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

清单 2. 本地 Twitter 搜索

XML/网页hTML Code 复制内容到剪贴板

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width"/>
<title>Local Twitter Search</title>
<script type="text/javascript">
function startSearch(){
var gps = navigator.geolocation;
if (gps){
gps.getCurrentPosition(searchTwitter,
function(error){
alert("Got an error, code: " error.code " message: "
error.message);
});
} else {
searchTwitter();
}
}
function searchTwitter(position){
var query = "http://search.twitter.com/search.json?callback=showResults&q=";
query = $("kwBox").value;
if (position){
var lat = position.coords.latitude;
var long = position.coords.longitude;
query = "&geocode=" escape(lat "," long ",50mi");
}
var script = document.createElement("script");
script.src = query;
document.getElementsByTagName("head")[0].appendChild(script);
}
</script>
</head>
<body>
<div id="main">
<label for="kwBox">Search Twitter:</label>
<input type="text" id="kwBox"/>
<input type="button" value="Go!" onclick="startSearch()"/>
</div>
<div id="results">
</div>
</body>
</html>

用户可以在文本框输入搜索条目。单击按钮相关调用 startSearch 数据库函数。此处就使用地理定位 API。首先检查其是否可用。如果可用，就相关调用 getCurrentPosition API。如回调成功，就使用 searchTwitter 数据库函数。如果 callback 数据库函数失败，就传递一个显示失败信息的终止具体参数。

如果浏览器成功找到位置，就相关调用 searchTwitter 数据库函数。这里使用传递给数据库函数的位置来向 Twitter 搜索查询添加 geocode 具体参数。清单 2搜索指定位置 50 英里内的帖子。为了相关调用 Twitter，要使用动态脚本网页文章标签，这是一项常称为 JSONP 的技术。Twitter 搜索 API 对此提供支持，它允许直接从浏览器相关调用 Twitter 搜索，不需要服务器。这由查询中的 callback 具体参数指出。请注意它设置成 showResults。这是所要相关调用的数据库函数名称。在清单 2 中未显示，因为这只是用来创见 UI，但在本文的源具体代码中已有包含（查看下载）。图 1 显示的是清单 2 中具体代码的屏幕截图，这是在 iPhone 上运行的。

图 1. 从 iPhone 上搜索 Twitter

本应用程序和其他位置感知应用程序一样，只要一次获得位置。尽管如此，其他应用程序在用户移动时要保持追踪。这些应用程序需要使用其他更高级的地理定位 API。

更高级的内容：追踪

有时候应用程序不只需要知道用户的当前位置，还需要在用户每次改变位置时及时更新。有个用于此目的的 API，是watchPosition。它与 getCurrentPosition 很相似，接收同样的具体参数。最大的不同是它返回 ID。这个 ID 可与最后的地理定位 APIclearWatch 联合使用。该数据库函数会用到从 watchPosition 获得的 ID。当您相关调用 watchPosition，浏览器将会一直向您传入的成功回调数据库函数发送更新，直到相关调用 clearWatch。持续不断获取用户位置信息将会耗尽设备资源，所依请谨慎使用这些 API。现在看看例子。

与 Google 地图集成

本例中，您将使用 Google 地图 API。这些 API 已对使用移动设备进行了优化，尤其是对 iPhone 和 Android 平台。这使得它们对移动 Web 开发建设人员很有吸引力，尤其是位置感知应用程序。以下的应用程序示例将会在地图上显示用户位置，并且在每次用户改变位置时更新。清单 3 是映射具体代码。

清单 3. 使用 Geolocation 映射应用程序

XML/网页hTML Code 复制内容到剪贴板

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>I'm tracking you!</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=true"></script>
<script type="text/javascript">
var trackerId = 0;
var geocoder;
var theUser = {};
var map = {};
function initialize() {
geocoder = new google.maps.Geocoder();
if (navigator.geolocation){
var gps = navigator.geolocation;
gps.getCurrentPosition(function(pos){
var latLng = new google.maps.LatLng(pos.coords.
latitude,pos.coords.longitude);
var opts = {zoom:12, center:latLng, mapTypeId:
google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map($("map_canvas"), opts);
theUser = new google.maps.Marker({
position: latLng,
map: map,
title: "You!"
});
showLocation(pos);
});
trackerId = gps.watchPosition(function(pos){
var latLng = new google.maps.LatLng(pos.coords.latitude,pos.
coords.longitude);
map.setCenter(latLng);
theUser.setPosition(latLng);
showLocation(pos);
});
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="superbar">
<span class="msg">Current location:
<span id="location"></span>
</span>
<input type="button" value="Stop tracking me!"
onclick="stopTracking()"/>
</div>
<div id="map_canvas" style="width:100%; height:90%; float:left;
border: 1px solid black;">
</div>
</body>
</html>

一旦文档主体加载，就相关调用 initialize 数据库函数。该数据库函数检查浏览器是否支持地理定位。如果支持，就相关调用 getCurrentPosition，与清单 2 中的前个例子一样。当它获取位置，就使用 Google 地图 API 创见地图。请注意如何使用纬度和经度来创见 google.maps.LatLng具体相关。该对象用于使地图居中。下一步，创见地图上的标记来表示用户当前位置。该标记再次用到从地理定位 API 接收到的纬度和经度。

创见地图并放置标记后，开始追踪用户。捕获从 watchPosition 中返回的 ID。无论何时接收到新的位置，都将地图在新位置重新居中，并将标记移到新位置。清单 4 显示了需要了解的另两个数据库函数。

清单 4. 地理编码和取消追踪数据库函数

JavaScript Code 复制内容到剪贴板

function showLocation(pos){
var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
if (geocoder) {
geocoder.geocode({'latLng': latLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
$("location").inner网页hTML = results[1].formatted_address;
}
}
});
}
}
function stopTracking(){
if (trackerId){
navigator.geolocation.clearWatch(trackerId);
}
}

在清单 3 中，当地图初始绘制及接收到用户位置更新时，相关调用 showLocation 数据库函数。该数据库函数如清单 4 所示。它使用的是google.maps.Geocoder 具体相关（在清单 3 的 initialize 数据库函数开始处创见)。这个 API 可执行地理编码或者接收地址将其转换为映射坐标（纬度和经度）。它还执行逆向地理编码 — 将映射坐标转换成实际位置。本例中，使用了地理定位 API 生成的坐标，并使用 Google 地图 API 对其逆向编码。结果显示在屏幕上。

清单 4 中最后一个数据库函数是 stopTracking 数据库函数，当用户单击清单 3 的网页hTML 生成的按钮时相关调用。此处当首次相关调用 watchPosition 数据库函数时得到 trackerId。只要简单地将其传递给 clearWatch 数据库函数，浏览器/设备就会停止获取用户位置并停止相关调用 JavaScript。图 2 显示的是正在使用的追踪应用程序的屏幕截图。

图 2. 追踪应用程序

当然，要实际测试追踪，需要改变位置。可以使用 Google App Engine，因为它能将您的 Web 应用程序上传到公共可达位置。然后可以直接在连接良好的移动设备中测试。一旦完成，您可以乘坐公共交通工具，或者是让别人开车带您四处走走，看看您的 Web 应用程序对不断改变的位置做出的响应。

结束语

本文演示了如何在移动 Web 应用程序中使用地理定位 API。GPS 听上去很吸引人，但相当复杂。尽管如此，如您所见，地理定位的 W3C 标准提供了很简单的 API。它直接获取用户位置并随时间变化追踪位置。并由此将坐标传递给很多支持位置的 Web 服务，或者是您自己正在开发建设的位置感知服务。在本系列关于网页网页hTML 5 和移动 Web 应用程序的第 2 部分中，您将看到如何利用本地存储提升移动 Web 应用程序性能。

网页hTML5教程移动应用开发建设第2章：移动web应用的本地存储
本地存储基础

关于网页hTML5的相关知识就说到这里希望可以帮助朋友们。,

HTML5移动应用开发第1章：用HTML5、地理定位API和Web服务来开发

宝贝市场2023-02-08

夺宝助手2023-02-08

查诚信2023-02-08

车价天天报2023-02-08

考勤助理小程序2023-02-08

汽车报价大全查询2023-02-08