위치 정보 자습서 - 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:
'© <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
코드 바로 뒤에 배치하십시오. 결합된 코드를 실행하면 제공하는 정확한 위치가 있는 마커가 있는 지도가 표시됩니다.결론
간단한 스크립트이며 맵의 한 지점뿐만 아니라 다른 것 또는 다른 스크립트에 사용할 수 있습니다. 사용자의 위치에 액세스할 수 있게 되면 사용자를 특정 페이지로 안내하거나 특정 콘텐츠를 표시하는 데 사용할 수 있습니다. 새로운 지리 위치 스크립트를 마음껏 사용하십시오.
Reference
이 문제에 관하여(위치 정보 자습서 - Vanilla JS를 사용하여 사용자 위치 가져오기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/thedevdrawer/geolocation-tutorial-get-user-location-using-vanilla-js-46a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)