麻辣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,不要从浏览器直接复制啊,亲!

相关阅读

麻辣GIS-Sailor

作者:

GIS爱好者,学GIS,更爱玩GIS。

声明

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

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

手机阅读
公众号关注
知识星球
手机阅读
麻辣GIS微信公众号关注
最新GIS干货
关注麻辣GIS知识星球
私享圈子

留言板(小编看到第一时间回复)