[JavaScript30] 🗺 21. GeoLocation

18502 ワード
JavaScript javascript30 テキストリンク

🗺 21. GeoLocation



イニシャルコード
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg class="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"><g><path fill="#ffffff" d="M32,1.824C15.361,1.824,1.825,15.361,1.825,32c0,16.639,13.537,30.176,30.175,30.176   S62.175,48.639,62.175,32C62.175,15.361,48.639,1.824,32,1.824z M29.715,3.988h1.12l2.333,3.807V3.988h1.069v5.701h-1.155  ~ 중략 ~"/></g></g></svg>


    <h1 class="speed">
        <span class="speed-value">0</span>
        <span class="units">KM/H</span>
    </h1>
    <style>
        html {
        font-size: 100px;
        }
        
        body {
        margin: 0;
        font-family: sans-serif;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background:
            radial-gradient(black 15%, transparent 16%) 0 0,
            radial-gradient(black 15%, transparent 16%) 8px 8px,
            radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
            radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
        background-color: #282828;
        background-size: 16px 16px;
        background-attachment: fixed;
        }

        .arrow {
        width: 250px;
        overflow: hidden;
        transition: all 0.2s;
        transform: rotate(0deg);
        display: inline-block;
        }

        h1 {
        color: white;
        font-weight: 100;
        font-size: 60px;
        display: flex;
        align-items: center;
        }

        .units {
        font-size: 15px;
        }
        /*Compass: https://thenounproject.com/search/?q=compass&i=592352*/
    </style>
</body>
</html>
初期画面

🌏 新知


👉 GeoLocation API


ユーザが必要に応じてWebアプリケーションに位置情報を提供することを可能にするAPI.

👉 watchPosition()


デバイスの場所が変更されたときに自動的に呼び出される関数を登録します.
エラー発生時に使用する関数を指定することもできます.
navigator.geolocation.watchPosition(success[, error[, options]])
GeolocationCoordinatesから入手した情報
  • latitude:緯度
  • longitude:硬度
  • altitude:古都
  • accuracy:緯度、経度精度
  • altitudeAccuracy:高さ精度
  • heading:移動方向
  • speed:設備速度
    • 注意:
  • https://developer.mozilla.org/ko/docs/Web/API/Geolocation_API
  • https://developer.mozilla.org/ko/docs/Web/API/Geolocation/watchPosition
  • https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates

    • 🌏 プロセス


    👉 0.運転環境の設定


    npmをインストールし、npmを起動します.
    この授業はmac環境でシミュレータを使いますが、window環境なので携帯で実行します.
    拡張プログラムやwindowシミュレータのようなものがあるかどうかを探して、携帯電話で実行するので、携帯電話で実行します.
    次のリンクを使用して、携帯電話で実行されているコンソールウィンドウをブラウザで確認します.
    https://backstreet-programmer.tistory.com/30
    携帯電話に接続するときは外部リンクで接続!

    👉 1.変数の宣言

    const arrow = document.querySelector('.arrow');
const speed = document.querySelector('.speed-value');
    矢印と速度で要素を選択します.

    👉 2.現在位置、速度値の関数を生成して出力します。

    navigator.geolocation.watchPosition((data)=>{
    console.log(data);
    speed.textContent = Math.round(data.coords.speed*100);
    arrow.style.transform = `rotate(${data.coords.heading}deg)`;
}, (err)=>{
    console.err(err); 
    alert('Hey! YOU GOTTA ALLOW THAT TO HAPPEN!!!');
});

    👉 watchPosition()


    コンソールからデータを取得します.

    この写真のタイトルとspeed部分が速度と方向になっています.
    △最初はシミュレータの方法を探してインターネットで開き、データオーバーフローがあるかどうかを確認してnullを出力しただけです.
    データのcoordsには情報が含まれています.
    授業中は価格がいいですが、私の携帯電話で運行するのは0です.xxxxx値*100を表示し、表示値を確認します.
    逆ダイヤル(`)で得られた値出力速度を用いてheadingで回転する.
    MFC Radio Buttonの基本応用
    FLIPアニメーションによる多次元メッシュの移行