Hướng dẫn sử dụng Javascript Geolocation API

Xem thêm các chuyên mục:

1- Geolocation API

Geolocation API bao gồm các interface giúp bạn xác định vị trí của người dùng đang sử dụng trình duyệt, và bạn có thể tương tác với các Interface này thông qua Javascript. Điều này cho phép một website hoặc một ứng dụng có thể cung cấp một nội dung tùy chỉnh dựa trên vị trí của người dùng.
Về cơ bản Geolocation API bao gồm các interface sau:
  • Geolocation
  • PositionOptions
  • Position
  • Coordinates
  • PositionError
Khi Geolocation API cố gắng lấy thông tin vị trí người dùng, trình duyệt sẽ hiển thị một hộp thoại yêu cầu người dùng cho phép. Lưu ý rằng mỗi trình duyệt có chính sách và phương thức riêng để yêu cầu quyền này.
geolocation-example.js
// Success Handler
function successHandler(position)  {
  var logArea = document.getElementById("log-area");

  logArea.value = "";
  logArea.value += "Latitude: " + position.coords.latitude + "\n";
  logArea.value += "Longitude: " + position.coords.longitude + "\n";
}

// Error Handler
function errorHandler(positionError)  {
   if(positionError.code == 1) { // PERMISSION_DENIED
       alert("Error: Permission Denied! " + positionError.message);
   } else if(positionError.code == 2) { // POSITION_UNAVAILABLE
       alert("Error: Position Unavailable! " + positionError.message);
   } else if(positionError.code == 3) { // TIMEOUT
       alert("Error: Timeout!" + positionError.message);
   }
}

function showInfos()  {
  navigator.geolocation.getCurrentPosition(successHandler, errorHandler);
}

 
geolocation-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Geolocation</title>
      <meta charset="UTF-8">
      <style>textarea {width:100%;margin-top:10px;}</style>

      <script src="geolocation-example.js"></script>
   </head>
   <body>

       <h1>Geolocation</h1>

       <button onClick="showInfos()">Show Infos</button>

        <textarea name="name" rows="5" id="log-area"></textarea>
   </body>
</html>

 

2- PositionOptions interface

PositionOptions là interface mô tả một đối tượng với các thuộc tính (property) tùy chọn, đối tượng này được truyền (pass) vào như một tham số cho phương thức Geolocation.getCurrentPosition() hoặc Geolocation.watchPosition().
var options = {
    maximumAge : 1000,
    timeout: 5000,
    enableHighAccuracy : true
};
PositionOptions có 3 thuộc tính (property):
  • maximumAge
  • timeout
  • enableHighAccuracy

maximumAge

Thông tin vị trí mới nhất của người dùng sẽ được lưu trữ trong bộ nhớ cache trong khoảng thời gian maximumAge mili giây. Chương trình sẽ lấy giá trị trong cache trả về cho người dùng thay vì tìm kiếm vị trí theo thời gian thực. Mặc định là 0, nghĩa là chương trình luôn tìm kiếm vị trí theo thời gian thực.

timeout

Thời gian tính bằng mili giây tối đa mà chương trình chờ đợi kết quả xác định vị trí người dùng. Nếu trong khoảng thời gian đó không xác định được vị trí người dùng thì coi như thất bại, và hàm Callback-error sẽ được gọi.

enableHighAccuracy

Giá trị của tham số này là true/false. Giá trị true có nghĩa là chương trình cố gắng tìm vị trí tốt nhất có thể, chẳng hạn như điện thoại có con chip GPS, nó sẽ được sử dụng để xác định vị trí chính xác hơn, điều này có thể tốn thời gian và năng lượng hơn. Mặc định false.

3- Geolocation interface

Geolocation là interface quan trọng nhất trong Geolocation API, bạn có thể truy cập vào nó thông qua thuộc tính (property) navigator.geolocation.
navigator.geolocation
// Geolocation object:
var geo = navigator.geolocation;
 
// Or:
var geo = window.navigator.geolocation;

 
Các phương thức của Geolocation:
  • getCurrentPosition()
  • watchPosition()
  • clearWatch()

