利用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,不要从浏览器直接复制啊，亲！