发表于 & 归档在 HTML, Web.

本章介绍获取和跟踪主机设备地理位置信息的相关JavaScript类,这些类隐藏了位置信息如何获取的具体实现──是通过GPS, IP地址,Wi-Fi,蓝牙或者其他技术?这些类允许你获取当前位置,或者一系列位置更新信息。

地理位置类

Navigator 对象具有只读的 Geolocation 实例变量,你可以通过这个 Geolocation 对象获取位置信息, Geolocation 中获取位置信息的函数通常可以设置回调函数, PositionCallback 或者 PositionErrorCallback 实例,因为获取位置信息可能会被延迟,无法立即返回结果,当位置被获取或者出现异常时会触发这些回调函数,如果位置信息获取到,位置回调函数会传入一个位置对象,如果出现异常,异常回调函数会传入一个 PositionError 实例对象描述错误信息,位置信息使用经纬度表示.

获取当前位置

Geolocation 类最常见的使用是获取当前位置,如你的网页程序获取当前用户的位置显示在地图上,使用 Navigator 对象 Geolocation 属性的 getCurrentPosition 方法获取当前位置,传入你的回调函数如下:

   // Get the current location
    navigator.geolocation.getCurrentPosition(showMap);

设置回调函数的位置参数如下:

    function showMap(position) {
      // Show a map centered at position
    }

使用位置对象的 coords 实例获取经纬度信息:

    latitude = position.coords.latitude;
    longitude = position.coords.longitude;

跟踪当前位置

你可以跟踪当前位置,如在网页程序中将你当前位置显示在地图上,如果你注册了位置变化监听,你可以在地图上滚动显示一系列你的位置移动信息。如果注册位置变化监听,每次位置改变都会触发你的回调函数,这些回调会一直持续,直到你取消对位置变化的监听。

使用 Geolocation 的 watchPosition 函数监听位置变化,通过参数传入回调函数,如下面的例子,scrollMap 函数会在每次位置变化时调用:

    // Register for location changes
    var watchId = navigator.geolocation.watchPosition(scrollMap);

回调函数参数如下:

    function scrollMap(position) {
      // Scroll the map to center position
    }

类似 “获取当前位置” ,使用传入的位置对象的 coords 实例获取经纬度信息。

使用Geolocation 的 clearWatch 方法清除位置变化监听,如当用户点击某个按钮或者点击地图时:

    function buttonClickHandler() {
      // Unregister when the user clicks a button
      navigator.geolocation.clearWatch(watchId);
    }

处理位置异常

你的网页程序需要对请求位置信息时出现的错误做处理,例如显示一条信息,告诉用户位置无法获取,可能是网速太慢或者其他问题。

当监听位置变化时,你可以使用 Geolocation 类的 watchPosition 方法传入一个处理错误的回调函数,如下:

    // Register for location changes
    var watchId = navigator.geolocation.watchPosition(scrollMap, handleError);

这个异常回调函数会传入一个 PositionError 对象作为参数:

    function handleError(error) {
      // Update a div element with the error message
    }

发表评论

电子邮件地址不会被公开。 必填项已用*标注


九 + = 16

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>