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对象。positioncoords 是一个包含有用户位置信息的对象。

经度 : 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来使用的。

    原文作者:Meils
    原文地址: https://segmentfault.com/a/1190000015372639
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