HTML5 —— Geolocation API

Geolocation

地理位置（Geolocation）是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。

在访问位置信息前，浏览器都会询问用户是否共享其位置信息，以 Chrome 浏览器为例，如果您允许 Chrome 浏览器与网站共享您的位置，Chrome 浏览器会向 Google 位置服务发送本地网络信息，估计您所在的位置。然后，浏览器会与请求使用您位置的网站共享您的位置。

因为浏览器的支持度可能参差不齐，因此需要判断当前浏览器是否支持。

if(navigator.geolocation) {
    // 支持
  } else {
    alert('您的浏览器不支持HTML5的Geolocation!请更换浏览器~');
  }

HTML5 的 navigator对象的Geolocation属性的存在三个方法。

一、getCurrentPosition

getCurrentPosition (success, fail, options)

if (navigator.geolocation) {
      // 支持
      navigator.geolocation.getCurrentPosition(function(position) {
          console.log(position);
           // position为成功后的位置对象，包含位置信息
        
          // getCurrentPosition执行成功后，会把getSuccess传一个position对象
          // position有两个属性，coords和timeStamp
          // timeStamp表示地理数据创建的时间？？？？？？
          // coords是一个对象，包含了地理位置数据
          console.log(position.timestamp); //当前创建时间  1529838305986


          // 估算的纬度
          console.log(position.coords.latitude); // 39.08737424258291

          // 估算的经度
          console.log(position.coords.longitude); //  117.6894629844543

          // 估算的高度 (以米为单位的海拔值)
          console.log(position.coords.altitude); // 0

          // 所得经度和纬度的估算精度，以米为单位
          console.log(position.coords.accuracy); // 324

          // 所得高度的估算精度，以米为单位
          console.log(position.coords.altitudeAccuracy); // null

          // 宿主设备的当前移动方向，以度为单位，相对于正北方向顺时针方向计算
          console.log(position.coords.heading);   //NAN

          // 设备的当前对地速度，以米/秒为单位
          console.log(position.coords.speed);   // NAN

          // 除上述结果外，Firefox还提供了另外一个属性address
          if(position.address){
               //通过address，可以获得国家、省份、城市
               console.log(position.address.country);
               console.log(position.address.province);
               console.log(position.address.city);
          }
      }, locationError, {
        // 指示浏览器获取高精度的位置，默认为false
        enableHighAcuracy: true,
        // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
        timeout: 5000,
        // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
        maximumAge: 3000
      });
      
      
    } else {
      alert('您的浏览器不支持HTML5的Geolocation!请更换浏览器~');
    }

    // 获取失败的回调函数
    function locationError(error) {
      switch (error.code) {
        case 1:
          alert("位置服务被拒绝");
          break;

        case 2:
          alert("暂时获取不到位置信息");
          break;

        case 3:
          alert("获取信息超时");
          break;

        case 4:
          alert("未知错误");
          break;
      }
    }

success回调

请求成功后返回的是一个 position对象。position 的 coords 是一个包含有用户位置信息的对象。

经度 : coords.longitude
纬度 : coords.latitude
准确度 : coords.accuracy
海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy
行进方向 : coords.heading
地面速度 : coords.speed
时间戳 : new Date(position.timestamp)

fail回调

请求失败后会返回一个error对象，error.code 为错误的状态值

1 —— Permission denied - 用户不允许地理定位
2 —— Position unavailable - 无法获取当前位置
3 —— Timeout - 操作超时

option是一个参数对象

enableHighAcuracy: true,//是否要求高精度的位置信息
timeout: 5000,//获取位置允许最长时间，如果在这个时间之内没有获取到，就返回错误
maximumAge: 5000//位置可以缓存的最大时间，如果缓冲时间是两分钟，那么你10：00获取了一次地址，10：01再次获取地址，依旧还是上一次的地址，因为还没有超出缓冲时间。

二、watchCurrentPosition

持续获取用户的位置信息.

int watchCurrentPosition(onSuccess, onError, option)

该方法返回的是一个类似于SetInterval的返回值。可以被clearWatch使用。

三、clearWatch

停止当前的watchCurrentPosition

通常我们都是配合百度、谷歌等的API来使用的。

本文转载于猿2048:HTML5 —— Geolocation API

Geolocation

一、getCurrentPosition

二、watchCurrentPosition

三、clearWatch

猜你喜欢