天天看點

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>
           

繼續閱讀