快捷搜索:   服务器  PHP  安全  IIS  linux 安全

HTML5获取用户地理位置信息 经纬度等信息

我们在浏览一些团购网站或者本地生活网站,经常会发现手机端弹出一个确认窗,让你点击共享位置信息,这个就是通过HTML5来实现的,点击后,网站就能获取到你手机的GPS定位或者基站定位信息。

HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用。

这里提供实例给大家分享如何使用HTML5,并提供实例来借助百度、谷歌地图等接口来获取用户准确的地理位置信息。


定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确。

首先我们要检测用户设备浏览器是否支持地理定位,如果支持则获取地理信息。这个特性可能侵犯用户的隐私,因此在客户端都会先弹出一个提示,需要用户点同意后才能获取到信息,所以我们在访问该应用时会提示是否允许地理定位,我们当然选择允许即可,电脑端操作也是如此。


这些位置信息是从何而来的呢?ip地址,GPS全球定位,wifi无线网络,基站。如果通过ip去定位的话,可能这个位置信息就不是那么准确,因为国内大部分都是用户IP都是一直变动,IP只能得到一个较大范围的区域,比如精确到县级,再往下精确度就很难达成。现在移动端手机一般获取到的位置信息都是基于GPS或者基站定位。基站定位可以精确到街道,GPS则能精确到米级。


接下来我们一起来了解获取地理位置信息的API,这个对象是:

navigator.geolocation

这个对象底下有单次定位请求的方法和多次定位请求的方法。我们先看一下单次定位请求的方法:

getCurrentPosition(请求成功,请求失败,数据手机方式)


这个方法里面有三个参数,其中第一个请求参数是请求成功的回调函数,这个成功的回调函数里面可以获得很多的位置属性,如下:

?经度:  coords.longitude
?纬度:  coords.latitude
?海拔:  coords.altitude
?海拔准确度:  coords.altitudeAcuracy
?行进方向:  coords.heading
?地面速度:  coords.speed
?时间戳: new Date(position.timestamp)


第二个请求参数是请求失败的回调参数,请求失败有很多因素,回调参数里有个code属性就分别表示失败的原因:

?失败编号  :code
?0  :  不包括其他错误编号中的错误
?1  :  用户拒绝浏览器获取位置信息
?2  :  尝试获取用户信息,但失败了
?3  :   设置了timeout值,获取位置超时了


第三个参数表示的是数据的一个收集,这是JSON格式的,分别有以下形式:

?enableHighAcuracy :  更精确的查找,默认false
?timeout  :  获取位置允许最长时间,默认infinity
?maximumAge : 位置可以缓存的最大时间,默认0


下面来个实际案例:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<style>  
div{width:400px;height:400px;border:1px solid black;}  
</style>  
<script>  
window.onload = function(){  
    var oInput = document.getElementById('in1');  
    var oDiv = document.getElementById('box1');  
      
    oInput.onclick = function(){  
      
        window.navigator.geolocation.getCurrentPosition(function(position){  
            var longitude = position.coords.longitude;  
            var latitude =  position.coords.latitude;  
            var altitude = position.coords.altitude;  
            var altitudeAcuracy = position.coords.altitudeAcuracy;  
            var heading = position.coords.heading;  
            var speed = position.coords.speed;  
            var data = new Date(position.timestamp);  
              
            oDiv.innerHTML = '经度:'+longitude+'/n纬度:'+latitude+'/n海拔'+altitude+"altitudeAcuracy"+altitudeAcuracy+"/n行走方向"+heading+'/n地面速度'+speed+'/n时间戳'+data;  
        },function(err){  
            alert(err.code);  
        },{  
            timeoenableHighAcuracy:false,  
            timeout : 5000,  
            maximumAge :5     
        });  
              
    };    
};  
</script>  
</head>  
  
<body>  
<input type='button' value='获取地理位置信息' id='in1' />  
<div id='box1'> </div>  
</body>  
</html>


接下来我们再看一下多次定位请求的方法:


watchPosition(像setInterval)

 


?移动设备有用,位置改变才会触发

?配置参数:frequency 更新的频率


关闭更新请求  :

clearWatch(像clearInterval)


再来个实例:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<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){  
              
            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){  
              
            //err.code // 失败所对应的编号  
              
            alert( err.code );  
              
            navigator.geolocation.clearWatch(timer);  
              
        },{  
            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>  
</html>


最后,我们来看一下连接百度地图接口,做一个百度地图应用的实例:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<style>  
#div1{ width:400px; height:400px; border:1px #000 solid;}  
</style>  
<script src="http://api.map.baidu.com/api?v=1.3"></script>  
<script>  
  
window.onload = function(){  
    var oInput = document.getElementById('input1');  
      
    oInput.onclick = function(){  
          
        navigator.geolocation.getCurrentPosition(function(position){  
              
            var y = position.coords.longitude;  
            var x = position.coords.latitude;  
              
            var map = new BMap.Map("div1");  
              
            var pt = new BMap.Point(y, x);  
              
            map.centerAndZoom(pt, 14);  
            map.enableScrollWheelZoom();  
            var myIcon = new BMap.Icon("miaov.png", new BMap.Size(30,30));  
            var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注  
            map.addOverlay(marker2);   
              
            var opts = {  
              width : 200,     // 信息窗口宽度  
              height: 60,     // 信息窗口高度  
              title : "北京航空航天大学"  // 信息窗口标题  
            }  
            var infoWindow = new BMap.InfoWindow("软件学院", opts);  // 创建信息窗口对象  
            map.openInfoWindow(infoWindow,pt); //开启信息窗口  
              
        });  
          
    };  
      
};  
  
</script>  
</head>  
  
<body>  
<input type="button" value="请求" id="input1" />  
<div id="div1"></div>  
</body>  
</html>

顶(0)
踩(0)

您可能还会对下面的文章感兴趣:

最新评论