HTML5 Geolocation

在调用 HTML5 Geolocation API 函数前，需要确保浏览器支持此功能。当浏览器不支持时，可以提供一些替代文本，以提示用户升级浏览器或安装插件（如 Gears）来增强现有浏览器功能。清单 1 是浏览器支持性检查的一种途径。

清单 1. 检查浏览器支持性

 function testSupport() { 
    if (navigator.geolocation) { 
        document.getElementById(“support”).innerHTML = "支持 HTML5 Geolocation。"; 
    } else { 
    document.getElementById(“support”).innerHTML = 
    "该浏览器不支持 HTML5 Geolocation ！建议升级浏览器或安装插件（如 Gears）。"; 
    } 
 }

在清单 1 中，testSupport() 函数检测了浏览器的支持情况。这个函数应该在页面加载的时候就被调用，如果浏览器支持 HTML5 Geolocation，navigator.geolocation 调用将返回该对象，否则将触发错误。预先定义的 support 元素会根据检测结果显示浏览器支持情况的提示信息。

位置请求

在 HTML5 Geolocation 功能中，位置请求有两种：

• 单次定位请求
• 重复性位置更新请求

单次位置请求

在许多应用中，只检索或请求一次用户位置即可。例如前面提到的，午餐时间到了，要查询用户附近餐馆的特色菜及其价格和评论，就可以使用清单 2 所示的 HTML5 Geolocation API。

清单 2. 单词定位请求 API

 void getCurrentPosition(updateLocation, optional handleLocationError, optional options);

这个函数接受一个必选参数和两个可选参数。

• 必选参数 updateLocation 为浏览器指明位置数据可用时应调用的函数。获取位置操作可能需要较长时间才能完成，用户不希望在检索位置时浏览器被锁定，这个参数就是异步收到实际位置信息后，进行数据处理的地方。它同时作为一个函数，只接受一个参数：位置对象 position。这个对象包含坐标（coords）和一个获取位置数据时的时间戳，许多重要的位置数据都包含在 coords 中，比如：
  • latitude（纬度）
  • longitude（经度）
  • accuracy（准确度）

  毫无疑问，这三个数据是最重要的位置数据。latitude 和 longitude 包含 HTML5 Geolocation 服务测定的十进制用户位置。accuracy 以 m 为单位制定纬度和经度值与实际位置间的差距。局限于 HTML5 Geolocation 的实现方式，位置只能是粗略的近似值。在呈现返回值前请一定要检查返回值的准确度。如果推荐的所谓“附近的”餐馆，实际上要耗费用户几个小时的路程，那就不好了。

  坐标可能还包含其他一些数据，不能保证浏览器对其都支持，如果不支持则返回 null：

  • altitude – 海拔高度，以 m 为单位；
  • altitudeAccuracy – 海拔高度的准确度，以 m 为单位；
  • heading – 行进方向，相对于正北而言；
  • speed – 速度，以 m/s 为单位。

  清单 3 给出了 updateLocation() 函数的常用实现代码，该函数根据坐标信息执行具体的更新操作：用获得的位置信息分别更新 HTML 页面上三个空间元素的文本。

  清单 3. updateLocation() 函数使用示例

   function updateLocation(position) { 
      var latitude = position.coords.latitude; 
      var longitude = position.coords.longitude; 
      var accuracy = position.coords.accuracy; 
  
      document.getElementById(“纬度”).innerHTML = latitude; 
      document.getElementById(“经度”).innerHTML = longitude; 
      document.getElementById(“准确度”).innerHTML = accuracy + “米”; 
   }

