Bài 43: Định vị vị trí (Geolocation) trong HTML5

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 đồ:

Đị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 icon_chrome icon_ie icon_firefox icon_safari  icon_opera
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>

 

Các thẻ:

Có thể bạn sẽ thích…

1 phản hồi

  1. Pham Van Cong viết:
    17/11/2016 lúc 10:21 chiều

    bai viet hay do

Trả lời Pham Van Cong Hủy

EnglishVietnamese