HTML5 学习之地理定位

时间:2022-11-22 15:19:53

html5 获取坐标: 

Java代码    HTML5 学习之地理定位
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.   <head>  
  4.     <title>test1.html</title>  
  5.       
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  7.     <meta http-equiv="description" content="this is my page">  
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  9.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
  10. </head>  
  11.  <body>  
  12.    <div id="demo">点击这个按钮,获得您的坐标:</div>  
  13.     <button onclick="getLocation()">试一下</button>  
  14.     <script type="text/javascript">  
  15.   
  16.     var x=document.getElementById("demo");  
  17.     function getLocation(){  
  18.         if(navigator.geolocation){  
  19.             navigator.geolocation.getCurrentPosition(showPosition);  
  20.         }else{  
  21.             x.innerHTML="浏览器不支持!!!";  
  22.         }  
  23.     }  
  24.     function showPosition(position){  
  25.         x.innerHTML="Latitude: "+position.coords.latitude+"<br/>Longitude: "+position.coords.longitude;  
  26.     }  
  27. </script>  
  28.       
  29.   </body>  
  30. </html>  


经测试,在IE9 、firefox、chrome、opera上都可以成功获取到坐标位置,但是safari 5.x上却不能返回坐标,暂时木有找到原因。成功的案例里头,chrome响应的速度最快,其次是opera,然后是IE9,firefox居然是最慢的。个人表示对firefox很失望,不过chrome倒是越来棒了。