html5的地理位置定位

html5提供的地理位置定位使开发人员不用借助其他软件就能轻松实现位置查找,地图应用,导航等功能。

地理位置定位基本原理
GPS,WIFI,IP,手机信号基站

核心对象
Geolocation是window.navigator下面的一个对象,该对象提供了实现地理位置定位的接口。
要用该功能需先判断浏览器是否支持navigator.geolocation对象。

navigator.geolocation.getCurrentPosition(success,error,options);

success(position) 获取信息成功的回调函数
对象:

coords.latitude(十进制数的纬度)
coords.longitude(十进制数的经度)
coords.altitude(海拔,海平面以上以米计)
coords.accuracy(位置精确度)
coords.altitudeAccuracy(位置的海拔精度)
coords.heading(方向,从正北开始以度计)
coords.speed(速度,以米/每秒计)
timestamp(响应的日期/时间)

error(errorcode) 获取信息失败的回调函数

code是错误代码
message是错误信息

options设置配置参数,对象

enableHighAccuracy 表示是否允许使用高精度
timeout指定超时时间
maximumAge是指缓存的时间

geolocation还有两个方法:
1、watchPosition(success,options)表示重复获取地理位置,相当于不断执行getCurrentPosition。
2、clearWatch()用来清除前一次获取的位置信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body></body>
<script>
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            console.log("纬度:" + position.coords.latitude);
            console.log("经度:" + position.coords.longitude);
        },function(error) {
            console.log(error.message);
        },{});
    }
</script>
</html>

 




相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码