Web Geolocation API

Định vị vị trí người dùng

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

Vì có thể làm tổn hại đến quyền riêng tư, trừ khi người dùng phê duyệt, thì vị trí không thể sử dụng.

Thử trực tiếp

Chú ý:Định vị địa lý cho thiết bị có GPS (như điện thoại thông minh) là chính xác nhất.

Tất cả các trình duyệt đều hỗ trợ Geolocation API:

Chrome IE Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Chú ý:Từ Chrome 50 trở đi, Geolocation API sẽ chỉ áp dụng cho ngữ cảnh an toàn, ví dụ như HTTPS. Nếu trang web của bạn được lưu trữ trên nguồn không an toàn (ví dụ như HTTP), yêu cầu lấy vị trí người dùng sẽ không còn hoạt động.

Sử dụng Geolocation API

getCurrentPosition() Phương pháp này đượ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í người dùng:

Ví dụ

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  }
    x.innerHTML = "Geolocation không được hỗ trợ bởi trình duyệt này.";
  }
}
function showPosition(position) {
  x.innerHTML = "Độ rộng: " + position.coords.latitude +
  "Vĩ độ: " + position.coords.longitude;
}
</script>

Thử trực tiếp

Giải thích ví dụ:

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

Ví dụ trên là một đoạn mã script địa lý cơ bản, không có xử lý lỗi.

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

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

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ử trực tiếp

Hiển thị kết quả trên bản đồ

Nếu bạn muốn hiển thị kết quả trên bản đồ, bạn cần truy cập dịch vụ bản đồ, ví dụ như Google 地图。

Trong ví dụ dưới đây, vĩ độ và kinh độ trả về được sử dụng để hiển thị vị trí trên Google Maps (sử dụng hình ảnh tĩnh):

Ví dụ

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;
  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

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

Trang này演示如何在 bản đồ hiển thị vị trí của người dùng.

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

  • Thông tin địa phương mới nhất
  • Hiển thị các điểm thú vị gần người dùng
  • Hướng dẫn lái xe (Turn-by-turn navigation) (GPS)

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

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

Thuộc tính Trả về
coords.latitude Vĩ độ bằng số thập phân (luôn trả về).
coords.longitude Kinh độ bằng số thập phân (luôn trả về).
coords.accuracy Độ chính xác của vị trí (luôn trả về).
coords.altitude Độ cao so với mực nước biển (bằng mét) (nếu có sẵn thì trả về).
coords.altitudeAccuracy Độ chính xác về độ cao của vị trí (nếu có sẵn thì trả về).
coords.heading Hướng bay từ hướng Bắc theo chiều kim đồng hồ (nếu có sẵn thì trả về).
coords.speed Tốc độ (bằng mét/giây) (nếu có sẵn thì trả về).
timestamp Ngày/giờ phản hồi (nếu có sẵn thì trả về).

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

Đối tượng Geolocation còn 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ả về vị trí cập nhật khi người dùng di chuyển (như GPS trong xe).
  • clearWatch() - Dừng phương thức watchPosition().

Dưới đây là ví dụ: watchPosition() Phương pháp. Bạn cần thiết bị GPS chính xác để kiểm tra (ví dụ như điện thoại thông minh):

Ví dụ

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  }
    x.innerHTML = "Geolocation không được hỗ trợ bởi trình duyệt này.";
  }
}
function showPosition(position) {
  x.innerHTML = "Độ rộng: " + position.coords.latitude +
  "Vĩ độ: " + position.coords.longitude;
}
</script>

Thử trực tiếp