HTML5 - 地理定位(Geolocation)

前言

H5 Geolocation API 用于获得用户的地理位置，鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用。还有，对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

浏览器支持情况：Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。

简单示例

必须使用 getCurrentPosition() 方法来获得用户的位置，如下demo可返回用户位置的经度和纬度。

  
  
  
  拖曳式列表排序
  
  
    span{border:1px solid rgb(0,0,0)}
  









获取位置信息


  // 获取显示元素(h1) / 反馈元素(span) 
  var span = document.getElementById('feedback')
  var h1 = document.getElementById('display')

  // 判断浏览器是否支持定位
  function getLocation() {
    if(navigator.geolocation){//true
      navigator.geolocation.getCurrentPosition(showPosition)
      span.innerHTML = `恭喜您，您的浏览器支持定位！`
      h1.innerHTML = `≡(▔﹏▔)≡正在努力获取中...`//给出等待反馈
    }else{//false
      span.innerHTML = `很遗憾，您的浏览器不支持定位！`      
    }
  }

  // 获取位置
  function showPosition(position){
    h1.innerHTML = `纬度：${position.coords.latitude}经度：${position.coords.longitude}`
  }

首先，检测是否支持地理定位，如果支持则运行 getCurrentPosition() 方法，如果 getCurrentPosition() 执行顺利，则向参数 showPosition() 中规定的函数返回一个 coordinates 对象，最后由 showPosition() 函数获取并显示精度和纬度，反之浏览器不支持则给出反馈信息。

错误处理和拒绝示例

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

  
  
  
  拖曳式列表排序
  
  
    span{border:1px solid rgb(0,0,0)}
  









获取位置信息


  // 获取显示元素(h1) / 反馈元素(span) 
  var span = document.getElementById('feedback')
  var h1 = document.getElementById('display')

  // 判断浏览器是否支持定位
  function getLocation() {
    if(navigator.geolocation){//true
      navigator.geolocation.getCurrentPosition(showPosition,showError)
      span.innerHTML = `恭喜您，您的浏览器支持定位！`
      h1.innerHTML = `≡(▔﹏▔)≡正在努力获取中...`//给出等待反馈
    }else{//false
      span.innerHTML = `很遗憾，您的浏览器不支持定位！`      
    }
  }

  // 获取位置
  function showPosition(position){
    h1.innerHTML = `纬度：${position.coords.latitude}经度：${position.coords.longitude}`
  }

  // 错误与拒绝处理
  function showError(error){
    switch(error.code){
      case error.PERMISSION_DENIED:
        span.innerHTML = `获取失败，您拒绝了获取地理位置的请求！(error)`
        break;
      case error.POSITION_UNAVAILABLE:
        span.innerHTML = `获取失败，您的位置信息不可用！(error)`
        break;
      case error.TIMEOUT:
        span.innerHTML = `获取失败，请求地理位置超时！(error)`
        break;
      case error.UNKNOWN_ERROR:
        span.innerHTML = `获取失败，发生未知错误(error)！`
        break;
    }
  }

如图，我点击了拒绝获取，得到了相应的反馈。当 getCurrentPosition()方法 第二个参数携带了 showError 后，就会带入到 showError函数 进行判断属于哪种错误，给出相应的反馈信息提示用户。

常见的错误代码：

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

地图中显示结果

以上所有实例，都是字符形式显示给用户，但大部分地理定位都是由地图展示出来。 如果在地图中显示结果，需要访问可使用经纬度的地图服务可使用第三方地图提供商，比如谷歌地图或百度地图：

function showPosition(position){
    var latlon=position.coords.latitude+","+position.coords.longitude; 
    var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
  	+latlon+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML="";
}

注意：只需修改 showPosition() 函数中的显示方式即可，不同的提供商写法略有不同。

给定位置的信息

如实例：

1. 更新本地信息
2. 显示用户周围的兴趣点信息
3. 交互式车载导航系统 (GPS)

getCurrentPosition() 方法 - 返回数据 若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

属性描述coords.latitude十进制数的纬度coords.longitude十进制数的经度coords.accuracy位置精度coords.altitude海拔，海平面以上以米计coords.altitudeAccuracy位置的海拔精度coords.heading方向，从正北开始以度计coords.speed速度，以米/每秒计timestamp响应的日期/时间