HTML5 Geolocation用来定位用户的位置。

HTML5 Geolocation用来定位用户的位置。

定位用户的位置

HTMl5 Geolocation API用来得到用户的地理位置。

由于这个可能和个人隐私相关，除非用户同意否则不能使用。

浏览器支持

IE9。Firefox，Chrome，Opera和Safari 5都支持这个特性。

注意：假设使用带有GPS的设备，比如iphone，Geolocation将会更加准确。

HTML5 - 使用Geolocation

使用getCurrentPosition()方法得到用户的位置。

以下这个样例是一个简单的返回用户所在地点经纬度的样例：

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

在线演示

代码说明：

• 首先检查Geolocation是否支持
• 假设支持。执行getCurrentPosition()方法。假设不支持。显示给用户信息
• 假设getCurrentPosition()方法成功了，返回一个坐标的对象到參数指定的方法（showPosition）中
• showPosition()方法得到显示的经纬度

上面的样例是一个主要的Geolocation脚本，没有做错误处理。

处理错误和拒绝

getCurrentPosition()方法的第二个參数用来处理错误。指定一个方法当无法得到用户位置的时候来处理错误。

function showError(error)
{
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
}

在线演示

错误代码例如以下：

• 权限拒绝：用户不须要运行Geolocation
• 位置不存在：无法得到用户位置
• 超时：操作超时

在Map中显示结果

为了在map中显示结果，你须要訪问一个能够处理经纬度的地图服务，比如，GoogleMaps：

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="<img src=""+img_url+""+img_url+"" />";
}

在上面的样例中，我们使用返回的经纬度来展示位置到Google地图中。

怎样使用脚本来展示一个互动的地图，带有标记，缩放和拖动功能。

在线演示

地理位置指定信息

这里我们演示了怎样展示用户位置到地图上。然而，Geolocation也相同对于地理指定的信息很实用。

比如：

• 最新的本地信息
• 展示用户周围的有趣地方
• 导航(GPS)

getCurrentPosition()方法 - 返回数据

假设成功getCurrentPosition()方法将返回一个对象。

经纬度和准确的信息也会返回。其他属性假设存在也返回。

Property                                                 Description

coords.latitude                                     The latitude as a decimal number

coords.longitude                                 The longitude as a decimal number

coords.accuracy                                  The accuracy of position

coords.altitude                                     The altitude in meters above the mean sea level

coords.altitudeAccuracy                     The altitude accuracy of position

coords.heading                                   The heading as degrees clockwise from North

coords.speed                                      The speed in meters per second

timestamp                                            The date/time of the response

Geolocation 对象 - 其他方法

watchPosition()方法 - 返回眼下的用户位置而且当用户移动后继续返回更新的位置(比如车里的GPS)。

clearWatch()方法 - 停止watchPosition()方法

以下的代码展示了怎样使用watchPositin()方法，注意你须要一个准确的GPS设备来測试（比如。iphone）

<script>
var x=document.getElementById("demo");
function getLocation()
{
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
}
 
function showPosition(position)
{
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
}
</script>