• 可选参数 handleLocationError 为浏览器指明出错处理函数。位置信息请求可能因为一些不可控因素失败，这时，您需要在这个函数中提供对用户的解释。幸运的是，该 API 已经定义了所有需要处理的错误情况的错误编号。错误编号 code 设置在错误对象中，错误对象作为 error 参数传递给错误处理程序。这些错误编号有：
  • UNKNOWN_ERROR (0)：不包括在其它错误编号中的错误，需要通过 message 参数查找错误的详细信息。
  • PERMISSION_DENIED (1)：用户拒绝浏览器获得其位置信息。
  • POSITION_UNVAILABLE (2)：尝试获取用户信息失败。
  • TIMEOUT (3)：在 options 对象中设置了 timeout 值，尝试获取用户位置超时。

  在这些情况下，您可以通知用户应用程序运行出了什么问题，如清单 4 所示。

  清单 4. 使用错误处理函数

   function handleLocationError(error) { 
      switch (error.code) { 
      case 0: 
          updateStatus(“尝试获取您的位置信息时发生错误：” + error.message); 
          break; 
      case 1: 
          updateStatus(“用户拒绝了获取位置信息请求。”); 
          break; 
      case 2: 
          updateStatus(“浏览器无法获取您的位置信息。”); 
          break; 
      case 3: 
          updateStatus(“获取您位置信息超时。”); 
          break; 
      } 
   }

• 可选参数 options 对象可以调整 HTML5 Geolocation 服务的数据收集方式。该对象有三个可选参数：
  • enableHighAccuracy：如果启动该参数，浏览器会启动 HTML5 Geolocation 服务的高精确度模式，这将导致机器花费更多的时间和资源来确定位置，应谨慎使用。默认值为 false；
  • timeout：单位为 ms，告诉浏览器获取当前位置信息所允许的最长时间。如果在这个时间段内未完成，就会调用错误处理程序。默认值为 Infinity，即无穷大（无限制）；
  • maximumAge：以 ms 为单位，表示浏览器重新获取位置信息的时间间隔。默认值为 0，这意味着浏览器每次请求时必须立即重新计算位置。

  使用可选参数 options 更新我们的位置请求，让其包含一个使用 JSON 对象表示的可选参数，如下所示：

  清单 5. 包含 options 的更新位置请求

   navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, 
   {timeout: 10000});

  这个调用告诉 HTML5 Geolocation，当获取位置请求的处理时间超过 10s（10000ms）时触发错误处理程序，这时，error code 应该是 3。

重复性位置更新请求

有时候，仅获取一次用户位置信息是不够的。比如用户正在移动，随着用户的移动，页面应该能够不断更新显示附近的餐馆信息，这样，所显示的餐馆信息才对用户有意义。幸运的是，HTML5 Geolocation 服务的设计者已经考虑到了这一点，应用程序可以使用如下 API 进行重复性位置更新请求，当监控到用户的位置发生变化时，HTML5 Geolocation 服务就会重新获取用户的位置信息，并调用 updateLocation() 函数处理新的数据，及时通知用户。

清单 6. 重复性位置更新请求 API

 void watchPosition(updateLocation, optional handleLocationError, optional options);

这个函数的参数跟前面提到的 getCurrentPosition 函数的参数一样，不再累赘介绍。

关闭更新也很简单，如果应用程序不需要再接收用户的位置更新消息，只需要使用 clearWatch() 函数。参照清单 7 给的例子。

清单 7. watchPosition 和 clearWatch 的使用

 var watchId = navigator.geolocation.watchPosition(updateLocation, handleLocationError); 
 // 基于持续更新的位置信息实现一些功能…
 // 停止接收位置更新消息
 navigator.geolocation.clearWatch(watchId);

构建实用应用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>geoLocation</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        var mydiv ;
        var options = "{enableHighAccuracy:false,maximumAge:1000}";
        function locationSuccess(position){
            alert(1);
            if(position){
                var lat = position.coords.latitude;
                var longi = position.coords.longitude;
                mydiv.innerHTML +="LAT:"+lat+"   <br/> LONGI:"+longi;
            }
        }


        function locationError(error){
            switch(error.code){
                case error.TIMEOUT:
                    alert("A timeout occured! Please try again!");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert('We can\'t detect your location. Sorry!');
                    break;
                case error.PERMISSION_DENIED:
                    alert('Please allow geolocation access for this to work.');
                    break;
                case error.UNKNOWN_ERROR:
                    alert('An unknown error occured!');
                    break;


            }
        }


        function start(){
            mydiv =  document.getElementById("myid");
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{
                    // 指示浏览器获取高精度的位置，默认为false
                    enableHighAcuracy: true,
                    // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
                    timeout: 5000,
                    // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
                    maximumAge: 3000
                });
            }else{
                alert("Your browser does not support Geolocation!");
            }
        }
    </script>


 <body οnlοad="start()">
<div id="myid"></div>
</body>
</html>