Lấy vị trí người dùng với javascript
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 đồ:
Nội dung [Ẩ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 | |||||
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ụ:
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ụ:
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ụ:
Ví dụ: Google Map Script
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ụ:
Last updated