Lấy vị trí của người dùng thông qua trình duyệt
Geolocation API có chức năng lấy được vị trí của người dùng từ trình duyệt thông qua Javascript.
Các phiên bản trình duyệt hỗ trợ:
IE 9+, Google Chrome 5+, Firefox 3.5+, Safari 5.0+, Opera Mini 16.0+Yêu cầu:
Website của bạn phải tạo SSL Certificate nếu muốn dùng trên nhiều thiết bị khác nhau. Sẽ có bài viết hướng dẫn của mình sau. Hiện tại bạn có thể tham khảo ở link này cho Apache ở Ubuntu 14.04: https://www.digitalocean.com/community/tutorials/how-to-create-a-ssl-certificate-on-apache-for-ubuntu-14-04
Link test:
https://jsfiddle.net/CuongNguyen/p8nzrxb3/HTML Code:
<html>
<head>
<style>
#demo {
font-style: bold;
color: red;
}
</style>
</head>
<body>
<p>Click the button to get your coordinates.</p>
<button id='getLocation'>Try It</button>
<p id="demo"></p>
</body>
</html>
SCRIPT Code:
<script>
$("#getLocation").click(function (){
getLocation();
});
function getLocation() {
if (navigator.geolocation) {
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 10
};
navigator.geolocation.getCurrentPosition(showPositionSuccess, showPositionError, options);
} else {
alert("Geolocation không hỗ trợ trên trình duyệt này.");
}
}
function showPositionSuccess(position) {
$("#demo").html( "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude);
}
function showPositionError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
$("#demo").html( "Người dùng từ chối yêu cầu từ Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
$("#demo").html("Không thể tìm ra vị trí của người dùng.");
break;
case error.TIMEOUT:
$("#demo").html("Yêu cầu xác nhận từ người dùng hết thời gian chờ");
break;
case error.UNKNOWN_ERROR:
$("#demo").html("Không tìm ra lỗi.");
break;
}
}
</script>
Giải thích:
Phương thức getLocation: sẽ gửi yêu cầu tới browser để lấy vị trí của người dùng,
Phương thức showPositionSuccess: sẽ gọi nếu được người dùng xác nhận thành công.
Ngược lại phương thức showPositionError: sẽ được gọi. Có 4 trường hợp xảy ra và đã được miêu tả rõ ràng trong đoạn code trên.
Trong đối tượng options có 3 thành phần:
- enableHighAccuracy : true nếu bạn muốn lấy vị trí chính xác của người dùng, false nếu bạn chỉ muốn lấy vị trí tương đối.
- timeout: thời gian chờ.
- maximumAge: Nói với trình duyệt rằng bạn sẽ lấy kết quả trong khoảng thời gian này. Ví dụ, nếu bạn set maximumAge: 10, có nghĩa rằng vị trí này sẽ được lưu lại trong khoảng từ khi bạn lấy vị trí thành công đến 10 phút sau. Nếu điện thoại hoặc trình duyệt muốn lấy lại vị trí, thì nó sẽ lấy lại vị trí được lưu đó. Tính năng này giúp cho điện thoại sẽ tiết kiệm pin hơn.
Kết quả: Đối tượng trả về khi thành công là latitude và longitude. Truyền 2 giá trị đó vào đường link dưới đây và mở trên tab mới để xem kết quả.
Lưu ý:
- Nếu bạn đang dùng trình duyệt, sẽ có 1 bảng thông báo "Allow (Chấp nhận)" hoặc "Từ chối (Deny)" ở góc trên bên trái màn hình. Sau lần này, trình duyệt sẽ lưu lại giá trị bạn đã chọn cho website này và tự động xác nhận cho lần truy cập tiếp theo. Nếu bạn lỡ Allow or Deny mà muốn thay đổi giá trị. Chỉ cần vào phần Settings trên trình duyệt, click vào Show advanced settings. Ở mục Privacy, chọn Content settings sau đó chọn Manage Exeptions ở khu vực Location. Rồi xóa đi những website bạn đã lỡ Allow or Deny. ( Ở đây mình dùng Google Chrome, làm tương tự vs các trình duyệt khác)
- Nếu bạn đang dùng điện thoại, bạn phải bật chức năng GPS trên điện thoại trước khi truy cập đường link. Nếu bạn chưa bật GPS, Geolocation sẽ tự động xác nhận bạn từ chối yêu cầu.
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaanh có thể cho em xin gói source trên tham khảo không?? em cảm ơn nhiều.. nếu có thể a gửi vào mail này giúp e nha..tks anh nhiều (robivu1994@gmail.com)
Trả lờiXóaMinh co code mau o tren bai dang kia ban: https://jsfiddle.net/CuongNguyen/p8nzrxb3/
XóaTrong wordpress thì cũng làm như trên ah bạn ơi.
Trả lờiXóaChỉ cần thêm code vào header và footer là được.. có plugin nào hỗ trợ không bạn
bắt buộc phải có ssl.. sử dụng https mới dùng được sao
Trả lờiXóa