HTML5学习笔记(四)-Geolocation API

toplchx

浏览: 342020 次
性别:
来自: 北京

最近访客更多访客>>

scj2cy

038580395

jiedushi

-惜帅-

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5

html5

一、位置信息

1、数据

位置信息由经度、纬度坐标和一些其他元数据组成。

纬度：距离赤道以北或以南的数值。比如：39.17222

经度：距离英国格林威治以东或以西的数值。比如：-120.13778

经纬度可以以十进制表示，也可以以DMS（角度）格式表示。

HTML5 Geolocation API的坐标格式是十进制格式。

除经纬度外，HTML5 Geolocation还提供坐标的准确度。依据浏览器所在的硬件设备，还可能提供一些元数据，包括海拔、海拔准确度、行驶方向和速度等。如果这些元数据不存在则返回null。

2、位置信息从何而来

API并不能保证设备返回的是惠及位置是精确的。

设备可以使用下列数据源

IP地址
三维坐标
- GPS(Global Positioning System，全球定位系统)；
- 从RFID、Wi-Fi和蓝牙到Wi-Fi的MAC地址；
- GSM或CDMA手机的ID
用户自定义数据

IP地址定位数据的优缺点

优点	缺点
任何地方都可用	不精确(经常出错，一般精确到城市级)
在服务器端处理	运算代价大

GPS定位数据的优缺点

优点	缺点
很精确	定位时间长，用户耗电量大
	室内效果不好
	需要额外硬件设备

Wi-Fi定位数据优缺点

优点	缺点
精确	在乡村这些无线接入点较少的地区效果不好
可在室内使用
可以简单、快捷定位

手机地理数据优缺点

优点	缺点
相当准确	需要能够访问手机或其moden的设备
可在室内使用	在基站较少的片源地区效果不好
可以简单、快捷定位

用户自定义的地理定位数据

优点	缺点
用户可以获得比程序定位服务更准确的位置数据	可能很不准确，特别是当用户位置变更后
允许地理定位服务的结果作为备用位置信息
用户自行输入可能比自动检测更快

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

二、使用Geolocation API

1、浏览器支持检查

目前主流浏览器都支持Geolocation API。要查看某个版本是否支持可参考http://caniuse.com

用脚本检查支持性：

function loadDemo() {
    if (navigator.geolocation) {
        document.getElementById("support").innerHTML = "Geolocation supported.";
    } else {
        docment.getElementById("support").innerHTML = "Geolocation is not supported in your browser.";
    }
}

2、位置请求

有两种类型的位置要求

单次定期诶请求
重复性的位置更新请求

单次请求函数：

void getCurrentPosition(in PositionCallback successCallback, 
                             in optional PositionErrorCallback errorCallback,
                             in optional PositionOptions options);

分析一下这个核心函数。

这个函数通过navigator.geolocation对象调用。这个函数有一个必选参数和两个可选参数。

必选参数successCallback为浏览器指明位置数据可用时应调用的函数。因为查位置可能需要很长时间，所以采用回调函数的方式。该函数只有一个参数：位置对象(假设命名为position)。对象包含坐标信息(coords)和一个获取数据时的时间戳(timestamp)。

position.coords

position.timestamp

坐标信息(coords)包含三个特性：

latitude(纬度)、longitude(经度)、accuracy(准确度)

accuracy准确度以m为单位指定经纬度与实际位置间的差距，置信度为95%。

根据硬件设备的不同，坐标信息还可能提供如下特性：

altitude：用户位置的海拔高度，以m为单位；

altitudeAccuracy：海拔高度的准确度，以m为单位。

heading：行进方向，相对于正北而言；

speed：地面速度，以m/s为单位。

可选参数errorCallback是发生错误时的回调函数。虽然是可选参数，但建议选用。

该函数有一个参数：错误对象(error)。错误对象有两个属性，code和message。

code对应3个值

编号值	常量	说明
1	PERMISSION_DENIED	用户选择拒绝浏览器获取其位置信息
2	POSITION_UNAVAILABLE	尝试获取用户位置数据，但失败了
3	TIMEOUT	获取用户位置时超时(如果设置了可选的timeout值)

可选参数options对象可以调整HTML5 Geolocation服务的数据收集方式。

现在有三个可选参数，使用JSON对象传递({参数1:值1,参数2:值2,参数3:值3})。他们是：

enableHightAccuracy：如果启用这个参数，则通知浏览器启用HTML5 Geolocation服务的高精确度模式。参数默认值为false。如果启用此参数，可能没有任何差别，也可能会导致机器花费更多的时间和资源来确定位置，所以应谨慎使用。

timeout：单位为ms，告诉浏览器计算当前位置所允许的最长时间。其默认值为Infinity，即无穷大或无限制。

maximumAge：表示浏览器重新计算位置的时间间隔。单位是ms。默认值为零，这意味着浏览器每次请求时必须立即重新计算位置。

重复更新函数：

var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, options);

只要用户位置发生变化，Geolocation服务就会调用successCallback处理程序。它的效果就像程序在监视用户的位置，并会在其变化时及时通知用户一样。

关闭更新需要调用

navigator.geolocation.clearWatch(watchId);

3、使用HTML5 Geolocation构建应用

一个重要的计算距离的公式，Haversine公式：

详细定义参见：http://en.wikipedia.org/wiki/Haversine_formula

Number.prototype.toRadians = function() {
    return this * Matn.PI / 180;
}

function distance(latitude1, longitude1, latitude2, longitude2) {
    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;
}

其他语言实现参见：http://rosettacode.org/wiki/Haversine_formula