Định vị địa lý HTML5

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

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

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

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

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

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

Hãy 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ề định vị địa lý, có thể trả về vĩ độ và 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ợ định vị địa lý 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 showPosition() được chỉ định trong tham số
  • Chức năng showPosition() nhận và hiển thị vĩ độ và kinh độ

Ví dụ trên là một đoạn mã cơ bản về định vị địa lý, 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 chức năng chạy khi việc lấy vị trí người dùng không thành cô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 khả dụng."
      break;
    case error.TIMEOUT:
      x.innerHTML="Yêu cầu lấy vị trí người dùng đã hết thời gian."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Một lỗi không xác định đã xảy ra."
      break;
    }
  }

Thử ngay

Mã lỗi:

  • Định quyền bị từ chối - Người dùng không được phép định vị địa lý
  • Vị trí không thể lấy được - Không thể lấy vị trí hiện tại
  • Timeout - Hành động 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 các dịch vụ bản đồ có thể sử dụng 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 tôi sử dụng dữ liệu tọa độ trả về để hiển thị vị trí trên bản đồ Google (sử dụng hình ảnh tĩnh).

Skript Google Maps

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

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

Trang này minh họa 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ị trí cụ thể.

Ví dụ:

  • Cập nhật thông tin địa phương
  • Hiển thị các điểm thú vị xung quanh người dùng
  • Hệ thống định vị xe cộ 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ề các 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ĩ độ là số thập phân
coords.longitude Kinh độ là số thập phân
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 về độ 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 pháp 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 pháp watchPosition()

Dưới đây là ví dụ về phương pháp 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