카테고리 없음

오류 처리, 실시간 업데이트 또는 매핑 통합(Google Maps, OpenStreetMap 등)을 통해 확장할 수 있는 기본 구현

김영수 2025. 3. 1. 21:46

 

 

 

 

The image contains an HTML document implementing a simple Geolocation API example using JavaScript. Below is the extracted and organized code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geolocation API in JavaScript</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
    </style>
</head>
<body>
    <h1>Geolocation API Example</h1>
    <button id="locationBtn">Get Location</button>
    <p id="output"></p>

    <script>
        // Get button and output element references
        const locationBtn = document.getElementById('locationBtn');
        const output = document.getElementById('output');

        // Add event listener to handle the 'Get Location' button click
        locationBtn.addEventListener('click', () => {
            // Check if Geolocation is available in the browser
            if (navigator.geolocation) {
                // Attempt to retrieve the current position
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        // Display the latitude and longitude in the output paragraph
                        const { latitude, longitude } = position.coords;
                        output.textContent = `Latitude: ${latitude}, Longitude: ${longitude}`;
                    },
                    // Handle errors during position retrieval (e.g., permission denied)
                    () => {
                        output.textContent = 'Unable to retrieve location';
                    }
                );
            } else {
                // Display a message if Geolocation is not supported
                output.textContent = 'Geolocation is not supported by this browser';
            }
        });
    </script>
</body>
</html>

 

Description of the Code

This is a simple webpage that demonstrates the use of the Geolocation API in JavaScript. The purpose of this script is to retrieve the user's latitude and longitude when they click the "Get Location" button.

How It Works

  1. HTML Structure:
    • A <button> with id="locationBtn" to trigger the location request.
    • A <p> with id="output" where the coordinates or an error message will be displayed.
  2. CSS Styling:
    • The page is styled with a center-aligned layout and Arial font.
  3. JavaScript Logic:
    • The script fetches references to the button and output paragraph.
    • An event listener is added to the button, which:
      • Checks if the browser supports navigator.geolocation.
      • Calls getCurrentPosition() to get the user's location.
      • Extracts latitude and longitude and displays them.
      • Handles errors (e.g., permission denied).
      • Shows a message if geolocation is unsupported.

Expected Behavior

  • If Geolocation is enabled, clicking the button will show the latitude and longitude.
  • If Geolocation is denied or fails, an error message (Unable to retrieve location) appears.
  • If Geolocation is unsupported, a message (Geolocation is not supported by this browser) is displayed.

This is a basic implementation that could be expanded with error handling, real-time updates, or mapping integration (Google Maps, OpenStreetMap, etc.). 🚀