码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-06-24 22:26:43      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:

一、地理位置
  经度  :   南北极的连接线
  纬度  :   东西连接的线

 

 
二、位置信息从何而来
  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>

 

 
 

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

标签:

原文地址:http://www.cnblogs.com/LO-ME/p/4598754.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!