利用HTML5获取经纬度、海拔、速度、朝向等信息(附带源码和错误处理函数)

您所在的位置:网站首页 显示经纬度海拔的软件哪个好用 利用HTML5获取经纬度、海拔、速度、朝向等信息(附带源码和错误处理函数)

利用HTML5获取经纬度、海拔、速度、朝向等信息(附带源码和错误处理函数)

2024-06-13 13:25| 来源: 网络整理| 查看: 265

利用HTML5获取经纬度、海拔、速度、朝向等信息(附带源码和错误处理函数) 发布时间: 2013-03-25 所属分类: GIS探秘 文章标签: webgishtml5Geolocation 当前位置: 麻辣GIS » GIS探秘 » 利用HTML5获取经纬度、海拔、速度、朝向等信息(附带源码和错误处理函数)

在之前的文章中我介绍了利用html5获取经纬度的相关文章,并且还提供了源代码示例的下载,不过后来我查看W3C手册的时候发现HTML5提供了接口不仅仅是经纬度,还包括海拔,速度、朝向以及经纬度的准确度和海拔的准确度总共7个接口。所以在这里补充一篇文章,介绍如何调用其他接口,并且这次的示例中提供了错误处理函数,例如用户禁止了访问其相关经纬度的信息。

首先请看一张示意图,这里调用了W3C提供的所有接口,PS这是IE10在win7下的效果,其他浏览器,我无法保证。

不过从图中我们也可以清楚的看出一些问题,根据W3C的文档说明,有三个值是必须获取到的,也就是我在上次示例中展示的那个效果。但是其他4个值我这里是无法获取到的,这里只提供了一个null值,至于原因小编我本人也不是很清楚,用手机测试(环境:Android4.0 HTC G11 火狐beta版浏览器),也一样无法获取,效果如图:

其他的环境我并没有测试(例如iPhone等等),具体原因我也无法讲清楚,这里暂时留下这个问题,如果读者您有什么方法或者是发现我什么地方错了,求您一定要留言告诉我啊!可以在本站留言,也可以通过官方微信留言哦~

下面的图片展示的是错误处理,如果用户拒绝访问会有一个提示内容,如图:

W3C官方提供了4种错误反馈,具体的可以看这里,我就不赘述了。

下面是代码解释,先附上所有源代码。

var doc = document, latitude = doc.getElementById('latitude'), longitude = doc.getElementById('longitude'), accuracy = doc.getElementById('accuracy'), altitude = doc.getElementById('altitude'), altitudeAcuracy = doc.getElementById('altitudeAcuracy'), heading = doc.getElementById('heading'), speed = doc.getElementById('speed'), support = doc.getElementById('support'), showDiv = doc.getElementById('show'); function lodeSupport(){ if(navigator.geolocation){ support.innerHTML = '将下面的经纬度输入谷歌地图(纬度 经度)查看自己位置:'; showDiv.style.display = 'block'; navigator.geolocation.getCurrentPosition(updataPosition,showError); }else{ support.innerHTML = '对不起,浏览器不支持!'; showDiv.style.display = 'none'; } } function updataPosition(position){ var latitudeP = position.coords.latitude, longitudeP = position.coords.longitude, accuracyP = position.coords.accuracy, altitudeP = position.coords.altitude, altitudeAcuracyP = position.coords.altitudeAcuracy, headingP = position.coords.heading, speedP = position.coords.speed; latitude.innerHTML = latitudeP; longitude.innerHTML = longitudeP; accuracy.innerHTML = accuracyP; altitude.innerHTML = altitudeP; altitudeAcuracy.innerHTML = altitudeAcuracyP; heading.innerHTML = headingP; speed.innerHTML = speedP; }

function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: showDiv.innerHTML="用户拒绝访问地理位置" break; case error.POSITION_UNAVAILABLE: showDiv.innerHTML="地理位置信息无法获取" break; case error.TIMEOUT: showDiv.innerHTML="获取位置时间超时" break; case error.UNKNOWN_ERROR: showDiv.innerHTML="我擦,这是一个未知的错误" break; } }

window.addEventListener('load', lodeSupport , true);

其中在这句代码的时候调用了我们之前说过的getCurrentPosition函数:

navigator.geolocation.getCurrentPosition(updataPosition,showError);

可以看出我这里给这个getCurrentPositon函数传了两个参数,一个是得到位置,一个是错误处理,后面的代码就没什么好解释了,都是javascript函数,如果对javascript不熟悉的话,可以找相关的书籍阅读,例如那个getElementById作用。

关于这个demo

点击这里在线查看,源码下载

解压密码:malagis.com

PS:注意,密码是malagis.com,没有前面的http,不要从浏览器直接复制啊,亲!

相关阅读 快速搭建一个Cesium应用示例 快速搭建一个Cesium应用示例 2024-01-03 为什么选择Cesium 为什么选择Cesium 2023-12-04 「更新中」Cesium学习笔记整理汇总 「更新中」Cesium学习笔记整理汇总 2023-11-24 「GIS电子书」 GIS and Environmental Monitoring: Applications in the Marine, Atmospheric and Geomagnetic Fields(PDF版本) 「GIS电子书」 GIS and Environmental Monitoring: Applications in the Marine, Atmospheric and Geomagnetic Fields(PDF版本) 2023-07-31 「GIS电子书」 Dynamic and Mobile GIS: Investigating Changes in Space and Time (PDF版本) 「GIS电子书」 Dynamic and Mobile GIS: Investigating Changes in Space and Time (PDF版本) 2023-02-25 「GIS论文集」Advances in Web-based GIS, Mapping Services and Applications(PDF版本) 「GIS论文集」Advances in Web-based GIS, Mapping Services and Applications(PDF版本) 2023-01-29 麻辣GIS-Sailor

作者:Sailor

GIS爱好者,学GIS,更爱玩GIS。 B站关注 加入微信群 声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

手机阅读 公众号关注 知识星球 手机阅读 麻辣GIS微信公众号关注 最新GIS干货 关注麻辣GIS知识星球 私享圈子 上一篇:html5接口getCurrentPosition函数详解 下一篇:MapGIS K9三维TDE平台插件开发环境配置


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3