·您当前的位置:主页 > 技术教程 > Html5技术 >

[HTML5]HTML5地理定位Geolocation来定位用户的位置

时间:2017-01-24 20:16酷播
[HTML5]HTML5地理定位Geolocation来定位用户的位置,注意: Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确

HTML5 Geolocation(地理定位)用于定位用户的位置。


定位用户的位置

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。


浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation(地理定位).

注意: Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。


HTML5 - 使用地理定位

请使用 getCurrentPosition() 方法来获得用户的位置。

下例是一个简单的地理定位实例,可返回用户位置的经度和纬度:

  1. var x=document.getElementById("demo"); 
  2. function getLocation() 
  3.     if (navigator.geolocation) 
  4.     { 
  5.         navigator.geolocation.getCurrentPosition(showPosition); 
  6.     } 
  7.     else 
  8.     { 
  9.         x.innerHTML="酷播cuplayer.com提示:该浏览器不支持获取地理位置。"
  10.     } 
  11.  
  12. function showPosition(position) 
  13.     x.innerHTML="酷播cuplayer.com提示:纬度: " + position.coords.latitude + 
  14.     "<br>酷播cuplayer.com提示:经度: " + position.coords.longitude;     
  15. }  

实例解析:

  • 检测是否支持地理定位
  • 如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。
  • 如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象
  • showPosition() 函数获得并显示经度和纬度

上面的例子是一个非常基础的地理定位脚本,不含错误处理。


处理错误和拒绝

getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数:

  1. function showError(error) 
  2.     switch(error.code) 
  3.     { 
  4.         case error.PERMISSION_DENIED: 
  5.             x.innerHTML="用户拒绝对获取地理位置的请求。" 
  6.             break; 
  7.         case error.POSITION_UNAVAILABLE: 
  8.             x.innerHTML="位置信息是不可用的。" 
  9.             break; 
  10.         case error.TIMEOUT: 
  11.             x.innerHTML="请求用户地理位置超时。" 
  12.             break; 
  13.         case error.UNKNOWN_ERROR: 
  14.             x.innerHTML="未知错误。" 
  15.             break; 
  16.     } 
  17. }  

错误代码:

  • Permission denied - 用户不允许地理定位
  • Position unavailable - 无法获取当前位置
  • Timeout - 操作超时

热门文章

请稍候...
  • 锁定云视频大聚惠
  • 相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器