Vị trí địa lý trong HTML5

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

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