Đồng hồ đo hành trình đơn giản sử dụng API vị trí địa lý

Michael Mahemoff

Giới thiệu

API vị trí địa lý cho phép bạn tìm hiểu vị trí của người dùng và theo dõi họ khi họ di chuyển, luôn có sự đồng ý của người dùng. Bạn có thể sử dụng chức năng này trong các truy vấn của người dùng, ví dụ: để hướng dẫn người dùng đến một điểm đến. Thông tin này cũng có thể được dùng để "gắn thẻ địa lý" một số nội dung mà người dùng đã tạo, ví dụ: để đánh dấu vị trí chụp ảnh. API này không phụ thuộc vào thiết bị; API không quan tâm đến cách trình duyệt xác định vị trí, miễn là ứng dụng có thể yêu cầu và nhận dữ liệu vị trí theo cách chuẩn. Cơ chế cơ bản có thể là thông qua GPS, wifi hoặc chỉ cần yêu cầu người dùng nhập vị trí theo cách thủ công. Vì bất kỳ lượt tra cứu nào trong số này cũng sẽ mất chút thời gian, nên API này là không đồng bộ; bạn truyền cho API này một phương thức gọi lại bất cứ khi nào bạn yêu cầu một vị trí.

Ví dụ ở đây là một đồng hồ đo quãng đường cho biết vị trí ban đầu và duy trì việc hiển thị quãng đường đã đi kể từ khi trang được tải.

Bước 1. Kiểm tra khả năng tương thích

Bạn có thể dễ dàng kiểm tra khả năng tương thích bằng cách kiểm tra sự hiện diện của đối tượng vị trí địa lý:

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

Bước 2. Khai báo HTML của Đồng hồ đo quãng đường

Trong ví dụ này, bạn đang tạo một đồng hồ đo quãng đường, vì vậy, hãy khai báo HTML sau:

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

Vài bước tiếp theo sẽ sử dụng API Vị trí địa lý để điền sẵn tất cả các span trống đó.

Bước 3. Xác định vị trí hiện tại của người dùng

getCurrentPosition() sẽ báo cáo không đồng bộ về vị trí hiện tại của người dùng. Gọi hàm này ngay khi trang tải để hàm này điền chính xác vị trí bắt đầu – và lưu lại để sử dụng sau:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

Nếu đây là lần đầu tiên một ứng dụng trên miền này yêu cầu quyền, thì trình duyệt thường sẽ kiểm tra xem người dùng có đồng ý hay không. Tuỳ thuộc vào trình duyệt, bạn cũng có thể có các lựa chọn ưu tiên để luôn cho phép hoặc không cho phép truy vấn quyền. Trong trường hợp này, quy trình xác nhận sẽ bị bỏ qua.

Sau khi chạy mã này, bạn sẽ thấy vị trí bắt đầu. Tuỳ thuộc vào thiết bị vị trí mà trình duyệt của bạn đang sử dụng, đối tượng vị trí thực sự có thể chứa nhiều thông tin hơn là chỉ vĩ độ và kinh độ, chẳng hạn như đối tượng này có thể bao gồm độ cao hoặc hướng. Bạn có thể khám phá thêm bằng cách ghi biến vị trí vào bảng điều khiển.

Bước 4. Xử lý lỗi

Rất tiếc, không phải tất cả các lượt tra cứu thông tin vị trí đều thành công. Có thể không tìm thấy GPS hoặc người dùng đột nhiên tắt tính năng tra cứu vị trí. Đối số thứ hai (không bắt buộc) cho getCurrentPosition() sẽ được gọi trong trường hợp xảy ra lỗi, vì vậy, bạn có thể thông báo cho người dùng bên trong lệnh gọi lại:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

Bước 5. Theo dõi vị trí của người dùng

Lệnh gọi trước đó đến getCurrentPosition() chỉ được thực thi một lần, khi tải trang. Để theo dõi các thay đổi, hãy sử dụng watchPosition(). Phương thức này sẽ tự động thông báo cho một hàm gọi lại bất cứ khi nào người dùng di chuyển:

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

Bước 6. Hiển thị quãng đường đã đi

Bước này không liên quan trực tiếp đến API Vị trí địa lý, nhưng giúp hoàn thiện bản minh hoạ và cung cấp một ví dụ về cách bạn có thể sử dụng dữ liệu vị trí. Thêm một dòng vào trình xử lý watchPosition() để điền quãng đường đã đi:

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

Hàm calculateDistance() thực hiện thuật toán hình học để xác định khoảng cách giữa hai toạ độ. Phương thức triển khai JavaScript được điều chỉnh từ một tập lệnh do Moveable Type cung cấp theo giấy phép Creative Commons:

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}