ユーザー位置を検出する方法

5795 ワード
javascript incoder css html テキストリンク
こんにちは、友人、今日このブログでは、我々はどのようにJavaScriptを使用してユーザーの位置を検出する方法を学びます.以前のブログでは、HTML、CSS、JavaScript、フクロウのカルーセルプラグインを使用してカスタムカードスライダーを作成する方法を見ました.今は、ユーザーの位置検出器を作成する時間です.JavaScriptに関する多くのプロジェクトも共有しました.だからチェックを忘れないでくださいhere .
ユーザーの位置を取得するには、ユーザーの地理的位置を返すJavaScriptのジオロケーションAPIを使用できます.我々は現在の緯度と経度を取得することができますこのAPIを使用して、彼らはそれを許可する場合.この小さなプロジェクト(JavaScriptを使用してユーザーの位置を検出する方法)では、Webページには、アイコンとボタンを持っているボックスがあります.
閉じるこの動画はお気に入りから削除されています
  • Responsive Sidebar Menu Design
  • Custom Video Player Design
  • Custom Context or Right Click Menu Design
  • Cookie Consent Box Design
    • そのボタンをクリックすると、許可とブロックオプションで場所プロンプトが開きます.あなたが要求をブロックするならば、ボタンテキストは「要求を否定しました」に変わります.あなたが要求を許可するならば、「あなたの場所を見つける」ことが、示されます.数秒後、市、郵便番号、州コード、国を含むあなたの現在の位置が表示されます.
    ブラウザのコンソールでは、道路、自治体、大陸などを含む多くの他の場所の詳細を取得します.私はあなたがデモビデオやフルビデオのチュートリアルを見ることができると言っていることと困難を感じている場合.
    プレビューが可能ですhere .

    HTMLコード


    <!-- ------------------ Created By InCoder ------------------ -->
<!DOCTYPE html>
<html lang="en">

<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>Detect User Location Using Javascript | InCoder</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>

<body>
    <div class="card">
        <div class="icon">
            <i class="fa-solid fa-location-dot"></i>
        </div>
        <p></p>
        <div class="location"></div>
        <button class="detectBtn">Detect My Location</button>
    </div>

    <script src="script.js"></script>
</body>

</html>

    CSSコード


    /* ------------------ Created By InCoder ------------------ */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #54a6d8;
}

.card {
    width: 22rem;
    margin: 1rem;
    text-align: center;
    border-radius: 10px;
    background-color: #fff;
    font-family: 'Ubuntu', sans-serif;
}

.icon {
    font-size: 6rem;
    margin-top: 1rem;
    color: #424040f0;
    margin-bottom: 1rem;
}

.location {
    font-size: 2rem;
    font-weight: bold;
    color: #424040f0;
    margin-bottom: 1rem;
}

.card p {
    font-size: 1rem;
    color: #424040f0;
    margin-bottom: 1rem;
}

.detectBtn {
    width: 15rem;
    border: none;
    color: #fff;
    outline: none;
    height: 2.5rem;
    font-size: 1rem;
    cursor: pointer;
    margin-bottom: 1rem;
    border-radius: .3rem;
    background-color: #54a6d8;
    transition: background-color .3s;
}

.detectBtn:hover {
    background-color: #424040f0;
}

    ジャバスクリプトコード


    let text = document.querySelector('.card p');
let locationBox = document.querySelector('.location');
let detectBtn = document.querySelector('.detectBtn');

let successFunction = (position) => {
    text.innerHTML = '';
    detectBtn.innerHTML = 'Detecting Your Location...';
    let { latitude, longitude } = position.coords;
    fetch(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=YOUR_API_KEY`)
        .then(response => response.json()).then(response => {
            let allDetails = response.results[0].components;
            console.table(allDetails);
            let { county, postcode, country, state_code } = allDetails;
            locationBox.innerText = `${county} ${postcode} ${state_code}, ${country}`;
            detectBtn.style.display = 'none';
        }).catch(() => {
            detectBtn.innerText = "Something went wrong";
        });
}

let errorFunction = (error) => {
    if (error.code == 1) {
        text.innerHTML = 'You denied to access you location';
    } else if (error.code == 2) {
        text.innerHTML = 'Location is not available';
    } else {
        text.innerHTML = 'Something went wrong';
    }
}

detectBtn.addEventListener('click', () => {
    if (navigator.geolocation) {
        text.innerHTML = 'Allow location access to Detect your location.';
        navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
    } else {
        alert('It seems like Geolocation, which is required for this page, is not enabled in your browser.');
    }
});
    反応するイオンSSR:アドベンチャー
    ローカルDockerでCentOS立てた時の忘備録　~Docker基本（pull, run, save, load)~