Vị địa lý (Geolocation) trong HTML5
Trong hướng dẫn này, bạn sẽ học cách sử dụng tính năng định vị địa lý HTML5 để phát hiện vị trí của người dùng.
Định vị địa lý là gì?
Tính năng định vị địa lý của HTML5 cho phép bạn tìm ra tọa độ địa lý (số vĩ độ và kinh độ) của vị trí hiện tại của khách truy cập trang web của bạn.
Tính năng này rất hữu ích để cung cấp trải nghiệm duyệt web tốt hơn cho khách truy cập trang web. Ví dụ: bạn có thể trả về các kết quả tìm kiếm gần với vị trí của người dùng.
Tìm tọa độ của khách truy cập
Lấy thông tin vị trí của khách truy cập trang web bằng cách sử dụng API vị trí địa lý HTML5 khá đơn giản. Nó sử dụng ba phương thức được đóng gói vào navigator.geolocationđối tượng getCurrentPosition()- watchPosition()và clearWatch().
Sau đây là một ví dụ đơn giản về vị trí địa lý hiển thị vị trí hiện tại của bạn. Tuy nhiên, trước tiên bạn cần đồng ý để trình duyệt thông báo cho máy chủ web về vị trí của bạn.
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Current Position</title>
<script>
function showPosition() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
document.getElementById("result").innerHTML = positionInfo;
});
} else {
alert("Sorry, your browser does not support HTML5 geolocation.");
}
}
</script>
</head>
<body>
<div id="result">
<!--Position information will be inserted here-->
</div>
<button type="button" onclick="showPosition();">Show Position</button>
</body>
</html>Lưu ý: Các trình duyệt web sẽ không chia sẻ vị trí của khách truy cập với một trang web trừ khi khách truy cập cho phép rõ ràng. Tiêu chuẩn vị trí địa lý làm cho nó trở thành một quy tắc chính thức để nhận được sự cho phép của người dùng đối với mọi trang web muốn có dữ liệu vị trí.
Xử lý lỗi và từ chối
Có thể xảy ra trường hợp người dùng không muốn chia sẻ dữ liệu vị trí của mình với bạn. Để đối phó với những tình huống như vậy, bạn có thể cung cấp hai hàm khi bạn gọi hàm getCurrentLocation().
Hàm đầu tiên được gọi nếu nỗ lực xác định vị trí địa lý của bạn thành công, trong khi hàm thứ hai được gọi nếu nỗ lực định vị địa lý của bạn kết thúc thất bại. Hãy xem một ví dụ:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Handling Geolocation Errors</title>
<script>
// Set up global variable
var result;
function showPosition() {
// Store the element where the page displays the result
result = document.getElementById("result");
// If geolocation is available, try to get the visitor's position
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
result.innerHTML = "Getting the position information...";
} else {
alert("Sorry, your browser does not support HTML5 geolocation.");
}
};
// Define callback function for successful attempt
function successCallback(position) {
result.innerHTML = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
}
// Define callback function for failed attempt
function errorCallback(error) {
if(error.code == 1) {
result.innerHTML = "You've decided not to share your position, but it's OK. We won't ask you again.";
} else if(error.code == 2) {
result.innerHTML = "The network is down or the positioning service can't be reached.";
} else if(error.code == 3) {
result.innerHTML = "The attempt timed out before it could get the location data.";
} else {
result.innerHTML = "Geolocation failed due to unknown error.";
}
}
</script>
</head>
<body>
<div id="result">
<!--Position information will be inserted here-->
</div>
<button type="button" onclick="showPosition();">Show Position</button>
</body>
</html>Hiển thị Vị trí trên Bản đồ Google
Bạn có thể làm những điều rất thú vị với dữ liệu định vị, như hiển thị vị trí của người dùng trên bản đồ Google. Ví dụ sau sẽ hiển thị vị trí hiện tại của bạn trên bản đồ Google dựa trên dữ liệu kinh độ và vĩ độ được truy xuất thông qua tính năng định vị địa lý HTML5.
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using the Google Maps</title>
<script>
function showPosition() {
navigator.geolocation.getCurrentPosition(showMap);
}
function showMap(position) {
// Get location data
var latlong = position.coords.latitude + "," + position.coords.longitude;
// Set Google map source url
var mapLink = "https://maps.googleapis.com/maps/api/staticmap?center="+latlong+"&zoom=16&size=400x300&output=embed";
// Create and insert Google map
document.getElementById("embedMap").innerHTML = "<img alt='Map Holder' src='"+ mapLink +"'>";
}
</script>
</head>
<body>
<button type="button" onclick="showPosition();">Show My Position on Google Map</button>
<div id="embedMap">
<!--Google map will be embedded here-->
</div>
</body>
</html>Ví dụ trên sẽ chỉ hiển thị vị trí trên bản đồ Google bằng hình ảnh tĩnh. Tuy nhiên, bạn cũng có thể tạo bản đồ Google tương tác với tính năng kéo, phóng to / thu nhỏ và các tính năng khác mà bạn đã gặp trong cuộc sống thực của mình. Hãy xem ví dụ sau:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using the Google Maps</title>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function showPosition() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMap, showError);
} else {
alert("Sorry, your browser does not support HTML5 geolocation.");
}
}
// Define callback function for successful attempt
function showMap(position) {
// Get location data
lat = position.coords.latitude;
long = position.coords.longitude;
var latlong = new google.maps.LatLng(lat, long);
var myOptions = {
center: latlong,
zoom: 16,
mapTypeControl: true,
navigationControlOptions: {
style:google.maps.NavigationControlStyle.SMALL
}
}
var map = new google.maps.Map(document.getElementById("embedMap"), myOptions);
var marker = new google.maps.Marker({ position:latlong, map:map, title:"You are here!" });
}
// Define callback function for failed attempt
function showError(error) {
if(error.code == 1) {
result.innerHTML = "You've decided not to share your position, but it's OK. We won't ask you again.";
} else if(error.code == 2) {
result.innerHTML = "The network is down or the positioning service can't be reached.";
} else if(error.code == 3) {
result.innerHTML = "The attempt timed out before it could get the location data.";
} else {
result.innerHTML = "Geolocation failed due to unknown error.";
}
}
</script>
</head>
<body>
<button type="button" onclick="showPosition();">Show My Position on Google Map</button>
<div id="embedMap" style="width: 400px; height: 300px;">
<!--Google map will be embedded here-->
</div>
</body>
</html>Vui lòng xem URL sau để tìm hiểu thêm về API Javascript của Google Maps: https://developers.google.com/maps/documentation/javascript/reference .
Theo dõi sự di chuyển của khách truy cập
Tất cả các ví dụ chúng tôi đã sử dụng cho đến nay đều dựa trên hàm getCurrentPosition() này. Tuy nhiên, đối tượng định vị địa lý có một hàm khác watchPosition()cho phép bạn theo dõi chuyển động của khách truy cập bằng cách trả lại vị trí đã cập nhật khi vị trí thay đổi.
Hàm watchPosition() có các tham số đầu vào giống như getCurrentPosition(). Tuy nhiên, watchPosition()có thể kích hoạt chức năng thành công nhiều lần - khi nó nhận được vị trí lần đầu tiên và một lần nữa, bất cứ khi nào nó phát hiện một vị trí mới. Hãy xem cách này hoạt động như thế nào:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Watching Position</title>
<script>
// Set global variable
var watchID;
function showPosition() {
if(navigator.geolocation) {
watchID = navigator.geolocation.watchPosition(successCallback);
} else {
alert("Sorry, your browser does not support HTML5 geolocation.");
}
}
function successCallback(position) {
toggleWatchBtn.innerHTML = "Stop Watching";
// Check position has been changed or not before doing anything
if(prevLat != position.coords.latitude || prevLong != position.coords.longitude){
// Set previous location
var prevLat = position.coords.latitude;
var prevLong = position.coords.longitude;
// Get current position
var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
document.getElementById("result").innerHTML = positionInfo;
}
}
function startWatch() {
var result = document.getElementById("result");
var toggleWatchBtn = document.getElementById("toggleWatchBtn");
toggleWatchBtn.onclick = function() {
if(watchID) {
toggleWatchBtn.innerHTML = "Start Watching";
navigator.geolocation.clearWatch(watchID);
watchID = false;
} else {
toggleWatchBtn.innerHTML = "Aquiring Geo Location...";
showPosition();
}
}
}
// Initialise the whole system (above)
window.onload = startWatch;
</script>
</head>
<body>
<button type="button" id="toggleWatchBtn">Start Watching</button>
<div id="result">
<!--Position information will be inserted here-->
</div>
</body>
</html>