Định vị địa lý HTML5

HTML5 Địa lý định vị (địa lý định vị) được sử dụng để định vị vị trí người dùng.

Thử ngay: Hiển thị vị trí của bạn trên bản đồ Google

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

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

Do tính năng này có thể xâm phạm quyền riêng tư của người dùng, thông tin vị trí người dùng không thể truy cập được trừ khi người dùng đồng ý.

Hỗ trợ trình duyệt

Internet Explorer 9, Firefox, Chrome, Safari và Opera hỗ trợ địa lý định vị.

Chú thích:Đối với các thiết bị có GPS như iPhone, địa lý định vị sẽ chính xác hơn.

HTML5 - Sử dụng địa lý định vị

Vui lòng sử dụng phương thức getCurrentPosition() để lấy vị trí của người dùng.

Ví dụ sau là một ví dụ đơn giản về địa lý định vị, có thể trả về độ dài và độ rộng kinh纬 của vị trí người dùng.

Mô hình

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

Thử ngay

Giải thích ví dụ:

  • Kiểm tra xem hỗ trợ địa lý định vị hay không
  • Nếu hỗ trợ, chạy phương thức getCurrentPosition(). Nếu không hỗ trợ, hiển thị một đoạn thông báo cho người dùng.
  • Nếu getCurrentPosition() chạy thành công, nó sẽ trả về một đối tượng coordinates cho hàm được quy định bởi tham số showPosition.
  • Hàm showPosition() nhận và hiển thị độ dài và độ rộng kinh纬

Ví dụ trên là một đoạn mã địa lý định vị cơ bản, không chứa 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ó quy định hàm chạy khi không thể lấy vị trí người dùng:

Mô hình

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="Người dùng từ chối yêu cầu vị trí địa lý."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Thông tin vị trí không thể truy cập được."
      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ử ngay

Mã lỗi:

  • Quyền truy cập bị từ chối - Người dùng không cho phép định vị địa lý
  • Vị trí không khả dụng - Không thể lấy vị trí hiện tại
  • Timeout - Thao tác quá hạn

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

Để hiển thị kết quả trên bản đồ, bạn cần truy cập dịch vụ bản đồ hỗ trợ tọa độ, chẳng hạn như Google Maps hoặc Baidu Maps:

Mô hình

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

Thử ngay

Trong ví dụ trên, chúng ta sử dụng dữ liệu tọa độ được trả về để hiển thị vị trí trên Google Maps (sử dụng hình ảnh tĩnh).

Script Google Maps

Liên kết trên sẽ hướng dẫn cách sử dụng script để hiển thị bản đồ tương tác với các tùy chọn đánh dấu, phóng to và kéo thả.

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

Trang này演示 cách hiển thị vị trí người dùng trên bản đồ. Tuy nhiên, định vị địa lý cũng rất hữu ích cho thông tin về vị trí cụ thể.

Ví dụ:

  • Cập nhật thông tin cục bộ
  • Hiển thị các điểm thú vị xung quanh người dùng
  • Hệ thống định vị xe ô tô tương tác (GPS)

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

Nếu thành công, phương thức getCurrentPosition() sẽ trả về đối tượng. Luôn luôn trả về thuộc tính latitude, longitude và accuracy. Nếu có thể, sẽ trả về các thuộc tính dưới đây.

Thuộc tính Mô tả
coords.latitude Vĩ độ số
coords.longitude Kinh độ số
coords.accuracy Độ chính xác vị trí
coords.altitude Độ chính xác độ cao, tính từ mực nước biển bằng mét
coords.altitudeAccuracy Độ chính xác độ cao của vị trí
coords.heading Hướng, tính từ hướng Bắc tính bằng độ
coords.speed Tốc độ, tính bằng mét/giây
timestamp Ngày/giờ phản hồi

Đối tượng Geolocation - 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 trên xe).

clearWatch() - Dừng phương thức watchPosition()

Dưới đây là ví dụ minh họa phương thức watchPosition(). Bạn cần một thiết bị GPS chính xác để kiểm tra ví dụ này (ví dụ như iPhone):

Mô hình

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

Thử ngay