HTML5 17 – Geolocation API – Định vị vị trí trong HTML5

0
427

HTML5 giúp ích rất nhiều cho người làm web bởi nó hỗ trợ rất nhiều API cho phép bạn thao tác với người dùng nhiều hơn. Trong bài viết này tôi sẽ hướng dẫn bạn lấy thông tin vị trí người dùng như quốc gia, thành phố, vị trí, zipcode… Từ những thông tin này bạn có thể biết được người dùng của mình đến từ đâu. Thông tin này có vẻ rất phù hợp với các bạn làm Thương mại điện tử.

Trong hướng dẫn này, tôi sử dụng một thành phần khá hay của HTML5 đó là HTML5 Geolocation API. Tuy nhiên, vì đây là thông tin cá nhân mà có thể người dùng không muốn tiết lộ nên bạn cần phải có sự cho phép từ phía người dùng. Nếu bạn đã có sự cho phép của người dùng, từ kinh độ và vĩ độ có được bạn có thể xác định được vị trí của người dùng dễ dàng thông qua Google Map.

Geolocation API - Định vị vị trí trong HTML5

Trình duyệt hỗ trợ

Thuộc tính          
Geolocation API 5.0 3.5 9.0 5.0 16.0

Lưu ý: Việc định vị sẽ cho kết quả chính xác hơn với các thiết bị có GPS, như iPhone, iPad.

Cú pháp sử dụng hàm định vị

Trong đó:

  • success : là một hàm callback do bạn định nghĩa, hàm này sẽ nhận được giá trị về đối tượng Possition để định vị khi hàmgetCurrentPosition gọi thành công.
  • error : là một hàm callback do bạn định nghĩa, hàm này sẽ nhận được đối tượng PositionError nếu như hàm getCurrentPosition có lỗi.

Hàm callback nhận tọa độ định vị

Tham số success ở hàm getCurrentPosition là một hàm callback, hàm này được gọi và nhận tham số là đối tượng Possition nếu gọi thành công.

Từ đối tượng Possition các thông số về tọa độ được truy cập thông qua đối tượng:

Với coord có được như vậy, kinh độ và vĩ độ xác định vị trí sẽ được lấy bằng biểu thức:
– Kinh độ: long = coord.longitude;
– Vĩ độ: lat = coord.latitude;

Ví dụ hàm callback lấy và hiển thị kinh độ vĩ đỗ vào một phần tử HTML có id là toado, giả sử đặt lại tên hàm callback này là showcoor

Hàm callback gọi khi có lỗi

Tham số error ở hàm getCurrentPosition là một hàm callback, hàm này được gọi và nhận tham số là đối tượng PositionError nếu gọi hàm getCurrentPosition thất bại.

Lấy mã lỗi bằng công thức: errcode = PositionError.code với các giá trị có ý nghĩa như sau:

  • 1 – người dùng không cho phép lấy vị trí
  • 2 – xác định vị trí có lỗi nào đó xảy ra
  • 3 – tọa độ quá thời gian không trả về

Các thông báo lỗi được lấy qua công thức: message = PositionError.message

Ví dụ xây dựng hàm callback có tên errorgeo và hiện thị mã lỗi, thông báo lỗi ở phần tử HTML có id="toado"

Lấy ảnh bản đồ từ maps.googleapis.com

Với kinh độ và vĩ độ lấy được từ hàm getCurrentPosition nghĩa là đã biết được vị trí cần định vị, từ thông tin này tùy mục đích ứng dụng mà bạn sử dụng khác nhau. Ví dụ sử dụng dịch vụ maps.googleapis.com để lấy ảnh bản đồ vị trí.

Ví dụ đã có kinh độ lat và vĩ độ long bạn có thể lấy ảnh bằng URL:

Ví dụ tổng quát

Code:

Kết quả:

Geolocation API - Định vị vị trí trong HTML5 02

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):

Kết quả:

Geolocation API - Định vị vị trí trong HTML5 03

Kết luận

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

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây