1. 地理位置API介绍
地位位置(Geolocation) API是HTML5引入的一个非常诱人的API，它在移动web应用的开发中非常有价值。只需要几行很简单的代码即可实现获取用户的地位位置。目前浏览器对其支持情况如下图：
HTML5的地理位置API依次通过以下几个方式获取位置信息：1. IP地址，2. GPS定位，3. MAC地址，4. GSM基站网络，5. 用户定义的地址位置。如下图所示，优先级为逆时钟方向。
2. 使用地理位置API
地位位置(Geolocation) API使用非常方便，一个典型的判断浏览器是否支持HTML5 Geolocation API的函数：
function updateLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
if (!latitude || !longitude) {
document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser, but location is currently not available.";
return;
}
document.getElementById("latitude").innerHTML = latitude;
document.getElementById("longitude").innerHTML = longitude;
} 在这段代码中，使用
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
这两个变量来保存经度和纬度，并将其返回给HTML代码，本例的其余代码如下所示：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Geolocation</title>
<link rel="stylesheet" href="styles.css" target="_blank" rel="external nofollow" >
</head>
<body οnlοad="loadDemo()">
<h1>HTML5 Geolocation Example</h1>
<span class="info">
<p id="status">HTML5 Geolocation is <strong>not</strong> supported in your browser.</p>
</span>
<h2>Current Position:</h2>
<table border="1">
<tr>
<th width="40" scope="col"><h5 align="left">Lat.</h5></th>
<td width="114" id="latitude">?</td>
</tr>
<tr>
<td><h5>Long.</h5></td>
<td id="longitude">?</td>
</tr>
<tr>
<td><h5>Time</h5></td>
<td id="longitude2">11:00:00 a.m.</td>
</tr>
</table>
<p align="center" class="style2">Copyright (c) 2010</p>
<script type="text/javascript">
function loadDemo() {
if(navigator.geolocation) {
document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
navigator.geolocation.getCurrentPosition(updateLocation);
}
} 其运行结果如下图：
同样可以将经度纬度赋值给相应google map的api，得出下图所示的结果：
3.地理位置API获取流程
相信很多人会问地位位置(Geolocation) API使用的确非常方便，但是也太危险了，用户如何知道哪个应用程序在获取我的位置信息呢？用户如何进行权限设置呢。
图中标出的1， 2， 3 ，4 分别表示：
1. 表明一个用户试图打开一个调用地理位置信息的应用程序
2. 正常情况下，应用程序通过地位位置函数获取位置信息就可以了，但是浏览器会在这个地方将其中断，并请求用户授权，如果通过，则调用该函数，否则返回permission denied。
3. 浏览器根据上文所述的优先级依次获取设备相关信息，如果IP 地址，GPS信息等等，这是浏览器内部的行为。
4. 浏览器将坐标信息发送给外部的可信任的位置服务提供商哪里，如google map，位置服务提供商返回该位置的具体信息。
4. 地理位置API 例子
这是一个稍微复杂一点的例子，这个例子主要实现一个实时HTML5定位系统，主要代码如下：
<script type="text/javascript">
var totalDistance = 0.0;
var lastLat;
var lastLong;
Number.prototype.toRadians = function() {
return this * Math.PI / 180;
}
function distance(latitude1, longitude1, latitude2, longitude2) {
// R is the radius of the earth in kilometers
var R = 6371;
var deltaLatitude = (latitude2-latitude1).toRadians();
var deltaLongitude = (longitude2-longitude1).toRadians();
latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians();
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 updateStatus(message) {
document.getElementById("status").innerHTML = message;
}
function loadDemo() {
if(navigator.geolocation) {
updateStatus("HTML5 Geolocation is supported in your browser.");
navigator.geolocation.watchPosition(updateLocation,
handleLocationError,
{maximumAge:20000});
}
}
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;
// sanity test... don't calculate distance if accuracy
// value too large
if (accuracy >= 500) {
updateStatus("Need more accurate values to calculate distance.");
return;
}
// calculate distance
if ((lastLat != null) && (lastLong != null)) {
var currentDistance = distance(latitude, longitude, lastLat, lastLong);
document.getElementById("currDist").innerHTML =
"Current distance traveled: " + currentDistance.toFixed(4) + " km";
totalDistance += currentDistance;
document.getElementById("totalDist").innerHTML =
"Total distance traveled: " + currentDistance.toFixed(4) + " km";
}
lastLat = latitude;
lastLong = longitude;
updateStatus("Location successfully updated.");
}
function handleLocationError(error) {
switch(error.code)
{
case 0:
updateStatus("There was an error while retrieving your location: " + error.message);
break;
case 1:
updateStatus("The user prevented this page from retrieving a location.");
break;
case 2:
updateStatus("The browser was unable to determine your location: " + error.message);
break;
case 3:
updateStatus("The browser timed out before retrieving the location.");
break;
}
}
</script> 完整代码下载地址：
下载