Vị trí địa lý trong HTML5 - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Vị trí địa lý trong HTML5

HTML5

Hướng dẫn HTML

Biểu mẫu HTML

Đồ họa HTML

Phương tiện ghi HTML

HTML APIs

Tài nguyên HTML

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

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

HTML Geolocation API được sử dụng để có được vị trí địa lý của người dùng. Vì điều này mang tính bảo mật, vị trí không có sẵn trừ khi người dùng chấp nhận nó.

Lưu ý: vị trí địa lý là chính xác nhất cho các thiết bị có GPS, như iPhone.

Trình duyệt hỗ trợ

Các số trong bảng xác định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ Geolocation.

Lưu ý: tính đến Chrome 50, API Địa lý Địa lý sẽ chỉ hoạt động trên các ngữ cảnh bảo mật 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) thì các yêu cầu để có được 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ả lại vị trí 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:

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

Phân tích ví dụ trên:

  • Kiểm tra nếu Geolocation được hỗ trợ
  • Nếu được hỗ trợ, chạy phương thức getCurrentPosition (). Nếu không, hiển thị một thông báo cho người dùng
  • Nếu phương thức getCurrentPosition () hoạt động, nó sẽ trả về một tọa độ của đối tượng tới hàm được xác định trong tham số (showPosition)
  • Hàm showPosition () đưa ra Latitude và Longitude

Ví dụ trên là một kịch bản đị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 phương thức getCurrentPosition () được sử dụng để xử lý lỗi. Nó xác định một chức năng để chạy nếu không nhận được vị trí của người dùng:

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 một bản đồ, bạn cần quyền truy cập vào một dịch vụ bản đồ, như Google Maps. Trong ví dụ dưới đây, vĩ độ và kinh độ được sử dụng để hiển thị vị trí trong Google Map (sử dụng hình ảnh tĩnh):

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=400×300&sensor=false&key=YOUR_:KEY”;

document.getElementById(“mapholder”).innerHTML = “<img src='”+img_url+”‘>”;
}

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

Vị trí địa lý cũng rất hữu ích cho thông tin về vị trí cụ thể, như:

  • Cập nhật thông tin địa phương
  • Hiển thị điểm thú vị gần người dùng
  • Điều hướng đường đi (GPS)

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

Phương thức getCurrentPosition () trả về một đối tượng khi chạy thành công. Kinh độ, vĩ độ và tính chính xác luôn luôn được trả về. Các dữ liệu khác được trả về nếu có:

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

Đối tượng địa lý – các phương pháp khác

Đối tượng Geolocation cũng có các phương pháp 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 trong xe hơi)
  • ClearWatch () – Ngừng phương thức watchPosition ()

Ví dụ dưới đây cho thấy phương pháp watchPosition (). Bạn cần một thiết bị GPS chính xác để kiểm tra điều này (như iPhone):

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