html api vị trí địa lý

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

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

API định vị địa lý HTML được sử dụng để lấy 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ư cá nhân, nên vị trí sẽ không được lấy trừ khi người dùng chấp thuận nó.

Lưu ý: Vị trí địa lý là chính xác nhất cho các thiết bị có GPS, như điện thoại thông minh.

Trình duyệt hỗ trợ

Các số trong bảng bên dưới chỉ định phiên bản tối thiểu trình duyệt hỗ trợ đầy đủ cho vị trí địa lý.

Phần tử
Vị trí địa lý	5.0-49.0 (http) 50.0 (https)	9.0	3.5	5.0	16.0

Lưu ý: Kể từ Chrome 50, API vị trí địa lý sẽ chỉ hoạt động trên các phương thức 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 định vị địa lý HTML

Phương thức getCurrentPosition() được sử dụng để trả vị trí hiện tại 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 = "Vĩ độ: " + position.coords.latitude + 
  "<br>Kinh độ: " + position.coords.longitude;
}
</script>

Xem kết quả

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

Kiểm tra xem Vị trí địa lý 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ó 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 Định vị địa lý rất cơ bản, không có lỗi xử lý.

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 nó không lấy được 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;
  }
}

Xem kết quả

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

Để hiển thị kết quả dưới dạng bản đồ, chúng ta cần có quyền truy cập vào dịch vụ bản đồ, chẳng hạn như Google Maps.

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

Ví dụ

function showPosition(position) {
  var latlon = position.coords.latitude + "," + position.coords.longitude;

  var 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+"'>";
}

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

Nếu phương thức getCurrentPosition() trả về một đối tượng trên thành công, các thuộc tính vĩ độ, kinh độ được trả về luôn có độ chính xác cao. Các thuộc tính khác được trả lại (nếu có) như sau:

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

Đối tượng định vị địa lý - Các phương pháp thú vị khác

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

watchPosition() - Trả lại 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 (giống như GPS trên ô tô).
clearWatch() - Dừng phương thức watchPosition().

Ví dụ dưới đây minh họa phương thức watchPosition(). Chúng ta sẽ cần một thiết bị GPS chính xác để kiểm tra (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="Vĩ độ: " + position.coords.latitude + 
    "<br>Kinh độ: " + position.coords.longitude;
}
</script>