码迷,mamicode.com
首页 > Web开发 > 详细

使用HTML5进行地理位置定位。误差在+-500m

时间:2015-12-20 19:19:27      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5.         <title>Geolocation 对象,Geolocation 与 Google Map 交互 ------ JS  
  6.             Mix</title>  
  7.     </head>  
  8.     <body>  
  9.         <input type="button" id="getPos" value="获取我的位置">  
  10.         <div id="info" class="">  
  11.             您所在的位置: 经度  
  12.             <span class="tip">unknown</span>,纬度  
  13.             <span class="tip">unknown</span>  
  14.         </div>  
  15.   
  16.         <script type="text/javascript">  
  17.             var t = 0;  
  18.             var dom = {  
  19.                 btn : document.getElementById(‘getPos‘),  
  20.                 info : document.getElementById(‘info‘)  
  21.             };  
  22.   
  23.             dom.btn.onclick = function(){  
  24.                 if (navigator.geolocation) {  
  25.                     dom.info.innerHTML = "请等待查询结果返回";  
  26.                     dom.info.className = "warn";  
  27.                     navigator.geolocation.getCurrentPosition(getPositionSuccess,getPositionError,{timeout:5000});  
  28.                 }else {  
  29.                      dom.info.innerHTML = "抱歉,您所使用的浏览器不支持 Geolocation 接口";  
  30.                      dom.info.className = "warn";  
  31.                 }  
  32.             }  
  33.               
  34.               
  35.             function getPositionSuccess(position){  
  36.                 var lat = position.coords.latitude;  
  37.                 var lng = position.coords.longitude;  
  38.                 dom.info.innerHTML = "您所在的位置: 经度" + lat + ",纬度" + lng;  
  39.                   
  40.                   
  41.                 if(typeof position.address === "undefined"){  
  42.                     dom.info.innerHTML += "<br /><span class=‘tip‘>您的浏览器目前仅提供坐标查询,使用 Firefox 3.5+ 可获得更多信息</span>";  
  43.                 }else{  
  44.                     dom.info.innerHTML += "<br /><span class=‘tip‘>" + position.address.country + " , " + position.address.region + " , " + position.address.city+"</span>";  
  45.                 }  
  46.             }  
  47.               
  48.               
  49.               
  50.             function getPositionError(error){  
  51.                 switch(error.code){  
  52.                     case error.TIMEOUT :  
  53.                         dom.info.innerHTML = "连接超时,请重试";  
  54.                         break;  
  55.                     case error.PERMISSION_DENIED :  
  56.                         dom.info.innerHTML = "您拒绝了使用位置共享服务,查询已取消";  
  57.                         break;  
  58.                     case error.POSITION_UNAVAILABLE :   
  59.                         dom.info.innerHTML = "亲爱的火星网友,非常抱歉<br />我们暂时无法为您所在的星球提供位置服务";  
  60.                         break;  
  61.                 }  
  62.             }  
  63.               
  64.         </script>  
  65.     </body>  
  66. </html>  

使用HTML5进行地理位置定位。误差在+-500m

标签:

原文地址:http://www.cnblogs.com/jiaze/p/5061542.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!