トップへ(mam-mam.net/)

WEBサイトでスマートフォンのセンサーで方位磁石

検索:

Javascriptでdeviceorientationイベントを使うとデバイスの相対的な物理的向きを取得することができます。
deviceorientationabsoluteイベントを使うと絶対的な物理的向きを取得することができます。
スマートフォン、又は傾きセンサー搭載のPCでこのページを表示すると、x,y,z軸の向きが表示されます。
Android(対応していない端末あり)はdeviceorientationabsoluteイベントでコンパスを表示しています。
iPhoneはdeviceorientationイベントでwebkitCompassHeadingプロパティを使ってコンパスを表示しています。
コンパスが正しい方向を向かないときはスマホを八の字に動かしてみてください。

<div id="orientation"></div>

<script>
  window.addEventListener("load",function(){
  window.addEventListener("deviceorientation", function(e){
    let a=e.absolute;//方位が地球座標フレームかデバイス任意フレームか
    let z=e.alpha;//z軸 0~360
    let x=e.beta; //x軸 -180~180
    let y=e.gamma;//y軸 -90~90
    document.getElementById("orientation").innerHTML=
      " alpha(z軸):"+z.toFixed(3)+"<br>"+
      "  beta(x軸):"+x.toFixed(3)+"<br>"+
      " gamma(y軸):"+y.toFixed(3);
    });
  });
</script>