실시간 위치 변경

사용자의 실시간 위치 변경 해보기

<script>
       
        function handleMotionEvent(event) {
            const x = event.accelerationIncludingGravity.x;
            const y = event.accelerationIncludingGravity.y;
            const z = event.accelerationIncludingGravity.z;

            console.log(x,y,z);
        }
        window.addEventListener('devicemotion', handleMotionEvent, true)
        

        function simulateMotionEvent() {
            const event = new Event('devicemotion');
            event.accelerationIncludingGravity = {
                x: Math.random() * 10 - 5,
                y: Math.random() * 10 - 5,
                z: Math.random() * 10 - 5,
            };

            window.dispatchEvent(event);
        }
        setInterval(simulateMotionEvent, 1000);
    </script>

 

두개의 함수는 별개 연관 되어 있지 않다.

handleMotionEvent 함수

사용자의 위치가 변경 되는 걸 알 수 있게 콘솔로 확인

devicemotion 

장치가 움직일때 발생 하는 이벤트

devicemotion 이벤트 객체의 속성

accelerationIncludingGravity.x 장치의 가로 방향 가속도

accelerationIncludingGravity.y 장치의 세로 방향 가속도

accelerationIncludingGravity.z 장치의 수직 방향 가속도

 

simulateMotionEvent 함수

1초씩 값이 변화가 되는지 확인용으로 작성

1. 함수정의

2. 새로운 devicemotion  이벤트 객체 생성 

3. 가속도 데이터 할당 event. accelerationIncludingGravity

4. 이벤트 발생 window.dispatchEvent(event);

 

 

참고 블로그

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicemotion_event