HTML5 & CSS3 – Geolocation (Định vị người dùng)

Link Demo

HTML5 Geolocation API được sử dụng để định vị vị trí địa lý người dùng.
Việc xác định vị trí người dùng là thỏa hiệp giữa 2 bên, do đó nếu người dùng không chấp thuận cho biết vị trí của mình thì ta không thể biết được.

HTML5 – Cách dùng Geolocation

Dùng hàm getCurrentPosition() để lấy vị trí người dùng.

Ví dụ: Định vị đơn giản trả về các vĩ độ và kinh độ của vị trí của người sử dụng:

<script> 
var x=document.getElementById("demo"); 
function getLocation() 
  { 
  if (navigator.geolocation) 
    { 
    navigator.geolocation.getCurrentPosition(showPosition); 
    } 
  else{x.innerHTML="Geolocation is not supported by this browser.";} 
  } 
function showPosition(position) 
  { 
  x.innerHTML="Latitude: " + position.coords.latitude +  
  "<br>Longitude: " + position.coords.longitude;  
  } 
</script>  

Giải thích ví dụ :

• Kiểm tra xem có hỗ trợ định vị hay không
• Nếu có hỗ trợ, chạy hàm getCurrentPosition() . Nếu không, hiển thị thông báo
• Nếu hàm getCurrentPosition() thực thi thành công, trả về tọa độ cho hàm showPosition()
• Hàm showPosition() hiển thị ra kinh độ và vĩ độ
Ví dụ trên là một đoạn xử lý rất cơ bản, không có bắt lỗi.

Xử lý lỗi hoặc khi người dùng từ chối tiết lộ thông tin vị trí

Tham số thứ hai của phương thức getCurrentPosition() được dùng để xử lý lỗi. Nó quy định hàm nào sẽ chạy nếu có lỗi.

Ví dụ

<script> 
var x=document.getElementById("demo"); 
function getLocation() 
  { 
  if (navigator.geolocation) 
    { 
    navigator.geolocation.getCurrentPosition(showPosition,showError); 
    } 
  else{x.innerHTML="Geolocation is not supported by this browser.";} 
  } 
function showPosition(position) 
  { 
  x.innerHTML="Latitude: " + position.coords.latitude +  
  "<br>Longitude: " + position.coords.longitude;     
  } 
function showError(error) 
  { 
  switch(error.code)  
    { 
    case error.PERMISSION_DENIED: 
      x.innerHTML="User denied the request for Geolocation." 
      break; 
    case error.POSITION_UNAVAILABLE: 
      x.innerHTML="Location information is unavailable." 
      break; 
    case error.TIMEOUT: 
      x.innerHTML="The request to get user location timed out." 
      break; 
    case error.UNKNOWN_ERROR: 
      x.innerHTML="An unknown error occurred." 
      break; 
    } 
  } 
</script>  

Mã lỗi:

• Permission denied – Người dùng không chấp thuận chia sẻ vị trí
• Position unavailable – Không lấy được tọa độ
• Timeout – Hết thời gian thực thi

Hiển thị kết quả trên bản đồ

Để hiển thị kết quả ra bản đồ, bạn cần truy cập vào dịch vụ bản đồ như dịch vụ Google Maps để sử dụng kinh độ và vĩ độ.

Ví dụ

function showPosition(position) 
{ 
var latlon=position.coords.latitude+","+position.coords.longitude; 

var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" 
+latlon+"&zoom=14&size=400x300&sensor=false"; 

document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; 
}  

Trong ví dụ trên chúng ta sử dụng kinh độ, vĩ độ trả về để hiển thị ra vị trí trên bản đồ.

Phương thức getCurrentPosition() – Kết quả trả về

Ta có thể lấy kết quả trả về bằng các cách trong bảng dưới đây

coords.latitude: Vĩ độ số thập phân

coords.longitude: Kinh độ số thập phân

coords.accuracy: Độ chính xác của vị trí

coords.altitude: Độ cao so với mực nước biển

coords.altitudeAccuracy: Độ chính xác của độ cao

coords.heading: Tọa độ theo kim đồng hồ phía Bắc

coords.speed: Tốc độ m/s

timestamp: Thời gian lúc trả về kết quả

Một số phương thức khác đáng quan tâm

watchPosition(): Theo dõi vị trí, trả về vị trí người dùng và cập nhật khi người dùng di chuyển (như GPS trong xe hơi).

clearWatch(): Dừng phương thức watchPosition().

Ví dụ sau dùng phương thức watchPosition() 

Bạn cần một thiết bị kiểm tra cho kết quả tọa độ chính xác (như iPhone):

<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="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script> 

Theo khoapham.vn