위치 정보 자습서 - Vanilla JS를 사용하여 사용자 위치 가져오기

15765 단어 tutorialbeginnersapijavascript
웹 사이트에서 지도를 자주 사용하는 경우 사용자 위치의 지리적 위치를 얻는 데 관심이 있을 수 있습니다. 이 튜토리얼에서는 권한을 요청한 후 사용자의 위도와 경도를 찾는 방법을 살펴봅니다. 이러한 좌표가 있으면 오픈 소스 지도를 사용하여 시각적 인터페이스 내에서 정확한 위치를 표시합니다.

참고: 이 튜토리얼에서는 Leaflet + OpenStreetMap을 사용하지만 동일한 방법을 사용하여 Google 지도를 통합할 수 있습니다.

YouTube에서 보기





이 간단한 자습서에서는 2개의 파일만 사용합니다. 귀하의 메인 index.html 및 귀하의 init.js .

프런트엔드 만들기




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Geolocation Request Tutorial</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
    #map { height: 80vh; display:none; }
    #result { font-size:1.5rem; font-weight:bold; text-align:center; margin-bottom:.5rem; display:none; }
</style>
</head>
<body>
    <button type="button" id="showPosition">Show Position</button>
    <div id="result"></div>
    <div id="map"></div>
</body>
<script src="/js/init.js"></script>
</html>


위치 권한 받기




class Geolocation {
    // on success
    successCallback(position){
        let result = document.querySelector("#result") // get the result div
        result.style.display = "block" // show the result div
        result.innerText = "Lat: " + position.coords.latitude + ", Long: " + position.coords.longitude // display the latitude and longitude
    }

    // on error
    errorCallback(error){
        let result = document.querySelector("#result") // get the result div
        result.style.display = "block" // show the result div
        if(error.code == 1) { // if the user denied the request
            result.innerText = "You have not given permission to access your location."
        }else if(error.code == 2) { // if the position is unavailable
            result.innerText = "Your location is unavailable."
        }else if(error.code == 3) { // if the request times out
            result.innerText = "The request to get your location timed out."
        }else{ // if something else went wrong
            result.innerText = "An unknown error occurred."
        }
    }


    showPosition(){
        if(navigator.geolocation) { // if the browser supports geolocation
            navigator.geolocation.getCurrentPosition(
                this.successCallback,
                this.errorCallback
            ) // get the user's location
            let result = document.querySelector("#result")
            result.style.display = "block"
            result.innerText = "Getting the position information..."
        }else{
            alert('Your browser does not support geolocation') // if the browser doesn't support geolocation
        }
    }
}

const showPosition = document.querySelector("#showPosition")
showPosition.addEventListener("click", function (e) {
    e.preventDefault()
    let result = document.querySelector("#result")
    result.style.display = "block"
    new Geolocation().showPosition() // show the user's location
})


위의 코드를 실행하면 브라우저에서 위치 사용 권한을 요청해야 합니다. 수락하면 latitude div에 longitude 및 #result가 표시됩니다.

거절하면 동일한 div에 오류 메시지가 표시됩니다.

지도 추가



첫 번째 섹션에서 추가한 HTML 코드에서 Leaflet에 대한 참조를 알아차렸을 수 있습니다. 이것이 오픈 소스이고 무료이기 때문에 이 튜토리얼에서 지도에 사용하는 것입니다. 그러나 위도와 경도를 얻으면 동일한 방식으로 Google 지도를 사용할 수 있습니다.
init.js 파일에서 successCallback 함수에 다음을 추가합니다.

let mapContainer = document.querySelector("#map") // get the map container
mapContainer.style.display = "block" // show the map container

const map = L.map("map").setView(
    [position.coords.latitude, position.coords.longitude],
    13
) // create a map and set the view to the user's location

const tiles = L.tileLayer(
    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    {
        maxZoom: 19,
        attribution:
            '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }
).addTo(map) // add the tiles to the map

const marker = L.marker([
    position.coords.latitude,
    position.coords.longitude
]).addTo(map) // add a marker to the map


마지막result.innerText 코드 바로 뒤에 배치하십시오. 결합된 코드를 실행하면 제공하는 정확한 위치가 있는 마커가 있는 지도가 표시됩니다.

결론



간단한 스크립트이며 맵의 한 지점뿐만 아니라 다른 것 또는 다른 스크립트에 사용할 수 있습니다. 사용자의 위치에 액세스할 수 있게 되면 사용자를 특정 페이지로 안내하거나 특정 콘텐츠를 표시하는 데 사용할 수 있습니다. 새로운 지리 위치 스크립트를 마음껏 사용하십시오.
프로그래밍 효율성을 높이는 Ruby 메소드
파이썬에서의 맹글링

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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