Geolocation API로 현재 위치 가져오기

10972 단어 HTML5자바스크립트Geolocation

소개



Geolocation API를 사용하여 현재 위치를 얻는 방법의 간단한 요약입니다.

개요


  • Geolocation API 개요
  • 실제로 현재 위치 가져 오기

    • Geolocation API



    Geolocation API는 사용자의 위치 정보를 검색하는 API입니다.
    GPS, IP 주소, 무선 LAN, WiFi 등에서 위치 정보를 얻을 수 있습니다.
    위치 정보를 얻으려면 사용자의 권한이 필요합니다.


    Geolocation API 객체



    Geolocation API의 Geolocation 객체는 장치의 위치를 ​​검색하는 기능을 제공합니다.
    Geolocation 객체를 가져오려면 Navigator 객체의 geolocation 속성을 사용합니다.
    Geolocation 객체의 메소드는 다음과 같습니다.


    방법
    설명


    getCurrentPosition()
    기기의 현재 위치 가져오기

    watchPosition()
    기기의 위치 정보 모니터링

    clearWatch()
    watchPosition() 메소드로 취득중의 디바이스의 감시 상황을 클리어 한다

    getCurrentPosition() 및 watchPosition()에서는 인수로 콜백 함수를 지정할 수 있습니다.
    지정할 수 있는 콜백 함수는 다음과 같습니다.


    콜백 함수
    설명


    PositionCallback
    위치 정보의 취득이 성공했을 때에 호출되는 콜백 함수 Position 객체를 인수로 한다

    PositionErrorCallback
    위치 정보의 취득이 실패했을 때에 호출되는 콜백 함수 PositionError 객체를 인수로 한다

    PositionCallback의 인수인 Position 객체는 현재 위치를 나타냅니다.
    Position 객체의 속성은 다음과 같습니다.


    속성
    설명


    coords
    현재 위치 정보가 있는 Coordinates 개체 가져오기

    timestamp
    위치 정보가 획득된 시간을 얻


    Coordinates 개체에서 검색할 수 있는 현재 위치 정보는 다음과 같습니다.
    그 밖에도 취득할 수 있는 정보는 있습니다만, 이번은 생략합니다.


    속성
    설명


    latitude
    위도 얻기

    longitude
    경도 얻기

    altitude
    고도 얻기


    실제로 현재 위치를 얻어 봅니다.



    Geolocation API를 사용하여 위도와 경도를 가져옵니다.
    이번에는 취득한 위치 정보를 화면에 표시하기만 하는 간단한 화면을 작성합니다만, 어느 쪽이든 취득한 위치 정보를 이용하여 Map과 연계할 수 있다고 생각합니다.
    먼저 간단한 화면을 만듭니다.

    index.html
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Geolocation Sample</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="center">
        <div class="btn-margin">
            <button id="btn" class="btn btn-outline-primary btn-lg">
                現在位置を取得する
            </button>
        </div>
        <div class="txt-margin">
            <p>緯度：<span id="latitude">???</span><span>度</span></p>
            <p>経度：<span id="longitude">???</span><span>度</span></p>
        </div>
    </div>
    <script src="geolocation.js"></script>
</body>
</html>

    브라우저에서 표시해 보면 이렇게 됩니다.


    그런 다음 버튼을 누를 때의 처리를 작성합니다.

    버튼을 클릭하면 getCurrentPosition() 메서드를 사용하여 위치 정보를 가져옵니다.
    navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

    검색에 성공하면 successCallback 콜백 함수가 호출됩니다.
    function successCallback(position){
};
    successCallback에서 위도와 경도를 가져옵니다.
    취득한 위도와 경도를 화면의 <span>에 표시합니다.
    var latitude = position.coords.latitude;
var longitude = position.coords.longitude;

document.getElementById("latitude").innerHTML = latitude;
document.getElementById("longitude").innerHTML = longitude;

    검색에 실패하면 errorCallback 콜백 함수가 호출됩니다.
    function errorCallback(error){
};
    errorCallback에서 화면에 경고를 표시합니다.
    alert("位置情報が取得できませんでした");

    위의 코드를 정리하면 다음과 같습니다.

    geolocation.js
    // ボタンを押した時の処理
document.getElementById("btn").onclick = function(){
    // 位置情報を取得する
    navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
};

// 取得に成功した場合の処理
function successCallback(position){
    // 緯度を取得し画面に表示
    var latitude = position.coords.latitude;
    document.getElementById("latitude").innerHTML = latitude;
    // 経度を取得し画面に表示
    var longitude = position.coords.longitude;
    document.getElementById("longitude").innerHTML = longitude;
};

// 取得に失敗した場合の処理
function errorCallback(error){
    alert("位置情報が取得できませんでした");
};

    이것을 실제로 움직여 보겠습니다.


    현재 위치를 얻는 버튼을 누르면,

    현재 위치 정보가 화면에 표시됩니다.
    취득에 실패하면,


    이런 식으로 경고가 표시됩니다.

    결론



    Geolocation API를 처음 사용해 보았지만 쉽게 위치 정보를 얻을 수 있음에 놀랐습니다.
    간단한 정리이지만, 누군가의 도움이 되면 다행입니다.
    CSS만으로 폭을 자동 조정할 수 있는, 가로 줄맞춤 네비게이션 메뉴의 만드는 방법
    "input type=time"과 "input type=text + timepicker"의 동작 차이

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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