getCurrentPosition(success[,error[, [options]])

Phương thức getCienPocation() được sử dụng để có được vị trí hiện tại của thiết bị.
// success: A Callback function
// error: A Callback function (Optional)
// options: PositionOptions object (Optional)

getCurrentPosition(success[, error[, [options]])

// position: Position object.
var success = function(position)  {

}

//  positionError: PositionError object.
var error = function( positionError )  {

}
Các tham số:
success
Một hàm Callback có một tham số là position (Đối tượng của interface Position), nó được gọi khi mọi thứ thành công, bao gồm người dùng cho phép Geolocation API xác định vị trí của họ, và API này xác định được vị trí người dùng.
error
Một hàm Callback với một tham số là positionError (Một đối tượng của interface PositionError), nó được gọi khi người dùng không cho phép Geolocation API xem vị trí của họ, hoặc không xác định được vị trí người dùng, hoặc timeout.
options
Là một đối tượng của interface PositionOptions. Bao gồm các tùy chọn:
  • maximumAge
  • timeout
  • enableHighAccuracy
** Xem thêm đặc tả về interface PositionOptions trong tài liệu này.

watchPosition(success[, error[, options]])

Phương thức watchPocation() được sử dụng để đăng ký hàm xử lý sẽ được gọi tự động mỗi khi vị trí của thiết bị thay đổi. Phương thức trả về một số nguyên (integer) là mã số của nhiệm vụ.
// success: A Callback function
// error: A Callback function (Optional)
// options: PositionOptions object (Optional)

// watchID: An Integer Number.
var watchID = watchPosition(success[, error[, [options]])

// position: Position object.
var success = function(position)  {

}

//  positionError: PositionError object.
var error = function( positionError )  {

}
Các tham số:
success
Một hàm Callback có một tham số là position (Đối tượng của interface Position), nó được gọi khi mọi thứ thành công, bao gồm người dùng cho phép Geolocation API xác định vị trí của họ, và API này xác định vị trí người dùng thành công.
error
Một hàm Callback với một tham số là positionError (Một đối tượng của interface PositionError), nó được gọi khi người dùng không cho phép Geolocation API xem vị trí của họ, hoặc không xác định được vị trí người dùng, hoặc timeout.
options
Là một đối tượng của interface PositionOptions. Bao gồm các tùy chọn:
  • maximumAge
  • timeout
  • enableHighAccuracy
** Xem thêm đặc tả về interface PositionOptions trong tài liệu này.

clearWatch(id)

Phương thức clearWatch(ID) loại bỏ một bộ xử lý theo ID cho bởi tham số, bộ xử lý mà bạn đã tạo ra trước đó bởi việc sử dụng phương thức watchPosition().

4- Position interface

Interface Position chứa các thông tin như vị trí và thời điểm truy xuất vị trí của thiết bị.

Properties:

position.coords
Trả về đối tượng Coordinates lưu trữ thông tin kinh độ (longitude), vĩ độ (latitude), độ cao (altitude) của thiết bị so với mực nước biển của Trái Đất.
position.timestamp
Trả về đối tượng DOMTimeStamp biểu thị thời gian mà vị trí được truy xuất.

5- Coordinates interface

Interface Coordinates biểu thị vị trí và độ cao (altitude) của thiết bị so với mực nước biển của Trái đất, cũng như độ chính xác mà các thuộc tính (property) này được tính toán.
  • latitude
Trả về một số mô tả vị trí vĩ độ (latitude) trong "độ thập phân" (decimal degrees). Giá trị của nó nằm trong phạm vi [-90,90]
  • longitude
Trả về một số mô tả vị trí kinh độ (longitude) trong "độ thập phân" (decimal degrees). Giá trị của nó nằm trong phạm vi [-180,180].
  • altitude
Trả về một con số đại diện cho độ cao (altitude) của vị trí tính bằng mét, so với mực nước biển. Giá trị này có thể là null nếu việc triển khai không thể cung cấp dữ liệu.
  • accuracy
Trả về một số biểu thị độ chính xác của các thuộc tính (property) vĩ độ và kinh độ, được biểu thị bằng mét.
  • altitudeAccuracy
Trả về một số biểu thị độ chính xác của độ cao tính bằng mét. Giá trị này có thể là null.
  • heading
Trả về một số đại diện cho hướng mà thiết bị đang di chuyển. Giá trị này, được chỉ định theo độ (degrees), cho biết khoảng cách bao xa từ hướng Bắc thực sự và thiết bị. Giá trị 0 độ đại diện cho hướng Bắc thực sự, và hướng được xác định theo chiều kim đồng hồ (có nghĩa là phía Đông là 90 độ và phía Tây là 270 độ). Nếu tốc độ là 0, thì giá trị của headingNaN. Nếu thiết bị không thể cung cấp thông tin heading, giá trị này là null.
  • speed
Trả về một số biểu thị vận tốc của thiết bị tính bằng mét trên giây. Giá trị này có thể là null.

6- PositionError interface

Interface PositionError thể hiện lý do xảy ra lỗi khi sử dụng thiết bị định vị địa lý.
Value Hằng số Mô tả
1 PERMISSION_DENIED Việc lấy thông tin Geolocation thất bại vì người dùng không cho phép truy cập vị trí của họ.
2 POSITION_UNAVAILABLE Việc lấy thông tin Geolocation thất bại vì có lỗi nội bộ xẩy ra tại phía nhà cung cấp thông tin địa lý.
3 TIMEOUT Yêu cầu lấy thông tin vị trí đã được gửi đi, và quá thời gian cho phép mà vẫn chưa nhận được kết quả. Vì vậy yêu cầu bị hủy bỏ, và được coi là thất bại. PositionOptions.timeout cho phép bạn cấu hình thời gian tối đa chờ đợi phản hồi.

Properties:

  • message
Trả về một chuỗi mô tả nguyên nhân lỗi xẩy ra khi ứng dụng cố gắng lấy thông tin vị trí của thiết bị.

Xem thêm các chuyên mục: