[HTML/HTML5] Phần 47: API vị trí địa lý bằng HTML

Trong bài này, bạn sẽ được hướng dẫn tạo 1 đoạn codes JavaScript nhỏ kết hợp với HTML (gọi là HTML API) để có thể hiển thị vị trí địa lý (kinh độ, vĩ độ) của người dùng. Dựa vào vị trí địa lý này, nhiều website và app dùng để hiển thị các thông tin liên quan (lân cận) đến người dùng. Ví dụ bạn có thể foody.vn dựa vào vị trí người dùng để hiển thị các sản phẩm ăn uống nổi bật gần đó.

Đối với thuật ngữ API, nó là viết tắt của cụm từ tiếng Anh “Application Programming Interface“, tức là giao diện máy tính để tương tác giữa các trung gian phần mềm, cho phép người dùng mở rộng chức năng hiện có và trao đổi các chức năng này với các hệ thống máy tính, ứng dụng khác. Các API cũng cho phép cách lập trình mô-đun, và người dùng sử dụng giao diện một cách độc lập với việc triển khai.

Xem vị trí địa lý của người dùng

API vị trí địa lý dùng để lấy vị trí địa lý mà người dùng đang ở khi truy cập Internet, nói cách chính xác hơn là vị trí máy tính mà người dùng đang sử dụng để truy cập Internet. Vì thông tin này mang tính cá nhân, vì vậy người dùng phải đồng ý chia sẻ vị trí này hay không. Nếu người dùng không muốn tiết lộ vị trí của họ thì API này sẽ không hoạt động.

Lưu ý thêm rằng vị trí địa lý là chính xác nhất khi dùng các thiết bị có GPS, ví dụ như điện thoại thông minh.

Trình duyệt nào hỗ trợ việc chia sẻ vị trí địa lý?

Người dùng truy cập website của bạn bằng trình duyệt, vì vậy tất nhiên bạn phải quan tâm xem trình duyệt nào hỗ trợ tính năng. Theo bảng sau, thì các trình duyệt phổ biến hiện nay đều hỗ trợ tính năng chia sẻ vị trí.

API	Chrome	Internet Explorer / Edge	Firefox	Safari	Opera
Geolocation	5.0 – 49.0 (http) 50.0 (https)	9.0	3.5	5.0	16.0

Đối với trình duyệt Chrome phiên bản 50, API chia sẻ vị trí chỉ hoạt động với những website có HTTPS. Hãy chắc chắn website của bạn sử dụng HTTPS để kích hoạt tính năng này cho Chrome.

Đoạn code chia sẻ vị trí địa lý bằng HTML

Đầu tiên, chúng ta sẽ sử dụng phương thức getCurrentPosition() sẽ trả về vị trí người dùng. Mời bạn hãy xem đoạn code sau để có thể lấy vị trí kinh độ (longitude) và vĩ độ (latitude) của người dùng.

Ở trình duyệt Chrome, người dùng cần nhấn nút Allow để có thể chia sẻ vị trí địa lý

Thông tin vị trí địa lý (kinh độ và vĩ độ) sau khi người dùng chấp nhận chia sẻ vị trí.

<!DOCTYPE html>
<html>
<body>

<p>Nhấn nút "Vị trí" để lấy vị trí địa lý của bạn --- <a href="https://www.dammio.com">dammio.com</a></p>

<button onclick="getLocation()">Vị trí</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Chia sẻ vị trí địa lý không được trình duyệt hỗ trợ. --- dammio.com";
  }
}

function showPosition(position) {

  google_map_url = "https://www.google.com/maps/place/" + position.coords.latitude + " " + position.coords.longitude
  google_map_link = "<a target='_blank' href='" + google_map_url + "'>" + google_map_url + "</a>"
  x.innerHTML = "Vĩ độ: " + position.coords.latitude +
  "<br>Kinh độ: " + position.coords.longitude + "<br>Vị trí của bạn trên Google Map: " + google_map_link;

}
</script>

</body>
</html>

Đầu tiên phương thức getLocation() sẽ kiểm tra xem trình duyệt có hỗ trợ tính năng chia sẻ vị trí địa lý hay không. Nếu không thì sẽ hiển thị cảnh báo “Chia sẻ vị trí địa lý không được trình duyệt hỗ trợ”. Tiếp theo, nếu trình duyệt hỗ trợ tính năng này thì phương thức showPosition() sẽ hiển thị thông tin về kinh độ và vĩ độ của người dùng, kèm theo đó là liên kết Gooogle Map cho phép biết vị trí địa lý của người dùng trên bản đồ.

Liên quan: 5 ưu điểm nổi bật của việc sử dụng HTML5

Bạn có thể thêm tham khảo bài viết Cách nhúng bản đồ Google (Google Maps) vào website của bạn để biết cách thêm bản đồ Google vào website nhé.

Xử lý lỗi và yêu cầu bị từ chối

