HTML Geolocation API

HTML Geolocation API được sử dụng để xác định vị trí của người dùng.

Xác định vị trí của người dùng

HTML Geolocation API được sử dụng để lấy thông tin về vị trí địa lý của người dùng.

Vì điều này có thể ảnh hưởng đến quyền riêng tư, thông tin vị trí sẽ không có sẵn trừ khi người dùng chấp thuận.

Lưu ý: Tính năng Geolocation (định vị địa lý) chính xác nhất đối với các thiết bị có GPS, như điện thoại thông minh.

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ tính năng Geolocation.

Lưu ý: Kể từ Chrome 50, API vị trí địa lý sẽ chỉ hoạt động trên các ngữ cảnh an toàn như HTTPS. Nếu trang web của bạn được lưu trữ trên nguồn gốc không an toàn (chẳng hạn như HTTP), các yêu cầu lấy vị trí của người dùng sẽ không còn hoạt động.

Sử dụng HTML Geolocation

Phương thức getCurrentPosition() được sử dụng để trả về vị trí của người dùng.

Ví dụ dưới đây trả về vĩ độ và kinh độ của vị trí của người dùng:

Ví dụ:

<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>

Ví dụ được giải thích như sau:

• Kiểm tra xem Geolocation có được hỗ trợ không
• Nếu được hỗ trợ, hãy chạy phương thức getCurrentPosition(). Nếu không, hãy hiển thị thông báo cho người dùng
• Nếu phương thức getCurrentPosition() thành công, nó sẽ trả về một đối tượng tọa độ cho hàm được chỉ định trong tham số (showPosition)
• Hàm showPosition() xuất ra vĩ độ và kinh độ

Ví dụ trên là một script Geolocation rất cơ bản, không có xử lý lỗi.

Xử lý lỗi và từ chối

Tham số thứ hai của phương thức getCurrentPosition() được sử dụng để xử lý lỗi. Nó chỉ định một hàm để chạy nếu không lấy được thông tin vị trí của người dùng:

Ví dụ:

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}

Thông tin về vị trí cụ thể

Bài viết đã trình bày cách hiển thị vị trí của người dùng trên bản đồ.

Geolocation cũng rất hữu ích cho thông tin cụ thể về vị trí, như:

• Thông tin địa phương cập nhật
• Hiển thị điểm ưa thích gần người dùng
• Điều hướng từng chặng (GPS)

Phương thức getCurrentPosition() - Trả về dữ liệu

Phương thức getCurrentPosition() trả về một đối tượng khi thành công. Các thuộc tính vĩ độ, kinh độ và độ chính xác luôn được trả về. Những thuộc tính khác cũng được trả về nếu có:

Đối tượng Geolocation - Các phương pháp thú vị khác

Đối tượng Geolocation cũng có các phương thức thú vị khác:

• watchPosition() - Trả về vị trí hiện tại của người dùng và tiếp tục trả lại vị trí đã cập nhật khi người dùng di chuyển (như GPS trên ô tô).
• clearWatch() - Dừng phương thức watchPosition().

Ví dụ dưới đây cho thấy cách phương thức watchPosition() hoạt động. Bạn cần một thiết bị GPS chính xác để kiểm tra điều này (như điện thoại thông minh):

Ví dụ:

<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>