Một đồng hồ đo hành trình đơn giản sử dụng Geolocation API

Michael Mahemoff

Giới thiệu

Geolocation API (API vị trí địa lý) cho phép bạn tìm ra 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. Chức năng này có thể được dùng trong các câu hỏi của người dùng, chẳng hạn như để hướng dẫn ai đó đến một điểm đến. Thông tin này cũng có thể được dùng để "gắn thẻ địa lý" cho một số nội dung mà người dùng đã tạo, ví dụ: để đánh dấu nơi chụp ảnh. API này không phụ thuộc vào thiết bị; API này 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, Wi-Fi hoặc chỉ cần yêu cầu người dùng nhập vị trí của họ theo cách thủ công. Vì bất kỳ hoạt động tra cứu nào trong số này cũng sẽ mất một chút thời gian, nên API này 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 thông tin vị trí.

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

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

Browser Support

• 5
• 12
• 3.5
• 5

Source

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 hành trình

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>

Trong vài bước tiếp theo, chúng ta sẽ sử dụng Geolocation API để điề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à lưu vị trí bắt đầu để 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 sự đồng ý của người dùng. Tuỳ thuộc vào trình duyệt, có thể cũng có các lựa chọn ưu tiên để luôn cho phép hoặc không cho phép tra cứu 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 chứ không chỉ có vĩ độ và kinh độ, ví dụ: 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 lúc nào việc tra cứu vị trí cũng thành công. Có thể không tìm thấy GPS hoặc người dùng đột ngột 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, nhờ đó, 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(). Hàm này sẽ tự động thông báo cho hàm callback 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 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 hoàn thiện bản minh hoạ và cung cấp ví dụ về cách bạn có thể sử dụng dữ liệu vị trí. Thêm một dòng bổ sung 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 một thuật toán hình học để xác định khoảng cách giữa hai toạ độ. Cách 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;
}