HTML5编程之旅系列一：HTML5 Geolocation 初探

让我们假设这样一个场景，有一个web应用程序，它可以向用户提供附近不远处某商场的打折优惠信息。使用HTML5 Geolocation API（地理定位 API），可以请求用户共享他们的位置信息。

　　HTML5 Geolocation 技术应用的场景比较多，比如构建计算行走路程、GPS导航的社交应用等。

　　本文主要探讨 HTML5 Geolocation API，包括获取地理位置数据的途径，地理位置数据的隐私以及在实际中的应用等。

　　目前存在两种地理定位请求：单次定位请求和重复性的位置更新请求。

一、地理位置数据的获取

　　获取地理位置数据的方法有以下几种：

IP地址地理定位：自动查找用户的IP地址，然后检索其注册的物理地址；
GPS地理定位：通过收集运行在地球周围的多个GPS卫星信号来实现；
Wi-Fi地理定位：通过三角距离计算得出（三角距离：用户当前位置到已知的多个Wi-Fi接入点的距离）；
手机地理定位：通过用户到一些基站的三角距离确定；
用户自定义地理定位：用户自己输入地址、邮政编码和其他一些详细信息。

二、地理位置数据的隐私

　　HTML5 Geolocation 规范提供了一套保护用户隐私的机制，除非得到用户明确许可，否则不可能获取位置信息。

　　HTML5 地理定位浏览器和设备之间的交互如下所述：

用户从浏览器中打开位置感知应用程序；
应用程序Web页面加载，然后通过Geolocation函数调用请求位置坐标。浏览器拦截这一请求，然后请求用户授权。我们假设用户同意；
浏览器从其宿主设备中检索坐标信息。例如，IP地址、Wi-Fi 或 GPS 坐标。这是浏览器内部功能；
浏览器将坐标发送给受信任的外部定位服务，它返回一个详细位置信息，并将该位置信息发回给 HTML5 Geolocation 应用程序。

三、HTML5 Geolocation API介绍

　　在访问使用 HTML5 Geolocation API 的页面时，会触发隐私保护机制。但是如果仅仅是添加代码，而不被任何方法调用，则不会才触发隐私保护机制。

　　要使用 HTML5 Geolocation API，首先要检查浏览器是否支持，代码如下：

