Định vị người dùng trong HTML5
Geolocation được sử dụng để xác định vị trí địa lý của người dùng.
Bạn đang xem: Geolocation là gì
Để bảo vệ quyền riêng tư, việc xác lập vị trí chỉ được thực thi khi người dùng đồng ý chấp thuận .
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.
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.
Sử dụng Geolocation để định vị trong HTML
Để xác định vị trí người dùng bạn sử dụng hàm getCurrentPosition().
Xem thêm: Nghĩa Của Từ Esteemed Là Gì, Định Nghĩa & Ý Nghĩa Của Từ Esteemed
Dưới đây là ví dụ đơn thuần về việc sử dụng Geolocation để lấy tọa độ người dùng :
DemoGiải thích ví dụ :Kiểm tra xem Geolocation có được hỗ trợ hay khôngNếu được hỗ trợ, chạy hàm getCurrentPosition(). Nếu không hỗ trợ, hiển thị thông báo tới người dùngNếu hàm getCurrentPosition() được thực hiện thành công, trả về tọa độ của người dùng thông qua hàm showPosition()Hàm showPosition() làm nhiệm vụ hiển thị Kinh độ và Vĩ độ của người dùngKiểm tra xem Geolocation có được tương hỗ hay khôngNếu được tương hỗ, chạy hàm getCurrentPosition ( ). Nếu không tương hỗ, hiển thị thông tin tới người dùngNếu hàm getCurrentPosition ( ) được triển khai thành công xuất sắc, trả về tọa độ của người dùng trải qua hàm showPosition ( ) Hàm showPosition ( ) làm trách nhiệm hiển thị Kinh độ và Vĩ độ của người dùngTrên đây là ví dụ rất cơ bản về Geolocation, chưa gồm có việc xác lập và hiển thị những lỗi phát sinh .
Xác định và hiển thị lỗi
Tham số thứ 2 của hàm getCurrentPosition ( ) được sử dụng để giải quyết và xử lý những lỗi phát sinh trong quy trình xác định. Nó sẽ tự động hóa gọi tới hàm định sẵn nếu xảy ra lỗi :
Demo
Các mã lỗi trả về:
Permission denied – Người dùng không cho phép sử dụng Geolocation để định vịPosition unavailable – Không lấy được thông tin về vị trí người dùngTimeout – Hết thời gian để thực hiện yêu cầu định vị
Hiển thị vị trí trên bản đồ
Permission denied – Người dùng không được cho phép sử dụng Geolocation để định vịPosition unavailable – Không lấy được thông tin về vị trí người dùngTimeout – Hết thời hạn để thực thi nhu yếu xác địnhĐể hiển thị hiệu quả xác định trên map, bạn cần tới những dịch vụ cung ứng map trực tuyến có tương hỗ Kinh độ và Vĩ độ, ví dụ điển hình như Google Maps :
DemoTrong ví dụ trên, tất cả chúng ta sử dụng tài liệu về Kinh độ và Vĩ độ để hiển thị vị trí trên Google map ( bằng ảnh tĩnh ) .Để hiển thị vị trí người dùng trên map trực tuyến mà bạn hoàn toàn có thể tương tác, phóng to, thu nhỏ, … tìm hiểu thêm ví dụ dưới đây :
Hiển thị vị trí người dùng trên Google Maps
Sử dụng thông tin vị trí
Ngoài việc hiển thị vị trí người dùng trên map, bạn hoàn toàn có thể sử dụng Geolocation để :Hiển thị các địa điểm được yêu thích gần người dùngChỉ đường cho người dùng (GPS)Cập nhật, lưu trữ thông tin về vị trí người dùng
getCurrentPosition() – Hàm trả về kết quả
Hiển thị những khu vực được yêu thích gần người dùngChỉ đường cho người dùng ( GPS ) Cập nhật, tàng trữ thông tin về vị trí người dùngHàm getCurrentPosition ( ) sẽ trả về hiệu quả là một đối tượng người dùng ( object ) nếu xác định thành công xuất sắc. Kinh độ, Vĩ độ và độ đúng chuẩn là những thuộc tính luôn luôn được trả về. Những thuộc tính khác sẽ được trả về nếu có đủ thông tin thiết yếu. Chi tiết về những thuộc tính trả về :
| coords.latitude | Vĩ độ |
| coords.longitude | Kinh độ |
| coords.accuracy | Độ chính xác của việc định vị |
| coords.altitude | Độ cao so với mực nước biển, đơn vị là mét |
| coords.altitudeAccuracy | Sự chính xác của độ cao vừa định vị |
| coords.heading | Hướng người dùng đang đi, đơn vị là độ, lấy Hướng Bắc làm gốc |
| coords.speed | Tốc độ di chuyển, đơn vị là met / giây |
| timestamp | Thời điểm phản hồi yêu cầu định vị |
Những hàm thú vị trong Geolocation
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ô).
Xem thêm: Đăng Ký Học Viện Bóng Đá Hoàng Anh Gia Lai, Học Viện Bóng Đá Hagl Arsenal Jmg
clearWatch ( ) – Ngừng sử dụng hàm watchPosition ( ) .Ví dụ dưới đây sẽ cho bạn thấy cách thao tác của hàm watchPosition ( ). Bạn cần phải có một thiết bị GPS để triển khai ví dụ này ( một chiếc điện thoại di động như iPhone ví dụ điển hình ) :
Leave a Reply Cancel reply
Your email address will not be published. Required fields are marked *
