使用HTML5的geolocation API

来源:互联网 发布:淘宝被虚假交易怎么办 编辑:程序博客网 时间:2024/05/03 02:00

转载:http://201211131343.iteye.com/blog/1814951

如何在网页中定位当前位置呢?

 

 

Html代码  收藏代码
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8" />  
  5.     <title>显示当前位置</title>  
  6.     <script src="code.js"></script>  
  7. </head>  
  8. <body>  
  9.     <div id="position">正在定位当前位置...</div>  
  10. </body>  
  11. </html>  

 

 

 

Js代码  收藏代码
  1. window.onload = getPosition;    // 加载完页面后执行getPosition方法  
  2.   
  3. function getPosition() {  
  4.     if (navigator.geolocation) {  
  5.         // 如果geolocation不为null  
  6.         navigator.geolocation.getCurrentPosition(displayPosition);  // 获取当前位置,传递Position参数给函数displayPosition  
  7.     } else {  
  8.         alert("Not supported");  
  9.     }  
  10. }  
  11.   
  12. function displayPosition(position) {  
  13.       
  14.     var latitude = position.coords.latitude;  
  15.     var longitude = position.coords.longitude;  
  16.     var accuracy = position.coords.accuracy;  
  17.     // 以下属性和设备和实现相关,可能为null  
  18.     var heading = position.coords.heading;  
  19.     var speed = position.coords.speed;  
  20.   
  21.     var text = document.getElementById("position");  
  22.     text.innerHTML = "Latitude:" + latitude + ",Longitude:" + longitude  
  23.             + ",accuracy:" + accuracy + ",heading:" + heading + ",speed:"  
  24.             + speed;  
  25. }  

 

 

原创粉丝点击