HTML5地理位置概述和地理位置对象的详解

最新推荐文章于 2023-01-03 17:04:34 发布

aojiu4000

最新推荐文章于 2023-01-03 17:04:34 发布

阅读量139

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/LO-ME/p/4598754.html

版权

一、地理位置

　　经度 : 南北极的连接线

　　纬度 : 东西连接的线

二、位置信息从何而来

　　IP地址

　　GPS全球定位系统

　　Wi-Fi无线网络

　　基站

三、地理位置对象（navigator.geolocation ）

　　 – 单次定位请求 ：getCurrentPosition(请求成功，请求失败，数据收集方式)

　　 –请求成功函数

　　　　»经度 : coords.longitude

　　　　»纬度 : coords.latitude

　　　　»准确度 : coords.accuracy

　　　　»海拔 : coords.altitude

　　　　»海拔准确度 : coords.altitudeAcuracy

　　　　»行进方向 : coords.heading

　　　　»地面速度 : coords.speed

　　　　»时间戳 : new Date(position.timestamp)

　　 – 请求失败函数

　　　　»失败编号：code

　　　　　　»0 : 不包括其他错误编号中的错误

　　　　　　»1 : 用户拒绝浏览器获取位置信息

　　　　　　»2 : 尝试获取用户信息，但失败了

　　　　　　»3 : 设置了timeout值，获取位置超时了

　　 –数据收集 : json的形式

　　　　»enableHighAcuracy : 更精确的查找，默认false

　　　　»timeout : 获取位置允许最长时间，默认infinity

　　　　»maximumAge : 位置可以缓存的最大时间，默认0

<script>
//LBS : 基于地图信息的应用
window.onload = function(){
    var oInput = document.getElementById('input1');
    var oT = document.getElementById('t1');
    
    oInput.onclick = function(){
        
        navigator.geolocation.getCurrentPosition(function(position){
            
            oT.value += '经度:' + position.coords.longitude+'\n';
            oT.value += '纬度 :' + position.coords.latitude+'\n';
            oT.value += '准确度 :' + position.coords.accuracy+'\n'; //就是经度和纬度的准确度，没什么用处
            oT.value += '海拔 :' + position.coords.altitude+'\n';
            oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';
            oT.value += '行进方向 :' + position.coords.heading+'\n';   //移动设备上才有用，PC不支持
            oT.value += '地面速度 :' + position.coords.speed+'\n';        //移动设备上才有用，PC不支持
            oT.value += '时间戳:' + new Date(position.timestamp)+'\n';
        },function(err){
            alert( err.code );//err.code // 失败所对应的编号
            
        },{
            enableHighAcuracy : true,
            timeout : 5000,
            maximumAge : 5000        //每次请求定位的时候，如果不超过这个设置的时间，那么就不重新请求定位，而是用缓存
        });
        
    };
};
</script>
</head>

<body>
    <input type="button" value="请求" id="input1" /><br />
    <textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;"></textarea>
</body>

　　 –多次定位请求 : watchPosition(像setInterval)

　　　　»移动设备有用，位置改变才会触发

　　　　»配置参数：frequency 更新的频率

　　–关闭更新请求 : clearWatch(像clearInterval)

<script>

//LBS : 基于地图信息的应用

window.onload = function(){
    var oInput = document.getElementById('input1');
    var oT = document.getElementById('t1');
    
    var timer = null;
    
    oInput.onclick = function(){
        
        timer = navigator.geolocation.watchPosition(function(position){  //多次定位请求，返回一个id，通过这个id清除多次定位请求
            
            oT.value += '经度:' + position.coords.longitude+'\n';
            oT.value += '纬度 :' + position.coords.latitude+'\n';
            oT.value += '准确度 :' + position.coords.accuracy+'\n';
            oT.value += '海拔 :' + position.coords.altitude+'\n';
            oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';
            oT.value += '行进方向 :' + position.coords.heading+'\n';
            oT.value += '地面速度 :' + position.coords.speed+'\n';
            oT.value += '时间戳:' + new Date(position.timestamp)+'\n';
            
        },function(err){
            alert( err.code );// 失败所对应的编号
            navigator.geolocation.clearWatch(timer);//通过多次定位请求返回的id关闭更新请求
            
        },{
            enableHighAcuracy : true,
            timeout : 5000,
            maximumAge : 5000,
            frequency : 1000    //更新的频率(多次定位请求的频率)
        });
        
    };
    
};
</script>
</head>
<body>
    <input type="button" value="请求" id="input1" /><br />
    <textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;"></textarea>
</body>

转载于:https://www.cnblogs.com/LO-ME/p/4598754.html

aojiu4000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5地理位置概述和地理位置对象的详解

一、地理位置　　经度 : 南北极的连接线　　纬度 : 东西连接的线二、位置信息从何而来　　IP地址　　GPS全球定位系统　　Wi-Fi无线网络　　基站三、地理位置对象（navigator.geolocation）　　– 单次定位请求：getCurrentPosition(请求成功，请求失败，数据收...
复制链接

扫一扫