Vị trí địa lý HTML được sử dụng để lấy vị trí địa lý theo thời gian thực của người dùng, chỉ khi họ cho phép. Nó có thể được sử dụng vì nhiều lý do. Nó sử dụng JavaScript để lấy vĩ độ và kinh độ.
LƯU Ý - Trước Google Chrome 50, các yêu cầu định vị địa lý có thể được chấp thuận nhưng kể từ Chrome 50, chỉ các yêu cầu qua HTTPS mới được chấp thuận và các yêu cầu qua HTTP bị bỏ qua.
Cú pháp
Sau đây là cú pháp -
navigator.geolocation.getCurrentPosition()
Tại đây, đối tượng được trả về bởi getCurrentPosition () có thể có các thuộc tính sau -
| Thuộc tính | Giá trị Trả lại |
|---|---|
| coords.latitude | Vĩ độ địa lý dưới dạng số thập phân |
| coords.longitude | Kinh độ địa lý dưới dạng số thập phân |
| coords.accuracy | Độ chính xác của vị trí |
| coords.altitude | Độ cao tính bằng mét trên mực nước biển trung bình |
| coords.altitudeAccuracy | Độ chính xác của vị trí |
| coords.heading | Hướng theo độ theo chiều kim đồng hồ từ Bắc |
| coords.speed | Tốc độ tính bằng mét trên giây |
| imestamp | Ngày / giờ phản hồi |
Hãy xem một ví dụ về cách vị trí địa lý HTML cung cấp khả năng xử lý lỗi -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Geolocation</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-Geolocation</legend>
<input type="button" value="Update Location" onclick="updateLocation()">
<input type="button" value="Search" onclick="searchLoc()">
<div id="divDisplay">Current Location:</div>
<div>
<span id="latitude">Latitude: 42.9177901</span>
<span id="longitude">Longitude: -75.8114698</span>
</div>
<script>
var latObj = document.getElementById("latitude");
var longObj = document.getElementById("longitude");
var divDisplay = document.getElementById("divDisplay");
function searchLoc(){
var lat = latObj.textContent.split(": ")[1];
var long = longObj.textContent.split(": ")[1];
var url = "https://www.google.com/maps/@"+lat+","+long+",8.58z";
browseWindow = window.open(url, "browseWindow", "width=400, height=200");
}
function updateLocation(){
browseWindow.close();
var user = navigator.geolocation;
if (user)
user.getCurrentPosition(updatePosition, errorHandler);
else
divDisplay.textContent = "Geolocation is not supported in this browser";
}
function updatePosition(position) {
divDisplay.innerHTML = 'Location Updated<br>Current Location:';
latObj.textContent = 'Latitude: '+position.coords.latitude;
longObj.textContent = 'Longitude: '+position.coords.longitude;
}
function errorHandler(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
divDisplay.textContent = "You denied the request to get Geolocation"
break;
case error.POSITION_UNAVAILABLE:
divDisplay.textContent = "Your location information is unavailable"
break;
case error.TIMEOUT:
divDisplay.textContent = "The request to get your location timed out"
break;
case error.UNKNOWN_ERROR:
divDisplay.textContent = "Unknown error occurred"
break;
}
}
</script>
</body>
</html> 1) Trước khi nhấp vào bất kỳ nút nào -
2) Sau khi nhấp vào ‘ Tìm kiếm Nút '-
3) Sau khi nhấp vào ‘ Cập nhật vị trí Nút '-
4) Sau khi nhấp vào ‘ Tìm kiếm Nút '-
5) Sau khi nhấp vào ‘ Cập nhật vị trí 'Và người dùng từ chối quyền truy cập vị trí -
