JavaScript를 사용하여 브라우저에서 사용자 위치 가져오기 | ShriekDj의 솔루션

17705 단어 geolocationjavascriptshriekdjwebdev
그래서 오늘은 JavaScript를 사용하는 웹 브라우저의 Geolocation API를 사용하여 고객에게 자신의 위치를 ​​묻고 양식으로 제출하는 방법에 대한 코드와 세부 정보를 공유하겠습니다.

그러나 코드를 복사하여 붙여넣기 전에 이 기능은 https가 아닌 http 프로토콜에서만 작동하지만 이상하게도 localhost에서 실행할 수 있습니다.

1. HTML 상용구 만들기



아래에 주어진 HTML 상용구.

<!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>Geolocation Form</title>
</head>
<body>
    Hello World
</body>
</html>


2. 몸에서 만들고 형성하기



아래와 같이 위도 및 경도 형식으로 사용자 위치를 가져옵니다.

<form action="submit_location" method="post">
    <input type="number" name="lat" id="latitude" required>
    <input type="number" name="long" id="longitude" required>

    <label for="user_data">Add User Data</label><br>
    <input type="text" id="user_data" name="user_data" required>

    <button type="submit" value="submit">Submit The Data</button>
</form>


3. 위도와 경도를 숨깁니다.



여러 번 사용자는 자신의 앞에 있는 위도와 경도를 보고 싶지 않거나 전혀 볼 필요가 없습니다. 그 경우. 다음과 같이 형식을 변경합니다.

<form action="submit_location" method="post">
    <input type="hidden" name="latitude" id="lat" required>
    <input type="hidden" name="longitude" id="long" required>

    <label for="user_data">Add User Data</label><br>
    <input type="text" id="user_data" name="user_data" required>

    <button type="submit" value="submit">Submit The Data</button>
</form>


3. 고객에게 위치를 묻는 JavaScript 함수를 생성하고 등록합니다.



아래 주어진 코드에는 클라이언트 상호 작용에 따라 실행할 3가지 유형의 논리가 포함되어 있습니다.

function myFunction() {
    // this will be called when my function is needed
    console.log('location captured');
}

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, removeForm);
        if ((lat.getAttribute('value') == null) || (long.getAttribute('value') == null)) {

            // code to run if cs disagrees to share the location
            // x.innerHTML = "Form Can't be uploaded Until you provide your current location";
        }

    } else {

        // if client browser does not supports geolocation at all
        // x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    // code to run if cs agrees to share the location
    // x.innerHTML = "Now You Can Submit the Form";
    lat.setAttribute('value', position.coords.latitude);
    long.setAttribute('value', position.coords.longitude);
}


4. 마지막으로 전체 페이지 로드 시 모든 스크립트 기능을 실행합니다.



다음은 페이지가 로드될 때 함수를 실행하려는 경우에 사용되는 코드입니다.

함수를 직접 작성할 수 있지만 일부 브라우저에서는 작동하지 않으므로 아래와 같은 방식으로 함수를 실행해야 합니다.

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
    getLocation();
});


5. 아래 주어진 HTML 코드를 완성하십시오.




<!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>Geolocation Form</title>
</head>

<body>
    <form action="submit_location" method="post">
        <input type="hidden" name="latitude" id="lat" required>
        <input type="hidden" name="longitude" id="long" required>

        <label for="user_data">Add User Data</label><br>
        <input type="text" id="user_data" name="user_data" required>

        <button type="submit" value="submit">Submit The Data</button>

        <script>
            function myFunction() {
                // this will be called when my function is needed
                console.log('location captured');
            }

            function getLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showPosition, myFunction);
                    if ((lat.getAttribute('value') == null) || (long.getAttribute('value') == null)) {

                        // code to run if cs disagrees to share the location
                        // x.innerHTML = "Form Can't be uploaded Until you provide your current location";
                    }

                } else {

                    // if client browser does not supports geolocation at all
                    // x.innerHTML = "Geolocation is not supported by this browser.";
                }
            }

            function showPosition(position) {
                // code to run if cs agrees to share the location
                // x.innerHTML = "Now You Can Submit the Form";
                lat.setAttribute('value', position.coords.latitude);
                long.setAttribute('value', position.coords.longitude);
            }

            window.addEventListener('DOMContentLoaded', (event) => {
                console.log('DOM fully loaded and parsed');
                getLocation();
            });
        </script>
    </form>
</body>

</html>


6. 양식 및 위치 알림이 Firefox에서 어떻게 보이는지의 스크린샷



위치 요청 스크린샷





위치 캡처 스크린샷



Java에서 스레드 풀 크기를 계산하는 방법
Flutter의 기초 지식

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage