最新的Web开发教程

HTML5地理位置


该HTML地理位置API来定位用户的位置。


什么是W3C地理位置API?

W3C的地理位置API是万维网联盟(W3C)的努力,标准化的接口来检索客户端设备的地理位置信息。

它定义了一组对象,ECMAScript标准兼容的,即在客户端应用程序执行通过位置信息服务器,其是透明的应用程序编程接口(API)的咨询给客户端的设备的位置。

的位置信息的最常见的来源是IP地址,无线网络连接和蓝牙MAC地址,无线电频率识别(RFID),Wi-Fi连接位置,或设备的全球定位系统(GPS)和GSM / CDMA的小区ID。

该位置还附有取决于可用的最佳位置信息源在给定的精度。


部署在Web浏览器

网页可能会在Web浏览器中实现它直接使用地理位置API。 从历史上看,一些浏览器可能获得通过谷歌齿轮插件的支持,但是这是在2010年停产和服务器端API它取决于停止在2012年响应。

地理位置API非常适合的Web应用程序的移动设备,诸如个人数字助理(PDA)和智能电话。 在台式计算机上,W3C的地理位置API在Firefox的工作,因为3.5版本,谷歌Chrome,歌剧10.6,IE浏览器9.0和Safari 5在移动设备上,它适用于Android(2.0+固件)的iOS,Windows Phone的和Maemo。

适用于Android和Symbian的设备(S60代3 5)自2010年11月24日 - W3C的地理位置API也受到的Opera Mobile 10.1的支持。

谷歌齿轮为老年人和不符合标准的浏览器,包括Internet Explorer 7.0或更高版本的齿轮插件,和谷歌Chrome,其实现的齿轮本身提供地理位置支持。 它还支持为Android浏览器(预2.0版)和Opera Mobile的Windows Mobile的插件移动设备的地理位置。

然而,谷歌齿轮地理位置API与W3C地理位置API不兼容,并且不再支持。


特征

W3C地理位置API的结果通常会给4点位置的性质,包括纬度和经度(坐标),高度(高度),和[位置的精度聚集],而这一切取决于位置信息源。

在某些查询,高度可能会产生或没有返回值。


找到用户的位置

该HTML地理位置API来获取用户的地理位置。

由于这会危及隐私,除非用户同意它的位置是不可用的。


浏览器支持

在表中的数字规定,完全支持地理位置第一个浏览器版本。

API
Geolocation 5 9 3.5 5 16.0

Note:地理位置更为精确与GPS设备,如iPhone


使用HTML地理位置

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>
试一试»

为例进行了说明:

  • 检查是否支持地理位置
  • 如果支持,运行getCurrentPosition()方法。 如果没有,则显示一条消息向用户
  • 如果getCurrentPosition()方法是成功的,它返回一个坐标反对在参数中指定的功能(showPosition)
  • 所述showPosition()函数输出纬度和经度

上面的例子是一个非常基本的地理位置脚本,没有错误处理。


处理错误和拒绝

所述的第二个参数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;
    }
}
试一试»

显示结果在地图

要在地图上显示结果,你需要访问地图服务,如谷歌地图。

在下面的例子中,返回的纬度和经度是用来显示在谷歌地图的位置(using a static image)

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+"'>";
}
试一试»

谷歌地图脚本
如何显示一个互动的谷歌地图有一个标记,缩放和拖拽选项。


特定位置的信息

此页面演示了如何显示,用户在地图上的位置。

地理位置也是特定位置的信息,如非常有用:

  • 截至到最新的本地信息
  • 显示点的感兴趣的用户附近
  • 逐向道路导航(GPS)

getCurrentPosition()方法-返回数据

getCurrentPosition()如果它是成功方法返回一个对象。 纬度,经度和准确性属性始终返回。 如果有其他属性被返回:

属性 返回
coords.latitude 纬度为十进制数
coords.longitude 经度为十进制数
coords.accuracy 位置精度
coords.altitude 在米的海拔高度平均海平面以上
coords.altitudeAccuracy 位置的高度准确性
coords.heading 作为前进的度数从北顺时针
coords.speed 以每秒米的速度
timestamp 响应的日期/时间

Geolocation对象 - 其他有趣的方法

watchPosition() -返回用户的当前位置,并继续返回更新的位置随着用户移动(like the GPS in a car)

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

下面的例子示出了watchPosition()方法。 您需要一种精确的GPS设备来测试这个(like 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>
试一试»