html5 使用Geolocation来获取经纬度地址

最新推荐文章于 2024-09-18 15:12:56 发布

前端独秀

最新推荐文章于 2024-09-18 15:12:56 发布

阅读量921

点赞数

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=j0i2i02hj&title=html5+%E4%BD%BF%E7%94%A8Geolocation%E6%9D%A5%E8%8E%B7%E5%8F%96%E7%BB%8F%E7%BA%AC%E5%BA%A6%E5%9C%B0%E5%9D%80

版权

前端专栏收录该内容

493 篇文章 3 订阅

订阅专栏

以前如果要获取互联网用户所在地都是根据用户的IP地址来获取地理位置，这样获取到的数据和真实数据有很大的偏差。为了获取更加精确的位置，可以使用了html5的geolocation来获取经纬度，然后再获取所在地理位置，如何获取，我在下面会说到。先说下基本概念。

Geolocation在的navigator 对象中，我们可以通过 navigator.geolocation 来使用它。不支持 geolocation 的浏览器并不包含这一对象，那么可以通过下面的代码来做能力检测，对不同的浏览器做不同的处理。在访问 geolocation 对象时，即调用 geolocation 下面的方法时，浏览器会弹出提示，询问用户是否许可网站提供的位置服务，只有在得到用户许可过后，服务才会继续，否则将被停止。　

常用的navigator.geolocation对象有以下三种方法：

获取当前地理位置：navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)

持续获取地理位置：navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)

清除持续获取地理位置事件：navigator.geolocation.clearWatch(watch_position_id)　　

参数position_options是配置项，由JSON格式传入：

enableHighAccuracy：true/false，它将告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI，值为 true 的时候，浏览器会尝试启用这些设备，默认指为 true，在这种情况下，浏览器会尽可能地进行更为精确的查询，简单地说，如果用户有可用的 GPS 设备，会返回 GPS 设备的查询结果，IP 是最后的选择，对于移动设备来说，网络接入点(基站)或许成为另一个选择，对此我还没有完全了解，但根据测试，即时没有任何额外功能的手机，也能够得到更为精确的查询结果。

maximumAge：单位毫秒，告诉设备缓存时间，主要用于设备的省电或者节省带宽方面。

timeout：单位毫秒，超时事件，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。

 
       var position_option = { 
      
       enableHighAccuracy:  
       true 
       , 
      
       maximumAge:  
       30000 
       , 
      
       timeout:  
       20000 
      
       }; 
      
       navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError, position_option); 
      
       function getPositionSuccess( position ){ 
      
       var lat = position.coords.latitude; 
      
       var lng = position.coords.longitude; 
      
       alert(  
       "您所在的位置： 纬度"  
         lat    
       "，经度"  
         lng ); 
      
       if 
       (typeof position.address !==  
       "undefined" 
       ){ 
      
       var country = position.address.country; 
      
       var province = position.address.region; 
      
       var city = position.address.city; 
      
       alert( 
       ' 您位于 '  
         country   province    
       '省'  
         city   
       '市' 
       ); 
      
       } 
      
       }

coords其他返回信息：

coords.accuracy：返回经纬度的精度（米）

coords.speed :速度

coords.altitude ：当前的高度，海拔（米）

coords.altitudeAccuracy：高度的精度（米）

coords.heading：朝向

 
       function  
       getPositionError(error) { 
      
       switch  
       (error.code) { 
      
       case  
       error.TIMEOUT: 
      
       alert( 
       "连接超时，请重试" 
       ); 
      
       break 
       ; 
      
       case  
       error.PERMISSION_DENIED: 
      
       alert( 
       "您拒绝了使用位置共享服务，查询已取消" 
       ); 
      
       break 
       ; 
      
       case  
       error.POSITION_UNAVAILABLE: 
      
       alert( 
       "获取位置信息失败" 
       ); 
      
       break 
       ; 
      
       } 
      
       }