HTML5: Location, gravity sensing, gyroscope

The geographical position

geolocation

window.navigator.geolocation
Copy the code

1.getCurrentPosition()Get current location information

2.watchPosition()Monitor position changes, same as the 1 parameter

3.clearWatch()Clear position monitoring

getCurrentPosition(success, error, options)

Success callback function

Errer callback function

The options parameter

function suc(pos){
    console.log(pos);
}
function err(pos){
    console.log(pos)
}
var options = {
    enableHighAccuracy :true,
    timeout : 4000
}
window.navigator.geolocation.getCurrentPosition(suc, err, options)
Copy the code

Geoposition Object attributes

Latitude longitude Altitude accuracy Altitude accuracy heading wind direction speed speedCopy the code

PositionError object

The user rejected code = 1 and could not obtain code = 2. The link timed out with code = 3Copy the code

Configuration parameters

EnableHighAccuracy Specifies whether high accuracy is required. The default value is false

Timeout unit MS Request timeout The default value is infinity

MaximumAge unit ms,

The watchPosition method constantly retrieves and updates the user’s location information.

If the expiration time of location information is set to 0, new location information is obtained unconditionally. The default value is 0

watchPosition() / clearWatch()

var id = geolocation.watchPosition(fu)Used to register listeners that are automatically called when the device’s geographical location changes (parameter andgetCurrentPositionThe same)



clearWatch(id)useclearWatchCleared to monitor

accelerometer

Devicemotion listens for acceleration changes

 window.addEventListener('devicemotion'.function(event){
    console.log(event);
 });
Copy the code

Properties contained in the DevicMotion event (read-only properties)

1. AccelerationIncludingGravity (including the gravity center of gravity and the Z axis 9.8, in the X direction at the same value for both) acceleration of gravity

Acceleration of gravitational acceleration (gyroscopic support)

3. RotationRate (alpha, beta, gamma

4. Interval Specifies the interval for obtaining data

window.addEventListener('devicemotion'.function(e){
   item.innerHTML = e.accelerationIncludingGravity.x + The '-' + e.accelerationIncludingGravity.y
}) 
Copy the code

Real – shake it

var SHAKE_THRESHOLD = 8;
var last_update = 0;
var x, y, z, last_x = 0, last_y = 0,last_z = 0;
var num = 0;
functionDeviceMotionHeadler (eventData) {/ / accelerationIncludingGravity (including gravity center of gravity and the Z axis 9.8, In the X direction on the value of the same) acceleration of gravity var acceleration = eventData. Both accelerationIncludingGravity; var curTime = new Date().getTime(); // Update after 300ms to improve performanceif((curTime - last_update) > 300){ var diffTime = curTime - last_update; last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z; Var speed = Math. Abs (x + y + z - last_x - last_y - last_z)/diffTime * 100;if(speed > SHAKE_THRESHOLD){
            alert('shaked~! ');
            var div = document.createElement('div');
            num ++;
            div.innerText = num;
            document.body.appendChild(div);   
        }
        last_x = x;
        last_y = y;
        last_z = z;
    }
} 
window.addEventListener('devicemotion' , deviceMotionHeadler, false);  
window.addEventListener('devicemotion' , deviceMotionHeadler, false); 
Copy the code

gyroscope

Deviceorientation monitors deviceorientation changes

window.addEventListener(deviceorientation, function(evevt){
    console.log(event);
})
Copy the code

Deviceorientation Attributes contained in the event

1. Alpha indicates the rotation Angle of the device along the Z-axis, ranging from 0 to 360.

2. Beta indicates the rotation Angle of the device on the X-axis, ranging from -180 to 180. It describes the rotation of the device from front to back.

3. Gamma indicates the rotation Angle of the device on the Y-axis, ranging from -90 to 90. It describes the rotation of the device from left to right.



4. WebkitCompassHeading: The Angle difference between the north compass and the direction being covered Due north is 0 degrees, due east is 90 degrees, due south is 180 degrees and due west is 270 degrees.

5. WebkitCompassAccuracy: indicates the accuracy of the needle, indicating the degree of plus or minus deviation. Generally is 10.

function DeviceOrientationHandler(event){
    var oAlpha = document.getElementById('alpha'),
        oBeta = document.getElementById('beta'),
        oGamma = document.getElementById('gamma');

    var alpha = event.alpha,
        beta = event.beta,
        gamma = event.gamma,
        webkitCompassHeading = event.webkitCompassHeading;

     if(alpha ! = null || beta ! = null || gamma ! =null){ var html =' ';
         if(gamma > 0){
             html = 'Lean to the right' + gamma;
         }else{
             html = 'Lean to the left' + gamma;
         }
         
         var str = ' ';
         if(beta > 0){
             str = 'Lean forward' + beta;
         }else{
             str = 'Lean back' + beta;
         }
         
         var head = ' ';
         var headNum = Math.round(Math.round(webkitCompassHeading / 45));
         switch(headNum){
            case 0 :
                head = 'the northeast';
                break
            case 1 :
                head = 'the east';
                break
            case 2 :
                head = 'the southeast';
                break
            case 3 :
                head = 'the south';
                break
            case 4 :
                head = Southwest of ' ';
                break
            case 5 :
                head = 'the west';
                break
            case 6 :
                head = 'the northwest';
                break
            case 7 :
                head = 'north';
         }
         head = head +  webkitCompassHeading;

         oAlpha.innerHTML = head;  
         oBeta.innerHTML = str;  
         oGamma.innerHTML = html;
     }else{
         alert('sorry')}}if(window.DeviceOrientationEvent){
    window.addEventListener('deviceorientation', DeviceOrientationHandler,true)}else{
     alert('DeviceOrientation not supported')}Copy the code