HTML5 Geolocation【HTML5教程 - 第十篇】

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()方法将返回一个对象。经纬度和准确的信息也会返回。其它属性如果存在也返回。

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>

在线演示

本文链接：HTML5教程 - 第十篇：HTML5 Geolocation，转自：http://www.gbin1.com/tutorials/html5-tutorial/html5-geolocation/