13.html5笔记7 地理位置信息， 移动端事件

image.png
image.png
image.png

如果设备没有位置信息, 谷歌浏览器,默认会从谷歌地图访问位置信息.
需要翻墙.

image.png

image.png

      function sucess (e) {
        console.log("sucess",e);
      }
      function fail (e) {
        console.log("error",e);
      }
      
      window.navigator.geolocation.getCurrentPosition(sucess,fail);

      // 开启监听, 当位置发生改变时,会触发.  消耗性能.
      var id = window.navigator.geolocation.watchPosition(sucess,fail,options);
      // 关闭监听, 需要获取 标识, id
      window.navigator.geolocation.clearWatch(id);

image.png

      var options = {
        // 请求时间, 超时会请求失败
        timeout : 1000,// 默认infinite
        // 是否高精准度
        enableHighAccuracy : true,// 默认 false
        // 过期时效, 默认 0 有效期无限.
        maximumAge : 1000
      };

image.png

---

测试移动端 能不能用 地理位置信息
打开 wampserver
用的是猎豹免费wifi 打开了共享,

苹果手机连接上去.
结果失败, 返回的 event.code = 2
返回的 event.message = origin does not have permission to use geolocation service
很懵逼, 百度搜索找到一个# 关于web移动端定位
需要改成 https 协议,wampserver部署https服务器 这尼玛,.

安卓手机也不行.
应该还是需要翻墙.

image.png
image.png
image.png
image.png

      var show1 = document.getElementById("show1");
      var show2 = document.getElementById("show2");
      var show3 = document.getElementById("show3");
      var show4 = document.getElementById("show4");
      var show5 = document.getElementById("show5");
      var show6 = document.getElementById("show6");
      var show7 = document.getElementById("show7");
      var show8 = document.getElementById("show8");
      var show9 = document.getElementById("show9");
      
      var lasttime = 0;
      window.addEventListener("devicemotion",function (e) {
        console.log(e);
        // 简单防抖
        if (new Date().getTime() - lasttime > 1000) {
          show1.innerText = "accelerationx" + e.acceleration.x;
          show2.innerText = "accelerationy" + e.acceleration.y;
          show3.innerText = "accelerationz" + e.acceleration.z;
          
          show4.innerText = "accelerationIncludingGravityx" + e.accelerationIncludingGravity.x;
          show5.innerText = "accelerationIncludingGravityy" + e.accelerationIncludingGravity.y;
          show6.innerText = "accelerationIncludingGravityz" + e.accelerationIncludingGravity.z;
          
          show7.innerText = "rotationRate alpha" + e.rotationRate.alpha;
          show8.innerText = "rotationRate beta" + e.rotationRate.beta;
          show9.innerText = "rotationRate gamma" + e.rotationRate.gamma;
          
          
            lasttime = new Date().getTime();
        }
      },false);

image.png
image.png
image.png

      var lasttime = 0;
      window.addEventListener("devicemotion", function(e) {
        console.log(e);
        // 简单防抖
        if(new Date().getTime() - lasttime > 1000) {
          // 加速度
          show1.innerText = "accelerationx" + e.acceleration.x;
          show2.innerText = "accelerationy" + e.acceleration.y;
          show3.innerText = "accelerationz" + e.acceleration.z;
          // 加速度 包含重力加速度
          show4.innerText = "accelerationIncludingGravityx" + e.accelerationIncludingGravity.x;
          show5.innerText = "accelerationIncludingGravityy" + e.accelerationIncludingGravity.y;
          show6.innerText = "accelerationIncludingGravityz" + e.accelerationIncludingGravity.z;
          // 旋转速率?
          show7.innerText = "rotationRate alpha" + e.rotationRate.alpha;
          show8.innerText = "rotationRate beta" + e.rotationRate.beta;
          show9.innerText = "rotationRate gamma" + e.rotationRate.gamma;

          lasttime = new Date().getTime();
        }
      }, false);
      var lasttime1 = 0;
      window.addEventListener("deviceorientation", function(e) {
        console.log(e);
        if(new Date().getTime() - lasttime1 > 1000) {
        // 旋转角度
        show10.innerText = "rotationRate alpha" + e.alpha;
        show11.innerText = "rotationRate beta" + e.beta;
        show12.innerText = "rotationRate gamma" + e.gamma;
        lasttime1 = new Date().getTime();
        }
      }, false);

image.png