• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5 中 Geolocation 获取地理位置的原理是什么?

HTML5 中 Geolocation 获取地理位置的原理是什么?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含geolocation,getCurrentPositi,Presentation,Navigator,Chrome等相关知识,匿名希望在学习及工作中可以帮助到您
具体的 API 是 Navigator.geolocation.getCurrentPosition。这个的原理是什么,为什么走了代理还能知道我在北京?用的是 Chrome 卓面版,没走 Wifi,是插的网线。
定位是在这个链接里: HTML5 Presentation http://slides.html5rocks.com/#geolocation

回复内容:

Geolocation API 的数据来源可能是 GPS、IP 地址、RFID、WiFi、蓝牙 MAC 地址、GSM/CDMA 卡 ID 等。

因为 Geolocation API 是运行在你本地设备上的。所以,在使用 VPN 或代理的情况下,Geo API 仍能获得你准确的 IP 地址信息(除非因为某些因素浏览器获取不到这些信息)。

刚刚测试了下,在使用美国 VPN 的情况下,Safari 仍能获取我准确的地理位置信息。

下面是 W3C 文档的描述:
The Geolocation API defines a high-level interface to location information associated only with the device hosting the implementation, such as latitude and longitude. The API itself is agnostic of the underlying location information sources. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input. No guarantee is given that the API returns the device's actual location.
----
参考资料:
Geolocation API Specification
How HTML5 Geolocation Feature Works? 这个API里面有一个参数告诉浏览器是否启用高精度设备,所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI,值为 true 的时候,浏览器会尝试启用这些设备,默认指为 true,在这种情况下,浏览器会尽可能地进行更为精确的查询,简单地说,如果用户有可用的 GPS 设备,会返回 GPS 设备的查询结果,IP 是最后的选择,对于移动设备来说,网络接入点(基站)或许成为另一个选择。以大多数人的情况,桌面版的Chrome一般是调用了Wifi数据来定位。 geolocation的位置信息来源包括GPS、IP地址、RFID、WIFI和蓝牙的MAC地址、以及GSM/CDMS的ID等等。规范中没有规定使用这些设备的先后顺序,在HTML5的实现中,手机等移动设备当然优先使用GPS定位,而笔记本和部分平板,最准的定位是WIFI,至于网线上网的台式机,一般就只能使用IP来定位了,这个准确度最低。

在这些方法里,GPS定位最好理解,卫星直接给出定位数据。而WIFI和IP地址定位,都不是浏览器本身能够实现的。这两种方式都必须将IP地址或WIFI信号收集到的周围路由信息,上传到某个服务器,由服务器的查询计算位置信息,然后返回给浏览器。那么这些查询服务由谁来提供呢?

首先来看chrome,很明显,肯定是google自己提供的服务。通过chrome自带的抓包方法(chrome://net-internals/)可以看到,在使用geolocation时,chrome向www.googleapis.com/geolocation/v1/geolocate的接口发送了请求,由于请求用spdy加密过,所以看不出具体内容,只有一点可以确定,即wifi上网时,是post方式传数据,而使用网线时,使用的是get。

firefox使用的也是google的服务,但是和chrome用的接口不同,这个是https://maps.googleapis.com/maps/api/browserlocation/json

请求数据是:browser=firefox&sensor=true&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-43&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-43&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-43&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-44&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-60&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-61&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-62&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-63&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-63&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-67&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-67&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-67&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-67&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-74&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-82&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-84&wifi=mac:xx-xx-xx-xx-xx-xx%7Cssid:xxxxxxx%7Css:-85

这个就很清晰了,是周边wifi设备的ssid、mac地址,以及信号强度。(公司网络,路由名和mac地址隐去。)

opera用的也是google的服务,接口url没弄到,不过从ip地址来看,也是google的ip。

对于不支持geolocation的浏览器,本来可以调用google的gears项目提供的接口来查询地理位置,但是该服务目前2011年已经停止,暂时也没有出现更好的替代方案。 定位是通过GPS,跟数据网络走的不是同一个通道,相互没有关联。

您可能想查找下面的文章:

  • Html5 Geolocation获取地理位置信息实例
  • 利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
  • html5指南-4.使用Geolocation实现定位功能
  • html5指南-7.geolocation结合google maps开发一个小的应用
  • HTML5的Geolocation地理位置定位API使用教程
  • 用Geolocation获取地理位置信息
  • 解析HTML5 geolocation的实例教程
  • HTML5-Geolocation APIs的示例代码
  • html5 navigator.geolocation基于浏览器获取地理位置代码案例
  • html5指南(4)-使用Geolocation的详解

相关文章

  • 2018-12-03零基础如何迅速学习HTML(或HTML5)?
  • 2018-12-03关于Canvas与Image的互相转换
  • 2018-12-03使用HTML5实现扫描PC二维码且触发WAP端上传资源功能的示例代码
  • 2018-12-03HTML5引入的新数组TypedArray介绍_html5教程技巧
  • 2018-12-03详解Html5 Geolocation获取地理位置信息的示例代码分享
  • 2018-12-03h5canvas实现雪花飘落的特效代码
  • 2018-12-03HTML5实战与剖析之CSS选择器——querySelectorAll()
  • 2018-12-03HTML5边玩边学(一)-画布详解
  • 2018-12-03html5表单及新增的改良元素详解
  • 2018-12-03从零开始构建HTML 5 Web页面

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • canvas如何来绘制一个椭圆形?canvas画椭圆的方法总结
    • 详细介绍Html5响应式设计实现九宫格的示例代码(图)
    • HTML5+CSS3实现拖放(Drag and Drop)示例_html5教程技巧
    • HTML5 Canvas 破碎重组的视频特效代码具体介绍
    • HTML5实战与剖析之焦点管理(activeElement和hasFocus)
    • 页面重绘及回流的优化方法
    • HTML5与Flash比较的详细介绍
    • 使用HTML5 Canvas为图片填充颜色和纹理的教程
    • HTML5 Canvas的常用线条属性值总结_html5教程技巧
    • HTML5中dialog元素的详细讲解(代码示例)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有