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. Chức năng này có thể được dùng trong các cụm từ tìm kiếm của người dùng, chẳng hạn như để hướng dẫn người dùng đến một điểm đến. Tính năng 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, chẳng hạn như để đánh dấu vị trí chụp ảnh. API này không phụ thuộc vào thiết bị; không quan tâm đến cách trình duyệt xác định vị trí, miễn là ứng dụng khách 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ỉ đơn giản là 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ỳ lần tra cứu nào trong số này sẽ mất một chút thời gian, nên API không đồng bộ; bạn sẽ chuyển 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 vị trí.
Ví dụ ở đây là đồng hồ đo hành trình hiển thị vị trí ban đầu và duy trì hiển thị quãng đường họ đã đ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 tính 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 chuyến đi
Trong ví dụ này, bạn đang xây dựng đồng hồ đo chuyến đi, 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 tất cả các khoảng 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 lệnh này ngay khi trang tải, để vị trí bắt đầu điền sẵn và lưu lại 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ũ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 tra cứu quyền. Trong trường hợp đó, quy trình xác nhận sẽ bị bỏ qua.
Sau khi chạy mã này, bạn có thể thấy vị trí bắt đầu. Tuỳ thuộc vào thiết bị vị trí mà trình duyệt đang sử dụng, đối tượng vị trí có thể thực sự chứa nhiều thông tin hơn là vĩ độ và kinh độ, chẳng hạn như đối tượng có thể bao gồm độ cao hoặc hướng. Bạn có thể khám phá thêm bằng cách ghi nhật ký 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ả tra cứu vị trí đều thành công. Có thể GPS không xác định được vị trí 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 để 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. Giám sát 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 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 thị khoảng cách đã đi
Bước này không liên quan trực tiếp đến API vị trí địa lý, nhưng làm tròn bản minh hoạ và đưa ra 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 khoảng cách đã đ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ừ 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;
}