Geolocation được sử dụng để xác định vị trí người dùng trong HTML5.
Nhấn vào nút dưới đây để hiển thị vị trí của bạn trên bản đồ:
Nội dung []
Định vị vị trí người dùng
Geolocation được sử dụng để xác định 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.
Các trình duyệt hỗ trợ
Dưới đây là bảng danh sách một sốphiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho Geolocation.
API
Geolocation
5.0 – 49.0 (http)
50.0 (https)
9.0
3.5
5.0
16.0
Lưu ý: Với phiên bản Chrome 5.0, vì lý do bảo vệ quyền riêng tư, việc định vị vị trí sẽ chỉ hoạt động với giao thức bảo mật HTTPS. Nếu trang web của bạn sử dụng giao thức HTTP việc xác định vị trí của người dùng sẽ không hoạt động.
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>
