HTML5 学习之地理定位

html5 获取坐标： 

Java代码  收藏代码
  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倒是越来棒了。 

posted @ 2014-10-15 08:41  技术狂  阅读(526)  评论(0)  编辑  收藏  举报