转自
http://www.zhangxinxu.com/wordpress/?p=1725
by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=1725
一、开篇简述
Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法。且目前看来浏览器的支持情况还算不错(因为新版本的IE支持了该API),这使得在不久之后就可以使用这一浏览器内置的API了。该API接口提供的用户地理位置信息还算蛮详细的,经纬度啊,海拔啊,精确度,移动速度啊都是可以获取的。
据我个人的了解,其位置的获取是通过收集用户周围的无线热点和您 PC 的 IP 地址。然后浏览器把这些信息发送给默认的位置定位服务提供者,也就是谷歌位置服务,由它来计算您的位置。最后用户的位置信息就在您请求的网站上被共享出来。
Geolocation还不是HTML5规范的一部分,不过W3C为其独立出了一份详细的规范,因此,该API的血统还算比较纯正,来路比较清白。
二、浏览器的支持情况
目前W3C地理位置API被以下桌面浏览器支持:
» Firefox 3.5+
» Chrome 5.0+
» Safari 5.0+
» Opera 10.60+
» Internet Explorer 9.0+
W3C地理位置API还可以被手机设备所支持,如下:
» Android 2.0+
» iPhone 3.0+
» Opera Mobile 10.1+
» Symbian (S60 3rd & 5th generation)
» Blackberry OS 6
» Maemo
三、数据保护
显然,地理位置属于用户的隐私信息之一,尤其在做一些隐晦的事情时候,例如背着老婆去见EX,去雅典皇宫做按摩。因此浏览器不会直接把用户的地理位置信息呈现出来的,当需要获取用户地理位置信息的时候,浏览器会询问用户,是否愿意透露自己的地理位置信息,如下截图所示:
如果你选择不共享,则浏览器不会做任何事情。
如果你一不小心对某个站点共享了地理位置,可以随时将其取消的,方法如下:
对于IE9浏览器,Internet选项 → 隐私 → 位置(清除站点),如下截图:
对于FireFox浏览器,方法如下:
点击地址栏前面的网站小图标 → 点击更多信息 → 权限 → 共享方位信息 → 阻止,具体步骤参见下面几张截图。
如果是Chrome浏览器的话直接点击地址栏右边长得像轮船方向盘一样的小图标就会看到可以取消地理位置的小框框了:
四、地理位置资源
为获取用户的地理位置信息,需要使用多个资源,不同资源的对位置精确度的贡献是不一样的。对于桌面浏览器,通常使用WiFi(误差20米),或者IP位置(这受城市的档次影响,会出错)。对于手机设备倾向于使用测量学技术,例如GPS(误差10米,只能在户外使用),WiFi或者是GSM/CDMA的站点的ID(误差有1000米)。
五、API的使用
在使用地理位置API之前首先要检测浏览器是否支持,如下测试代码:
if (navigator.geolocation) {
// 想干嘛就干嘛
}
当然,这个if判断也能用来进行浏览器的判断,可以区分IE6~8浏览器与IE9和其他现代浏览器。这在我们使用某些CSS3属性时非常有用,检测浏览器是否支持某些CSS3属性相对比较麻烦,可以折中下,即在知道浏览器对该CSS3属性的支持情况下检测浏览器,一般而言就是区分区分IE6~8浏览器和其他浏览器,这正好与navigator.geolocation的检测是一致的。
通过这个API,我们有两个方法变量可以用来获取用户的地理位置:
getCurrentPosition和watchPosition
这两个方法参数一致,支持三个参数,拿getCurrentPosition举例,navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)。
其中,successCallback为方法成功的回调,此参数必须;
errorCallback为方法失败时候的回调,此参数可选;
option参数为额外参数,也是可选参数,对象。option参数支持三个可选参数API,为:enableHighAccuracy, timeout, maximumAge.
1. enableHighAccuracy参数表示是否高精度可用,为Boolean类型,默认为false,如果开启,响应时间会变慢,同时,在手机设备上会用掉更多的流量,也就是money了。
2. timeout参数表示等待响应的最大时间,默认是0毫秒,表示无穷时间。
3. maximumAge表示应用程序的缓存时间。单位毫秒,默认是0,意味着每次请求都是立即去获取一个全新的对象内容。
在介绍getCurrentPosition和watchPosition方法之间的差异之前先讲一下clearWatch方法。clearWatch方法值接受一个参数,这是参数是由watchPosition方法返回的watchID。
现在,讲差异。getCurrentPosition方法属于一次性取用户的地理位置信息,而watchPosition方法则不停地取用户的地理位置信息,不停地更新用户的位置信息,这在我们开汽车的时候实时获知自己的位置就显得比较受用了。watchPosition方法可以通过watchPosition方法停掉(停止不断更新用户地理位置信息),方法就是传递watchPosition方法返回的watchID了。
当用户的位置被返回的时候,会藏在一个位置对象中,该对象包括一些属性,具体见下表:
属性 释义
coords.latitude 纬度数值
coords.longitude 经度数值
coords.altitude 参考椭球之上的高度
coords.accuracy 精确度
coords.altitudeAccuracy 高度的精确度
coords.heading 设备正北顺时针前进的方位
coords.speed 设备外部环境的移动速度(m/s)
timestamp 当位置捕获到时的时间戳
上面这些属性中只有coords.latitude, coords.longitude和coords.accuracy铁定会有东西返回的,至于其他属性很可能返回的就是null。现在,我们就可以应用诸如这里返回的经纬度在Google地图上标出自己的位置。
六、使用实例
现在举一个应用Geolocation API的例子,应用的是getCurrentPosition,显示当前你在地图上的位置。
您可以狠狠地点击这里:Google地图显示您当前位置demo
下图为显示的我当前写该文章时的地理位置:
点击中间的圆泡泡的图标,会显示用户您当前经纬度,时间戳啊等,例如下图所示:
不过,说实话,这距离的误差绝不是只有1000m,估计至少有2000~3000m,我在浦东新区,黄浦江这边,但是其却把我放到了江的另一边。
提示:要想看到效果,需要使用非IE6/IE7/IE8浏览器,否则,只会看到一行文字外带字符笑脸;在其他浏览器下需允许访问您的地理位置信息,因为这个东西可以随时取消,所以,可以放心大胆的允许。
因为脚本代码有差不多70行,放到页面上有撑篇幅之嫌,故这里仅展示一些核心的代码逻辑,至于详细,您可以查看页面的源代码,有注释,
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var eleGmap = document.getElementById("gmap");
var showMap = function(position) {
//经纬度所在的位置对象
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
//根据pos对象中的经纬度显示Google地图了哈!
//...
};
if (navigator.geolocation) {
eleGmap.innerHTML = '<div id="help"><img src="http://www.zhangxinxu.com/study/image/loading.gif" /></div>';
//一次性获取位置的请求
navigator.geolocation.getCurrentPosition(showMap);
} else {
eleGmap.innerHTML = '<div id="help">您的浏览器不支持地理位置 O(∩_∩)O~</div>';
}
</script>
七、结束语
上面这个例子是相当的简单的,Geolocation API的功能与潜力显然不止这些,规范自身还提供一些应用实例,例如:
» 发现并绘制用户所在区域的网络点
» 在地图上,在用户所在的位置上标注一些信息
» 使用watchPosition路线导航
» 当你移动时更新最新的本地信息
毕竟目前,国内,对于桌面浏览器,不支持地理位置API的低版本IE依旧占据半壁江山,所以,在桌面浏览器上应用此API还需些日子。不过对于像是手机,ipad这类移动设备,我觉得是可以好好用用这个不错的API的,可以做出很多实用的功能的,不过我对手机开发完全不在行,所以,指点江山,还看他人了。
参考文章:Finding your position with Geolocation
分享到:
相关推荐
地理位置API 凯尔·威廉姆斯(Kyle Williams)探索了ReactJS和浏览器地理位置API。 演示: :
更好的地理位置-浏览器地理位置比基于IP的地理编码具有更高的准确性。 坚持它,你想要的方式-作为Spyme没有定义任何持续性模型,您可以将其映射到你喜欢的任何方式模型。 这个怎么运作 当有人访问您的网站时,...
在手持设备如此普遍的今天,位置信息对于应用程序来讲是极其重要的,打车应用可以根据用户的位置信息呼叫附近的车辆,团购软件可以根据当前的位置推荐附近的影院和美食,地图应用可以根据用户的位置快速规划到目的地...
下面我们将要演示的就是通过浏览器里JavaScript地理位置信息API来获取详细地理信息! 检查你的浏览器是否支持地理位置信息API 目前主流的浏览器都已经对JavaScript地理位置信息API有了较好的支持。但如果你还不放心...
HTML5 Geolocation API(地理位置应用程序接口)可以获取当前地理位置,手机端使用GPS,电脑则根据网络定位 检查浏览器是否支持HTML5 Geolocation API [removed] if(navigator.geolocation){ alert('浏览器...
Html5中提供了地理位置信息的API,通过浏览器来...如下Demo演示了通过Geolocation获取地理位置信息,并在百度地图上显示当前位置(通过调用百度地图API)。实验结果发现位置被定位到了大学城内环东四路入口处,与本人
AspNetMonsters.Blazor.Geolocation 该软件包为Blazor应用程序提供了访问浏览器的权限用法在您的Blazor应用中,添加AspNetMonsters.Blazor.Geolocation Install-Package AspNetMonsters.Blazor.Geolocation -...
具体内容包括地理定位的基础知识简介,这套API的浏览器支持情况,以及如何利用它和其他常用地图工具在网页中实现类似Google地图的嵌入式地图。 这一部分的主要内容还有: 根据设备的不同,从各种来源收集地理信息 ...
更改地理位置(Location Guard)是一个浏览器扩展程序,可让您轻松地将地理位置更改为所需的值并保护您的隐私。只需打开插件的选项页面,然后为要设置地理位置的位置设置纬度和经度(默认位置为英国格林威治)。接...
如果浏览器支持地理位置API的话,全局的navigator对象上会有一个名为geolocation的属性,反之,navigator对象上该属性的值为undefined: function supports_geolocation(){ return !!navigator.geolocation; } ...
HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。 浏览器支持 Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持...
HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图接口来获取用户准确的地理位置...
Geolocation是HTML5标准下的一个Web API,利用它可以获取设备的当前位置信息(坐标),此API具有三个方法:getCurrentPosition、watchPosition和clearWatch,其中最常用的是getCurrentPosition方法,剩下两个方法需要...
利用Html5的新特性geolocation可以获取用户的地理位置定位信息,并借助百度活google的地图api将所获取的地理位置信息展示在地图上。 做这个实验时必须保证测试的页面部署在HTTP服务器上,否则如果直接浏览器从本地...
这是一个小型应用程序,可在浏览器中运行地理位置Web应用程序,并具有调试功能。 有问题的Web应用作为iframe插入,地理位置api被覆盖以使用我们提供的web应用。 这是一个可与Google Maps配合使用的版本,可显示我们...
地理位置 介绍 这是将检查当前浏览器是否支持 navigator.geolocation 对象的示例网页。 如果浏览器不支持地理定位,则让页面向用户显示反馈消息。 如果支持地理定位,则尝试获取用户的当前位置,然后加载包含地图...
HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图接口来获取用户准确的地理位置...
这一部分的主要内容还有:根据设备的不同,从各种来源收集地理信息探索地理坐标系统,包括大地测量系统和基准点使用Geolocation API,以JavaScript代码从用户的浏览器中取得位置信息使用Google地图或基于...
语言:English 覆盖HTML5 GeoLocation API并返回任意位置。 此扩展允许您在浏览器中覆盖HTML地理位置,可用于开发基于HTML地理位置的应用。
更改地理位置(Location Guard)是一个浏览器扩展,让您轻松将地理位置更改为a 所需的价值并保护您的隐私。 只需打开Addon的选项页面,并为您希望地理位置的位置设置纬度和经度(默认位置是英国格林威治)。 接下来...