WebVN Cộng đồng web Việt Nam
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 đồ:
Đị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ả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 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.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Geolocation | 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.
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().
Dưới đây là ví dụ đơn giản về việc sử dụng Geolocation để lấy tọa độ người dùng:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <body> <p>Nhấn vào nút dưới đây để lấy tọa độ của bạn.</p> <button onclick="getLocation()">Định vị</button> <p id="demo"></p> <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Trình duyệt của bạn không hỗ trợ Geolocation."; } } function showPosition(position) { x.innerHTML = "Vĩ độ: " + position.coords.latitude + "<br>Kinh độ: " + position.coords.longitude; } </script> </body> </html> |
Giải thích ví dụ:
- Kiểm tra xem Geolocation có được hỗ trợ hay không
- Nế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ùng
- Nế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ùng
Trên đây là ví dụ rất căn bản về Geolocation, chưa bao gồm việc xác định và hiển thị các 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 để xử lý các lỗi phát sinh trong quá trình định vị. Nó sẽ tự động gọi tới hàm định sẵn nếu xảy ra lỗi:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html> <body> <p>Nhấn vào nút dưới đây để lấy tọa độ của bạn.</p> <button onclick="getLocation()">Định vị</button> <p id="demo"></p> <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError); } else { x.innerHTML = "Trình duyệt của bạn không hỗ trợ Geolocation."; } } function showPosition(position) { x.innerHTML = "Vĩ độ: " + position.coords.latitude + "<br>Kinh độ: " + position.coords.longitude; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML = "Người dùng từ chối cấp quyền định vị." break; case error.POSITION_UNAVAILABLE: x.innerHTML = "Không có thông tin vị trí." break; case error.TIMEOUT: x.innerHTML = "Hết thời gian gửi yêu cầu định vị." break; case error.UNKNOWN_ERROR: x.innerHTML = "Lỗi chưa xác định." break; } } </script> </body> </html> |
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ùng
- Timeout – Hết thời gian để thực hiện yêu cầu định vị
Hiển thị vị trí trên bản đồ
Để hiển thị kết quả định vị trên bản đồ, bạn cần tới các dịch vụ cung cấp bản đồ trực tuyến có hỗ trợ Kinh độ và Vĩ độ, chẳng hạn như Google Maps:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html> <body> <p>Nhấn vào nút dưới đây để lấy tọa độ của bạn.</p> <button onclick="getLocation()">Định vị</button> <p id="demo"></p> <div id="mapholder"></div> <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError); } else { x.innerHTML = "Trình duyệt của bạn không hỗ trợ Geolocation."; } } 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+"'>"; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML = "Người dùng từ chối cấp quyền định vị." break; case error.POSITION_UNAVAILABLE: x.innerHTML = "Không có thông tin vị trí." break; case error.TIMEOUT: x.innerHTML = "Hết thời gian gửi yêu cầu định vị." break; case error.UNKNOWN_ERROR: x.innerHTML = "Lỗi chưa xác định." break; } } </script> </body> </html> |
Trong ví dụ trên, chúng ta sử dụng dữ liệu về Kinh độ và Vĩ độ để hiển thị vị trí trên Google maps (bằng ảnh tĩnh).
Để hiển thị vị trí người dùng trên bản đồ trực tuyến mà bạn có thể tương tác, phóng to, thu nhỏ,… tham khảo 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 bản đồ, bạ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ù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
getCurrentPosition() – Hàm trả về kết quả
Hàm getCurrentPosition() sẽ trả về kết quả là một đối tượng (object) nếu định vị thành công. Kinh độ, Vĩ độ và độ chính xác 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 cần thiết. Chi tiết về các thuộc tính trả về:
| Thuộc tính | Miêu tả |
|---|---|
| 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ô).
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 chẳng hạn):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <body> <p>Nhấn vào nút dưới đây để lấy tọa độ của bạn.</p> <button onclick="getLocation()">Định vị</button> <p id="demo"></p> <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { x.innerHTML = "Trình duyệt của bạn không hỗ trợ Geolocation.";} } function showPosition(position) { x.innerHTML="Vĩ độ: " + position.coords.latitude + "<br>Kinh độ: " + position.coords.longitude; } </script> </body> </html> |
