利用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作用。