API vị trí địa lý cho phép bạn khám phá vị trí của người dùng nếu họ đồng ý.
API vị trí địa lý cho phép bạn khám phá vị trí của người dùng (nếu có sự đồng ý của người dùng). Bạn có thể sử dụng chức năng này cho những việc như hướng dẫn người dùng tới điểm đến của họ và gắn thẻ địa lý cho nội dung do người dùng tạo; ví dụ: đánh dấu vị trí chụp ảnh.
API vị trí địa lý cũng cho phép bạn xem 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 (và chỉ khi trang đang mở). Điều này tạo ra nhiều trường hợp sử dụng thú vị, chẳng hạn như việc tích hợp với các hệ thống phụ trợ để chuẩn bị đơn đặt hàng thu thập nếu người dùng ở gần.
Bạn cần lưu ý nhiều điều khi sử dụng API vị trí địa lý. Hướng dẫn này sẽ cho bạn biết các trường hợp sử dụng và giải pháp phổ biến.
Tóm tắt
- Sử dụng tính năng định vị vị trí khi có lợi cho người dùng.
- Yêu cầu cấp quyền như một phản hồi rõ ràng cho một cử chỉ của người dùng.
- Sử dụng phát hiện tính năng trong trường hợp trình duyệt của người dùng không hỗ trợ tính năng định vị vị trí.
- Đừng chỉ tìm hiểu cách triển khai tính năng định vị vị trí; mà hãy tìm hiểu cách tốt nhất để sử dụng tính năng định vị vị trí.
- Kiểm tra vị trí địa lý với trang web của bạn.
Trường hợp sử dụng tính năng định vị vị trí
- Tìm nơi người dùng ở gần một vị trí thực tế cụ thể nhất để điều chỉnh trải nghiệm người dùng.
- Điều chỉnh thông tin (chẳng hạn như tin tức) theo vị trí của người dùng.
- Hiển thị vị trí của người dùng trên bản đồ.
- Gắn thẻ dữ liệu được tạo bên trong ứng dụng với vị trí của người dùng (tức là gắn thẻ địa lý cho ảnh).
Xin phép một cách có trách nhiệm
Các nghiên cứu gần đây về người dùng cho thấy rằng người dùng không tin tưởng những trang web chỉ nhắc người dùng từ bỏ vị trí của họ khi tải trang. Vậy những phương pháp hay nhất là gì?
Giả định rằng người dùng sẽ không cung cấp cho bạn thông tin vị trí của họ
Nhiều người dùng sẽ không muốn cung cấp cho bạn vị trí của họ, vì vậy, bạn cần áp dụng kiểu phát triển phòng thủ.
- Hãy xử lý tất cả lỗi ngoài API vị trí địa lý để bạn có thể điều chỉnh trang web của mình theo điều kiện này.
- Hãy nêu rõ ràng về nhu cầu của bạn đối với vị trí đó.
- Sử dụng giải pháp dự phòng nếu cần.
Sử dụng dự phòng nếu bắt buộc phải có vị trí địa lý
Trang web hoặc ứng dụng của bạn không nên yêu cầu quyền truy cập vào vị trí hiện tại của người dùng. Tuy nhiên, nếu trang web hoặc ứng dụng của bạn yêu cầu thông tin vị trí hiện tại của người dùng, thì có các giải pháp của bên thứ ba cho phép bạn có được thông tin dự đoán chính xác nhất về vị trí hiện tại của người dùng.
Các giải pháp này thường hoạt động bằng cách xem xét địa chỉ IP của người dùng và ánh xạ đến các địa chỉ thực tế đã đăng ký bằng cơ sở dữ liệu RIPE. Những vị trí này thường không chính xác lắm, thường cung cấp cho bạn vị trí của trung tâm viễn thông hoặc trạm điện thoại di động gần người dùng nhất. Trong nhiều trường hợp, kết quả tìm kiếm thậm chí có thể không chính xác như vậy, đặc biệt là khi người dùng sử dụng VPN hoặc một số dịch vụ proxy khác.
Luôn yêu cầu quyền truy cập vào vị trí bằng cử chỉ của người dùng
Hãy đảm bảo người dùng hiểu lý do bạn yêu cầu cung cấp thông tin vị trí của họ và lợi ích họ sẽ nhận được. Yêu cầu điều này ngay lập tức trên trang chủ vì trang web tải sẽ dẫn đến trải nghiệm người dùng không tốt.
Thay vào đó, hãy đưa ra cho người dùng một lời gọi hành động rõ ràng hoặc chỉ báo rằng một thao tác sẽ yêu cầu quyền truy cập vào vị trí của họ. Sau đó, người dùng có thể dễ dàng liên kết lời nhắc của hệ thống về quyền truy cập với thao tác vừa bắt đầu.
Đưa ra dấu hiệu rõ ràng rằng một hành động sẽ yêu cầu thông tin vị trí của người dùng
Trong một nghiên cứu của nhóm Google Ads, khi được yêu cầu đặt phòng khách sạn ở Boston cho một hội nghị sắp tới trên một trang web của một khách sạn cụ thể, người dùng được nhắc chia sẻ vị trí GPS của mình ngay sau khi nhấn vào lời kêu gọi hành động "Tìm và đặt phòng" trên trang chủ.
Trong một số trường hợp, người dùng trở nên thất vọng vì không hiểu tại sao mình lại thấy các khách sạn ở San Francisco khi muốn đặt phòng ở Boston.
Trải nghiệm tốt hơn là đảm bảo người dùng hiểu lý do bạn yêu cầu họ cung cấp thông tin vị trí của họ. Thêm một ký hiệu phổ biến trên các thiết bị, chẳng hạn như trình tìm phạm vi hoặc một lời kêu gọi hành động rõ ràng như "Tìm gần tôi".
Nhẹ nhàng nhắc người dùng cấp quyền truy cập vào thông tin vị trí của họ
Bạn không có quyền truy cập vào bất cứ hành động nào mà người dùng đang làm. Bạn biết chính xác khi nào người dùng không cho phép truy cập vào vị trí của họ nhưng bạn không biết khi nào họ cấp quyền truy cập cho bạn; bạn chỉ biết mình đã có quyền truy cập khi kết quả xuất hiện.
Bạn nên "nhắc nhở" người dùng thực hiện hành động nếu cần họ hoàn thành hành động đó.
Đề xuất:
- Thiết lập bộ tính giờ kích hoạt sau một khoảng thời gian ngắn; 5 giây là một giá trị tốt.
- Nếu bạn nhận được thông báo lỗi, hãy hiển thị thông báo cho người dùng.
- Nếu bạn nhận được phản hồi tích cực, hãy tắt đồng hồ hẹn giờ và xử lý kết quả.
- Nếu sau khi hết thời gian chờ mà bạn không nhận được phản hồi tích cực, hãy hiển thị thông báo cho người dùng.
- Nếu phản hồi xuất hiện sau đó và thông báo vẫn xuất hiện, hãy xoá thông báo đó khỏi màn hình.
button.onclick = function () {
var startPos;
var nudge = document.getElementById('nudge');
var showNudgeBanner = function () {
nudge.style.display = 'block';
};
var hideNudgeBanner = function () {
nudge.style.display = 'none';
};
var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);
var geoSuccess = function (position) {
hideNudgeBanner();
// We have the location, don't display banner
clearTimeout(nudgeTimeoutId);
// Do magic with location
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
switch (error.code) {
case error.TIMEOUT:
// The user didn't accept the callout
showNudgeBanner();
break;
}
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Hỗ trợ trình duyệt
Phần lớn các trình duyệt hiện hỗ trợ API vị trí địa lý, nhưng bạn nên luôn kiểm tra khả năng hỗ trợ trước khi làm bất cứ điều gì.
Bạn có thể dễ dàng kiểm tra khả năng tương thích bằng cách kiểm thử sự hiện diện của đối tượng định vị vị trí:
// check for Geolocation support
if (navigator.geolocation) {
console.log('Geolocation is supported!');
} else {
console.log('Geolocation is not supported for this Browser/OS.');
}
Xác định vị trí hiện tại của người dùng
API vị trí địa lý cung cấp một phương thức "một lần" đơn giản để lấy thông tin vị trí của người dùng: getCurrentPosition(). Lệnh gọi đến phương thức này sẽ báo cáo không đồng bộ về vị trí hiện tại của người dùng.
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
navigator.geolocation.getCurrentPosition(geoSuccess);
};
Nếu đây là lần đầu tiên một ứng dụng trên miền này yêu cầu cấp quyền, thì trình duyệt thường 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.
Tuỳ thuộc vào thiết bị vị trí mà trình duyệt đang sử dụng, đối tượng vị trí thực sự có thể chứa nhiều thông tin hơn là vĩ độ và kinh độ. Ví dụ: đối tượng vị trí có thể bao gồm độ cao hoặc hướng. Bạn không thể biết thông tin bổ sung mà hệ thống vị trí sử dụng cho đến khi hệ thống thực sự trả về dữ liệu.
Xem vị trí của người dùng
API vị trí địa lý cho phép bạn lấy thông tin vị trí của người dùng (với sự đồng ý của người dùng) chỉ bằng một lệnh gọi đến getCurrentPosition().
Nếu bạn muốn liên tục theo dõi vị trí của người dùng, hãy sử dụng phương thức API vị trí địa lý, watchPosition(). Phần mềm này hoạt động theo cách tương tự như getCurrentPosition(), nhưng sẽ kích hoạt nhiều lần dưới dạng phần mềm định vị:
- Có được khoá người dùng chính xác hơn.
- Xác định rằng vị trí của người dùng đang thay đổi.
var watchId = navigator.geolocation.watchPosition(function (position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
Thời điểm sử dụng tính năng định vị vị trí để xem vị trí của người dùng
- Bạn muốn có khoá chính xác hơn đối với vị trí của người dùng.
- Ứng dụng của bạn cần cập nhật giao diện người dùng dựa trên thông tin vị trí mới.
- Ứng dụng của bạn cần cập nhật logic nghiệp vụ khi người dùng đi vào một vùng được xác định nhất định.
Các phương pháp hay nhất khi sử dụng tính năng định vị vị trí
Luôn dọn dẹp và tiết kiệm pin
Xem các thay đổi đối với vị trí địa lý không phải là thao tác miễn phí. Mặc dù hệ điều hành có thể giới thiệu các tính năng nền tảng để cho phép ứng dụng truy cập hệ thống phụ địa lý, nhưng bạn, là nhà phát triển web, không biết thiết bị của người dùng có chức năng gì để theo dõi vị trí của người dùng và trong khi xem một vị trí, bạn đang đưa thiết bị vào nhiều quá trình xử lý bổ sung.
Sau khi bạn không cần theo dõi vị trí của người dùng nữa, hãy gọi clearWatch để tắt hệ thống định vị vị trí.
Xử lý lỗi dễ dàng
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í. Trong trường hợp xảy ra lỗi, một đối số thứ hai (không bắt buộc) cho getCurrentPosition() sẽ được gọ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;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Giảm nhu cầu khởi động phần cứng định vị vị trí
Trong nhiều trường hợp sử dụng, bạn không cần vị trí mới nhất của người dùng mà chỉ cần số liệu ước tính sơ bộ.
Sử dụng thuộc tính không bắt buộc maximumAge để yêu cầu trình duyệt sử dụng kết quả vị trí địa lý thu được gần đây. Điều này không chỉ trả về nhanh hơn nếu người dùng đã yêu cầu dữ liệu trước đó, mà còn ngăn trình duyệt khởi động giao diện phần cứng định vị vị trí, chẳng hạn như tam giác Wifi hoặc GPS.
window.onload = function () {
var startPos;
var geoOptions = {
maximumAge: 5 * 60 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Đừng bắt người dùng phải chờ, hãy đặt thời gian chờ
Trừ khi bạn đặt thời gian chờ, yêu cầu của bạn cho vị trí hiện tại có thể không bao giờ trả về.
window.onload = function () {
var startPos;
var geoOptions = {
timeout: 10 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Ưu tiên vị trí tương đối hơn vị trí chi tiết
Nếu bạn muốn tìm cửa hàng gần người dùng nhất, thì rất ít khả năng bạn cần độ chính xác 1 mét. API này được thiết kế để cung cấp thông tin vị trí thô trả về nhanh nhất có thể.
Nếu cần độ chính xác cao, bạn có thể ghi đè chế độ cài đặt mặc định bằng tuỳ chọn enableHighAccuracy. Hãy sử dụng phương pháp này một cách hạn chế: quá trình phân giải sẽ chậm hơn và tốn nhiều pin hơn.
window.onload = function () {
var startPos;
var geoOptions = {
enableHighAccuracy: true,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Mô phỏng vị trí địa lý bằng Công cụ của Chrome cho nhà phát triển
Sau khi thiết lập vị trí địa lý, bạn cần:
- Kiểm tra cách ứng dụng của bạn hoạt động ở các vị trí địa lý khác nhau.
- Xác minh rằng ứng dụng của bạn sẽ xuống cấp nhẹ khi không có thông tin về vị trí địa lý.
Bạn có thể làm cả hai việc này từ Công cụ của Chrome cho nhà phát triển.
- Mở Công cụ của Chrome cho nhà phát triển.
- Nhấn phím Esc để Mở ngăn Console.
- Mở trình đơn ngăn Console
- Nhấp vào tuỳ chọn Cảm biến để hiển thị thẻ Cảm biến.
Từ đây, bạn có thể ghi đè vị trí thành một thành phố lớn được đặt trước, nhập vị trí tuỳ chỉnh hoặc tắt tính năng định vị vị trí bằng cách đặt chế độ ghi đè thành Vị trí không có sẵn.