天天看点

HTML5之Geolocation API

刚写的一个网页版地理位置定位,电脑上可能不太准,手机经本人测试精确度能达到50米

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
/*<meta name="viewport" content="initial-scale=1.0,user-scalable=no"/>*/在手机上打开添加这一行
<title>无标题文档</title>
<script src="http://api.map.baidu.com/api?v=1.3"></script>
</head>

<body>
<div id="d"></div>
    <div id="d2" style="width:100%; height:500px; border:1px red solid;"></div>
<script type="text/javascript"> 
if (navigator.geolocation)
{  
alert("OK"); 
}
else
{  
alert('您的浏览器不支持HTML5的geolocation对象');  
}  
function Map(a,b)
{
 var map=new BMap.Map("d2");
 var point=new BMap.Point(b,a);
 map.centerAndZoom(point,15);
 map.addControl(new BMap.Marker(new BMap.Point(b,a)));
 map.addControl(new BMap.ScaleControl());
 map.addControl(new BMap.NavigationControl());
}
var lat=null;
var lon=null;
var info=null;
function success(position)
{  
lat = position.coords.latitude;  
lon = position.coords.longitude; 
info = document.getElementById('d');    
 
info.innerHTML += '<h3>你当前的地理位置信息:</h3>'+
  '<ul><li>经度:' +lat + '</li>'+
  '<li>纬度:' +lon + '</li>'+
  '<li>海拔:'+position.coords.altidude+'</li>'+
  '<li>经纬精确度:'+position.coords.accuracy+'</li>'+
  '<li>海拔精确度:'+position.coords.altitudeAccuracy+'米</li>'+
  '<li>朝向:'+position.coords.heading+'</li>'+
  '<li>移动速度:'+position.coords.speed+'</li>'+
  '<li>当前时间:'+position.coords.timestamp+'</li></ul>';  
 
Map(lat,lon);
        };  
function error(error)
{  
 var info = document.getElementById('d'); 
 info.innerHTML += '<h3>错 误:</h3>' +
 '<ul><li>错误码:' + error.code + '</li>'+
'<li>错误信息:' +error.message +'</li></ul>';
 switch(error.code)
 {
 case 1:alert("用户拒绝使用地理位置");
 break;
 case 2:alert("连不上GPS卫星,或者网络断了");
 break;
 case 3:alert("获取位置信息超时");
 break;
 defult:alert("未知错误");
 break;
 } 
        }  
navigator.geolocation.getCurrentPosition(success,error);
</script>    
</body>
</html>
           

继续阅读