首页风格
门户
博客

GBin1专题之HTML5教程 - 第十篇:HTML5 Geolocation

日期:2012-4-24  来源:GBin1.com

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

定位用户的位置

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

因为这个可能和个人隐私相关,除非用户允许否则不能使用。

浏览器支持

iefirefoxchromeoperasafari

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>

在线演示

来源:GBin1专题之HTML5教程 - 第十篇:HTML5 Geolocation

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com


  1. Kyle

    此评论在等待批准中

    2014-6-20 下午1:12

  2. GBin1

    通过浏览器来判断地理位置,肯定不会像手机那么准确的
    2012-7-19 上午10:27

  3. felix

    这个返回的是网关地址吧 超级不准确
    2012-7-18 下午6:34
今日推荐