NỘI DUNG BÀI VIẾT
Định vị vị trí người dùng
Geolocation được sử dụng để định vị vị trí người dùng trong HTML5.
Để bảo vệ quyền riêng tư, việc xác định vị trí chỉ được thực hiện khi người dùng đồng ý.
Lưu ý: Việc định vị sẽ cho kết quả chính xác hơn khi sử dụng các thiết bị có GPS như: iPhone, iPad.
Sử dụng Geolocation để định vị vị trí trong HTML
Để trả về giá trị là vị trí của người dùng thì bạn có thể sử dụng hàm: getCurrentPosition().
Dưới đây là ví dụ đơn giản minh họa cho hàm getCurrentPosition(), trả về tọa độ người dùng
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<p>Kích vào button để lấy toạ độ của bạn</p>
<button onclick="getLocation()">Lấy vị trí</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation không được hỗ trợ bởi trình duyệt này.";
}
}
function showPosition(position) {
x.innerHTML = "Vĩ độ: " + position.coords.latitude +
"<br>Kinh độ: " + position.coords.longitude;
}
</script>
</body>
</html>
Giải thích ví dụ:
- Kiểm tra xem Geolocation có được trình duyệt hỗ trợ không
- Nếu trình duyệt hỗ trợ, chạy phương thức getCurrentPosition(). Nếu không, hiển thị thông báo cho người dùng.
- Nếu hàm getCurrentPosition() chạy thành công, thì nó trả về cho người dùng tọa độ vị trí thông qua hàm truyền tham số (showPosition)
- Hàm showPosition() in ra là kinh độ và vĩ độ của người dùng.
Trên đây là ví dụ cơ bản của Geolocation, nó chưa thực hiện bắt các lỗi phát sinh.
Xác định lỗi và hiển thị
Tham số thứ 2 trong hàm getCurrentPosition() method sử dụng để xác định lỗi phát sinh trong quá trình định vị. Nó sẽ tự động gọi tới hàm định sẵn khi nhận được thông báo lỗi:
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<p>Kích vào button để lấy toạ độ của bạn.</p>
<button onclick="getLocation()">Lấy vị trí</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation không được hỗ trợ bởi trình duyệt này.";
}
}
function showPosition(position) {
x.innerHTML = "Vĩ độ: " + position.coords.latitude +
"<br>Kinh độ: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "Người sử dụng từ chối cho xác định vị trí."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Thông tin vị trí không có sẵn."
break;
case error.TIMEOUT:
x.innerHTML = "Yêu cầu vị trí người dùng vượt quá thời gian quy định."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "Một lỗi xảy ra không rõ nguyên nhân."
break;
}
}
</script>
</body>
</html>
Hiển thị vị trí người dùng trên bản đồ
Để hiển thị vị trí trên bạn đồ, bạn có thể sử dụng các dịch vụ cung cấp bản đồ trực tuyến như: Google Maps.
Trong ví dụ dưới đây, giá trị kinh độ và vĩ độ sẽ được hiển thị trên Google Map (sử dụng ảnh tĩnh):
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<p id="demo">Kích vào button để lấy vị trí.</p>
<button onclick="getLocation()">Lấy vị trí</button>
<div id="mapholder"></div>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation không được hỗ trợ bởi trình duyệt này.";
}
}
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "Người sử dụng từ chối cho xác định vị trí."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Thông tin vị trí không có sẵn."
break;
case error.TIMEOUT:
x.innerHTML = "Yêu cầu vị trí người dùng vượt quá thời gian quy định."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "Một lỗi xảy ra không rõ nguyên nhân."
break;
}
}
</script>
</body>
</html>
Ví dụ: Google Map Script
<!DOCTYPE html>
<html>
<body>
<p id="demo">Kích vào button để lấy vị trí.</p>
<button onclick="getLocation()">Lấy vị trí</button>
<div id="mapholder"></div>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation không được hỗ trợ bởi trình duyệt này.";
}
}
function showPosition(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat, lon)
mapholder = document.getElementById('mapholder')
mapholder.style.height = '250px';
mapholder.style.width = '500px';
var myOptions = {
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
}
var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "Người sử dụng từ chối cho xác định vị trí."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Thông tin vị trí không có sẵn."
break;
case error.TIMEOUT:
x.innerHTML = "Yêu cầu vị trí người dùng vượt quá thời gian quy định."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "Một lỗi xảy ra không rõ nguyên nhân."
break;
}
}
</body>
</html>
Ví dụ trên giúp chúng ta trả lời câu hỏi: Làm thế nào để hiển thị vị trí người dùng trên bỏ đồ trực tuyến mà họ có thể tương tác bằng cách phóng to, thu nhỏ…?
Cung cấp thông tin vị trí
Trong bài học này chúng ta đã biết làm thế nào để hiển thị vị trí người dùng trên bản đồ.
Bên cạnh đó Geolocation còn cung cấp thêm các thông tin vị trí cụ thể, như:
- Hiển thị các địa điểm được yêu thích gần người dùng
- Chỉ đường cho người dùng (GPS)
- Cập nhật, lưu trữ thông tin về vị trí người dùng
Hàm getCurrentPosition() – Hàm trả về kết quả
Hàm getCurrentPosition() là hàm trả về kết quả là một đối tượng. Kinh độ, vĩ độ và độ chính xác là 3 kết quả được trả về. Những thuộc tính khác sẽ được trả về nếu có đủ các thông tin cần thiết. Chi tiết các thuộc tính trả về:
| Thuộc tính | Giá trị trả về |
|---|---|
| coords.latitude | Vĩ độ ở dạng số thập phân (giá trị này luôn được trả về) |
| coords.longitude | Kinh độ ở dạng số thập phân (giá trị này luôn được trả về) |
| coords.accuracy | Độ chính xác của vị trí (giá trị này luôn được trả về) |
| coords.altitude | Độ cao so với mực nước biển, đơn vị là mét (giá trị được trả về nếu có sẵn) |
| coords.altitudeAccuracy | Sự chính xác của độ cao vừa định vị (giá trị được trả về nếu có sẵn) |
| coords.heading | Hướng người dùng đang đi, đơn vị là độ, lấy hướng Bắc làm gốc (giá trị được trả về nếu có sẵn) |
| coords.speed | Tốc độ di chuyển, đơn vị là met/giây (giá trị được trả về nếu có sẵn) |
| timestamp | Thời điểm phản hồi yêu cầu định vị (giá trị được trả về nếu có sẵn) |
Geolocation – Những hàm khác
Bên cạnh hàm Geolocation còn có một số hàm khác
- watchPosition() -Trả về vị trí hiện tại của người dùng và tiếp tục cập nhật vị trí khi người dùng di chuyển (giống như hệ thống GPS trong xe ô tô).
- clearWatch() – Ngừng sử dụng hàm watchPosition().
Ví dụ dưới đây sẽ cho bạn thấy cách làm việc của hàm watchPosition(). Bạn cần phải có một thiết bị GPS để thực hiện ví dụ này (một chiếc điện thoại di động như iPhone):
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<p>Kích vào button để lấy vị trí.</p>
<button onclick="getLocation()">Lấy vị trí</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";}
}
function showPosition(position) {
x.innerHTML="Kinh độ: " + position.coords.latitude +
"<br>Vĩ độ: " + position.coords.longitude;
}
</script>
</body>
</html>
Kết luận
Qua đây là một số chia sẻ về định vị vị trí (Geolocation) trong HTML5, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.
Các bạn có thể tham khảo các bài viết hay về HTML tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