function loadDemo(){

If(navigator.geolocation){

document.getElementById("support").innerHTML = "HTML5 Geolocation supported.”

}else{

ocument.getElementById("support”).innerHTML = "HTML5 Geolocation is not supported in your browser.”

}

　　单次定位请求API：

Void getCurrentPosition(in PositionCallback successCallBack,

in optional PositionErrorCallBack errorCallback,

in optiona PositionOptions options)

　　上述的函数要通过navigator.geolocation来调用，各个参数解释如下：

　　successCallBack：浏览器指明位置数据可用时调用的函数，即收到实际位置信息并进行处理的地方，此函数只接受一个参数：位置对象，包含坐标和一个时间戳；

　　errorCallback：在获取位置数据出错时的处理地方，向用户说明失败原因，可选参数，但是建议使用；

　　Options：此对象可调整 HML5 Geolocation服务的数据收集方式，可选；可以通过 JSON 对象进行传递，主要包括enableHighAccuracy（启用HML5 Geolocation服务的高精确度模式、timeout（当前位置所允许的最长时间）、maximumAge（浏览器重新计算位置的时间间隔）。

function successCallBack(position){

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

var accuracy = position.coords.accuracy;

//此处可以添加代码，把上述三个值显示到页面中。

}

ffunction errorCallback(error){

switch(error.code){

//UNKNOWN_ERROR = 0 需要通过message参数查找错误的更多信息

case 0:

updateStatus("There was an error while retrieving your location:" + error.message);

break;

//PERMISSION_DENIED = 1 用户拒绝浏览器获得其共享位置

case 1:

updateStatus("The user prevented this page form retrieving a location!");

break;

//POSITION_UNAVAILABLE = 2 尝试获取用户位置，但失败

case 2:

updateStatus("The browser was unable to determine your location:" + error.message);

break;

//TIMEOUT = 3 设置了可选的timeout值，尝试确定用户位置的过程超时

case 3:

updateStatus("The browser timed out before retriveing the !");

break;

}

　　重复性位置请求API：

var watchId = navigator.geolocation.watchPosition(updateLocation,handleLocationError);

//停止接收位置更新信息

navigator.geolocation.clearWatch(watchId);

四、使用HML5 Geolocation构建应用

　　使用上述讲解的HML5 Geolocation API来实现一个简单有用的Web应用程序—距离追踪器，以了解HML5 Geolocation 的强大之处。

　　本例主要讲述从网页被加载的地方到目前所在位置所经过的距离。使用众所周知的Haversine公式，其能够根据经纬度来计算地球上两点间的距离。如下：

　　关于上述原理，请参考网上其他教程。使用js实现的Haversine公式如下：

function toRadians(degree){

return degree * Math.PI / 180 ;

}

function distance(latitude1,longitude1,latitude1,longitude1){

//R是地球的半径，以km为单位

var R = 6371;

var deltaLatitude = toRadians(latitude2 - latitude1);

var deltaLongitude = toRadians(longitude2 - longitude1);

latitude1 = toRadians(latitude1);

latitude2 = toRadians(latitude2);

var

a = Math.sin(deltaLatitude / 2) * Math.sin(deltaLatitude / 2) + Math.cos(latitude1) * Math.cos(latitude2) * Math.sin(deltaLongitude / 2) * Math.sin(deltaLongitude / 2);

var c = 2 * Math.atan2(Math.sqrt(a),Math.sqrt(1-a));

var d = R * c;

return d;

}

　　HTML网页代码入下：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<title>HTML5 地理定位</title>

<link rel="stylesheet" href="styles.css">

</head>

<body onload="loadDemo()">

<h1>HTML5 地理位置追踪器</h1>

<p id="status">你的浏览器不支持HTML5地理定位</p>

<h2>当前位置:</h2>

<table border="1">

<tr>

<th width="40" scope="col"><h5>纬度</h5></th>

<td width="114" id="latitude">?</td>

</tr>

<tr>

<td> 经度</td>

<td id="longitude">?</td>

</tr>

<tr>

<td>准确度</td>

<td id="accuracy">?</td>

</tr>

<tr>

<td>最近的时间戳</td>

<td id="timestamp">?</td>

</tr>

</table>

<h4 id="currDist">当前旅行的距离: 0.0 km</h4>

<h4 id="totalDist">总的旅行距离: 0.0 km</h4>

</body>

<script text="text/javascript">

var totalDistance = 0;

var lastLat;

var lastLong;

Number.prototype.toRadians = function() {

return this * Math.PI / 180;

}

function loadDemo(){

If(navigator.geolocation){

updateSatus("你的浏览器支持HTML5地理定位");

navigator.geolocation.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});

}

function updateSatus(message){

document.getElementById("status").innerHTML = message;

}

function distance(latitude1,longitude1,latitude1,longitude1){

//R是地球的半径，以km为单位

var R = 6371;

var deltaLatitude = toRadians(latitude2 - latitude1);

var deltaLongitude = toRadians(longitude2 - longitude1);

latitude1 = toRadians(latitude1);

latitude2 = toRadians(latitude2);

var

a = Math.sin(deltaLatitude / 2) * Math.sin(deltaLatitude / 2) + Math.cos(latitude1) * Math.cos(latitude2) * Math.sin(deltaLongitude / 2) * Math.sin(deltaLongitude / 2);

var c = 2 * Math.atan2(Math.sqrt(a),Math.sqrt(1-a));

var d = R * c;

return d;

}

function updateLocation(position){

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

var accuracy = position.coords.accuracy;

var timestamp = position.timestamp;

document.getElementById("latitude").innerHTML = latitude;

document.getElementById("longitude").innerHTML = longitude;

document.getElementById("accuracy").innerHTML = accuracy;

document.getElementById("timestamp").innerHTML = timestamp;

if(accuracy >= 500){

updateStatus("不需要计算精确距离");

return;

}

if((lastLat != null) && (lastLong !=null)){

var currentDistance = distace(latitude, longitude, lastLat, lastLong);

document.getElementById("currDist").innerHTML =

"当前旅行的距离: " + currentDistance.toFixed(4) + " km";

totalDistance += currentDistance;

document.getElementById("totalDist").innerHTML =

"总的旅行距离: " + currentDistance.toFixed(4) + " km";

}

lastLat = latitude;

lastLong = longitude;

updateStatus("成功更新位置。");

}

function handleLocationError(error) {

switch(error.code)

{

case 0:

updateStatus("检索位置发生错误：" + error.message);

break;

case 1:

updateStatus("用户阻止检索位置信息。");

break;

case 2:

updateStatus("浏览器不能检索位置信息：" + error.message);

break;

case 3:

updateStatus("浏览器检索位置信息超时。");

break;

}

</script>

</html>

转载自：http://www.cnblogs.com/oooweb/p/html5-geolocation-tutorials.html