Nếu người dùng từ chối chia sẻ vị trí thì bạn có thể sử dụng tham số thứ 2 của phương thức getCurrentPosition() để đặc tả tên phương thức hiển thị lỗi. Trong ví dụ sau, phương thức showError() cũng là tên của tham số thứ 2 của phương thức getCurrentPosition() dùng để xử lý lỗi.

<!DOCTYPE html>
<html>
<body>

<p>Nhấn nút "Vị trí" để lấy vị trí địa lý của bạn --- <a href="https://www.dammio.com">dammio.com</a></p>

<button onclick="getLocation()">Vị trí</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    x.innerHTML = "Chia sẻ vị trí địa lý không được trình duyệt hỗ trợ. --- dammio.com";
  }
}

function showPosition(position) {

  google_map_url = "https://www.google.com/maps/place/" + position.coords.latitude + " " + position.coords.longitude
  google_map_link = "<a target='_blank' href='" + google_map_url + "'>" + google_map_url + "</a>"
  x.innerHTML = "Vĩ độ: " + position.coords.latitude +
  "<br>Kinh độ: " + position.coords.longitude + "<br>Vị trí của bạn trên Google Map: " + google_map_link;

}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "Người dùng từ chối chia sẻ vị trí địa lý. --- dammio.com"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Vị trí địa lý không có sẵn."
      break;
    case error.TIMEOUT:
      x.innerHTML = "Yêu cầu của người dùng hết hạn."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Lỗi không xác định."
      break;
  }
}
</script>

</body>
</html>

Hiển thị kết quả trên Google Maps

Để hiển thị kết quả trên Google Maps, bạn cần có một khóa dịch của Google Maps. Mời xem thêm ở https://developers.google.com/maps/documentation/geocoding/get-api-key.

Ví dụ hiển thị bản đồ như sau:

<!DOCTYPE html>
<html>
<body>

<p>Nhấn nút "Vị trí" để lấy vị trí địa lý của bạn --- <a href="https://www.dammio.com">dammio.com</a></p>

<button onclick="getLocation()">Vị trí</button>

<p id="demo"></p>

<p id="mapholder"></p>

<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    x.innerHTML = "Chia sẻ vị trí địa lý không được trình duyệt hỗ trợ. --- dammio.com";
  }
}

function showPosition(position) {

  var google_map_url = "https://www.google.com/maps/place/" + position.coords.latitude + " " + position.coords.longitude
  var google_map_link = "<a target='_blank' href='" + google_map_url + "'>" + google_map_url + "</a>"
  x.innerHTML = "Vĩ độ: " + position.coords.latitude +
  "<br>Kinh độ: " + position.coords.longitude + "<br>Vị trí của bạn trên Google Map: " + google_map_link;
  
  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";
  // Bạn cần có khóa của Google Maps và thay bằng YOUR_KEY để hoạt động
  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}


function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "Người dùng từ chối chia sẻ vị trí địa lý. --- dammio.com"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Vị trí địa lý không có sẵn."
      break;
    case error.TIMEOUT:
      x.innerHTML = "Yêu cầu của người dùng hết hạn."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Lỗi không xác định."
      break;
  }
}

</script>

</body>
</html>

Các thuộc tính của phương thức getCurrentPosition()

Phương thức này có các thuộc tính khác nữa, bên cạnh coords.latitude và coords.longitude (đã dùng ở các ví dụ trên), các bạn có thể tham khảo để áp dụng thêm cho website của mình.

coords.latitude: trả về vĩ độ ở số thập phân (luôn luôn trả về)
coords.longitude: trả về kinh độ ở số thập phân (luôn luôn trả về)
coords.accuracy: độ chính xác của vị trí hiển thị (luôn luôn trả về)
coords.altitude: độ cao tính bằng mét so với mặt nước biển (trả về nếu có)
coords.altitudeAccuracy: độ chính xác độ cao (trả về nếu có)
coords.heading: Tiêu đề theo độ theo chiều kim đồng hồ từ phía Bắc (trả về nếu có)
coords.speed: Tốc độ tính bằng mét trên giây (trả về nếu có)
timestamp: thời gian phản hồi (trả về nếu có)

Như vậy, bài viết đã hướng dẫn bạn cách sử dụng API chia sẻ vị trí địa lý (geolocation) bằng HTML. Hi vọng các bạn nắm bắt được nội dung bài viết ở DAMMIO.COM, triển khai và mở rộng thêm cho các ứng dụng Web của mình. Mời bạn theo dõi bài tiếp theo.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2021). [HTML/HTML5] Phần 47: API vị trí địa lý bằng HTML. https://www.dammio.com/2021/03/01/html-html5-phan-47-api-vi-tri-dia-ly-bang-html.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[HTML/HTML5] Phần 47: API vị trí địa lý bằng HTML}, year = {2021}, url = {https://www.dammio.com/2021/03/01/html-html5-phan-47-api-vi-tri-dia-ly-bang-html}, urldate = {2024-09-29} }

Kết nối