Định vị địa lý HTML5

API vị trí địa lý HTML đượ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

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

Lưu ý: Định vị đị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.

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 đủ Định vị địa lý.


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

Sử dụng định vị địa lý HTML
Các getCurrentPosition()phương pháp được sử dụng để trả 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:

Thí 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ụ giải thích:

Kiểm tra xem Định vị địa lý có được hỗ trợ không
Nếu được hỗ trợ, hãy chạy phương thức getCienPocation (). Nếu không, hiển thị một thông báo cho người dùng
Nếu phương thức getCienPocation () thành công, nó sẽ trả về một đối tượng tọa độ cho hàm được chỉ định trong tham số (showPocation)
Hàm showPocation () xuất ra Vĩ độ và Kinh độ
Ví dụ trên là một tập lệnh Định vị địa lý 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 getCurrentPosition()phương thức được sử dụng để xử lý lỗi. Nó chỉ định một chức năng để chạy nếu không lấy được vị trí của người dùng:

Thí 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;
  }
}

Hiển thị kết quả trong bản đồ
Để hiển thị kết quả trong bản đồ, bạn cần truy cập vào dịch vụ bản đồ, như Google Maps.

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

Thí 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+"'>";
}
Thông tin cụ thể theo địa điểm
Trang này đã trình bày cách hiển thị vị trí của người dùng trên bản đồ.

Định vị địa lý cũng rất hữu ích cho thông tin cụ thể theo 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 getCienPocation () - Trả về dữ liệu
Các getCurrentPosition()phương thức trả về một đối tượng trên thành công. Các thuộc tính vĩ độ, kinh độ và độ chính xác luôn được trả về. Các thuộc tính khác được trả lại nếu có:

Property                       -                       Returns
coords.latitude - The latitude as a decimal number (always returned)
coords.longitude - The longitude as a decimal number (always returned)
coords.accuracy - The accuracy of position (always returned)
coords.altitude - The altitude in meters above the mean sea level (returned if available)
coords.altitudeAccuracy - The altitude accuracy of position (returned if available)
coords.heading - The heading as degrees clockwise from North (returned if available)
coords.speed - The speed in meters per second (returned if available)
timestamp - The date/time of the response (returned if available)

Đối tượng định vị địa lý - Các phương pháp thú vị khác
Đối tượng Định vị địa lý 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ả về vị trí được cập nhật khi người dùng di chuyển (như GPS trong xe hơi).
clearWatch()- Dừng watchPosition()phương thức.
Ví dụ dưới đây cho thấy watchPosition()phương pháp. 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):

Thí 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>