Javascript를 사용하여 사용자 위치를 감지하는 방법
5950 단어 javascriptincodercsshtml
사용자의 위치를 파악하기 위해 사용자의 지리적 위치를 반환하는 JavaScript의 Geolocation API를 사용할 수 있습니다. 이 API를 사용하면 사용자가 허용하는 경우 사용자의 현재 위도 및 경도 좌표를 얻을 수 있습니다. 이 작은 프로젝트(Javascript를 사용하여 사용자 위치를 감지하는 방법)의 웹 페이지에는 아이콘과 버튼이 있는 상자가 있습니다.
당신은 다음을 좋아할 수 있습니다:
해당 버튼을 클릭하면 허용 및 차단 옵션이 있는 위치 프롬프트가 열립니다. 요청을 차단하면 버튼 텍스트가 "요청을 거부했습니다."로 변경됩니다. 요청을 허용하면 "위치 감지 중"이 표시됩니다. 몇 초 후 도시, 우편 번호, 주 번호 및 국가를 포함한 현재 위치가 표시됩니다.
브라우저의 콘솔에서 도로, 자치 단체, 대륙 등을 포함하여 다른 많은 위치 세부 정보를 얻을 수 있습니다. 제가 말하는 내용에 어려움이 있다면 데모 비디오 또는 전체 비디오 자습서를 볼 수 있습니다.
미리보기를 사용할 수 있습니다here.
HTML 코드
<!-- ------------------ Created By InCoder ------------------ -->
<!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>Detect User Location Using Javascript | InCoder</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<div class="card">
<div class="icon">
<i class="fa-solid fa-location-dot"></i>
</div>
<p></p>
<div class="location"></div>
<button class="detectBtn">Detect My Location</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS 코드
/* ------------------ Created By InCoder ------------------ */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #54a6d8;
}
.card {
width: 22rem;
margin: 1rem;
text-align: center;
border-radius: 10px;
background-color: #fff;
font-family: 'Ubuntu', sans-serif;
}
.icon {
font-size: 6rem;
margin-top: 1rem;
color: #424040f0;
margin-bottom: 1rem;
}
.location {
font-size: 2rem;
font-weight: bold;
color: #424040f0;
margin-bottom: 1rem;
}
.card p {
font-size: 1rem;
color: #424040f0;
margin-bottom: 1rem;
}
.detectBtn {
width: 15rem;
border: none;
color: #fff;
outline: none;
height: 2.5rem;
font-size: 1rem;
cursor: pointer;
margin-bottom: 1rem;
border-radius: .3rem;
background-color: #54a6d8;
transition: background-color .3s;
}
.detectBtn:hover {
background-color: #424040f0;
}
자바스크립트 코드
let text = document.querySelector('.card p');
let locationBox = document.querySelector('.location');
let detectBtn = document.querySelector('.detectBtn');
let successFunction = (position) => {
text.innerHTML = '';
detectBtn.innerHTML = 'Detecting Your Location...';
let { latitude, longitude } = position.coords;
fetch(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=YOUR_API_KEY`)
.then(response => response.json()).then(response => {
let allDetails = response.results[0].components;
console.table(allDetails);
let { county, postcode, country, state_code } = allDetails;
locationBox.innerText = `${county} ${postcode} ${state_code}, ${country}`;
detectBtn.style.display = 'none';
}).catch(() => {
detectBtn.innerText = "Something went wrong";
});
}
let errorFunction = (error) => {
if (error.code == 1) {
text.innerHTML = 'You denied to access you location';
} else if (error.code == 2) {
text.innerHTML = 'Location is not available';
} else {
text.innerHTML = 'Something went wrong';
}
}
detectBtn.addEventListener('click', () => {
if (navigator.geolocation) {
text.innerHTML = 'Allow location access to Detect your location.';
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} else {
alert('It seems like Geolocation, which is required for this page, is not enabled in your browser.');
}
});
Reference
이 문제에 관하여(Javascript를 사용하여 사용자 위치를 감지하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/incoderweb/how-to-detect-user-location-using-javascript-241m텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
