HTML Geolocation
Geolocation API là gì?
Geolocation API là một tính năng trong trình duyệt web (Web browsers), nó cho phép các ứng dụng web trụy cập và xác định vị trí của người dùng.
Geolocation API được dùng để xác định và lấy vị trí của người dùng như xác định và lấy vị trí địa lý, tọa độ vĩ độ, kinh độ hoặc xác định lấy địa chỉ của một vị trí hoặc lấy thông tin thời tiết của khu vực hoặc thông tin địa chỉ gần đó.
Lưu Ý: Do xác định vị trí thuộc chính sách quyền bảo mật riêng tư nên cần được sự chấp thuận cho phép của người dùng.
Cách xác định và lấy vị trí người dùng (Geolocation API)
Khi một người đang dùng hoặc truy cập vào một ứng dụng web, chúng ta có thể biết người đó đang ở khu vực nào, đang ở địa điểm nào nhờ vào việc xác định vị trí của người dùng thông qua sử dụng Geolocation API như sau:
Bạn có thể sử dụng phương thức getCurrentPosition() và watchPosition() để lấy vị trí.
Phương thức getCurrentPosition() cho phép lấy vị trị hiện tại của người dùng.
Phương thức watchPosition() cho phép lấy vị trí hiện tại và cập nhật vị trí khi di chuyển, nó có nghĩa là có thể xác định vị trí khi người dùng di chuyển, nó cũng tương tự như xác định vị trí GPS ở trong ô tô hoặc điện thoại.
Ví dụ xác định và hiển thị thông tin vị trí tọa độ hiện tại của người dùng sử dụng phương thức getCurrentPosition() như sau:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1> Geolocation API Xác định và hiển thị vị trí người dùng.</h1>
<p>Click chuột vào nút button để lấy vị trí tọa độ .</p>
<button onclick="get_Location()">Get Location</button>
<div id="Get_Location_Demo"></div>
<script>
const get_Location_data = document.getElementById("Get_Location_Demo");
function get_Location() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(show_Position);
} else {
get_Location_data.innerHTML = "Trình duyệt này không hỗ trợ Geolocation.";
}
}
function show_Position(position) {
get_Location_data.innerHTML = "Vĩ độ - Latitude: " + position.coords.latitude +
"<br>Kinh độ - Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
Kết quả:
Cách lấy địa chỉ địa điểm của người dùng.
Từ vị trí vĩ độ và kinh độ chúng ta các thể lấy được thông tin địa chỉ của người dùng thông qua Geolocation API.
Ví dụ Lấy địa chỉ và địa điểm của người dùng khi sử dụng ứng dụng web như sau:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Reverse Geocoding Example</title>
</head>
<body>
<h1>Tên địa chỉ vị trí - Location name.</h1>
<p id="data"></p>
<script>
const api_key = '66aca'; // Replace with your API key
const latitude = 21.3076417; // Example latitude
const longitude = 106.0435959; // Example longitude
//const url = `https://geocode.maps.co/reverse?lat=latitude&lon=longitude&api_key=api_key`;
const url =`https://geocode.maps.co/reverse?lat=21.3076417&lon=106.0435959&api_key=66aca`;
// Function to fetch data from API
async function fetchData() {
try {
const response = await fetch(url); // Replace with your API URL
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
const data = await response.json();
displayData(data);
} catch (error) {
console.error('There has been a problem:', error);
}
}
// Function to display data on the webpage
function displayData(data) {
const dataContainer = document.getElementById('data');
dataContainer.innerHTML = data["display_name"] ;
//dataContainer.innerHTML = JSON.stringify(data, null, 2); // Display JSON data as a formatted string
}
// Fetch data when the page loads
window.onload = fetchData;
</script>
</body>
</html>
Kết quả:
