Thuộc tính vị trí địa lý của trình điều hướng HTML trả về một đối tượng Vị trí địa lý có thể được sử dụng để xác định vị trí của người dùng.
Cú pháp
Sau đây là cú pháp -
navigator.geolocation
Hãy để chúng tôi xem một ví dụ về thuộc tính định vị địa lý của trình điều hướng HTML -
Ví dụ
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 20px;
width: 330px;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
color: #fff;
}
</style>
<body>
<h1>HTML navigator geolocation property Demo</h1>
<button class="btn" onclick="display()">Display your position</button>
<div class="show"></div>
<script>
function display() {
var userLocation = navigator.geolocation;
userLocation.getCurrentPosition(displayPosition);
}
function displayPosition(pos) {
document.querySelector(".show").innerHTML = "<p>Your latitude coordinate is: " + pos.coords.latitude + "</p>" + "<p>Your longitude coordinate is: " + pos.coords.longitude + "</p>"
}
</script>
</body>
</html> Đầu ra
Nhấp vào “ Hiển thị vị trí của bạn ”Để hiển thị tọa độ vị trí của người dùng -
