Thông tin vị trí của người dùng

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 ý.

Paul Kinlan

API Vị trí địa lý cho phép bạn khám phá vị trí của người dùng (khi người dùng đồ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 đến đích 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ư tích hợp với các hệ thống phụ trợ để chuẩn bị đơn đặt hàng cho việc lấy hàng nếu người dùng ở gần.

Bạn cần phải biết nhiều điều khi sử dụng API vị trí địa lý. Hướng dẫn này sẽ hướng dẫn bạn các trường hợp sử dụng và giải pháp phổ biến.

Tóm tắt

  • Sử dụng vị trí địa lý khi tính năng này 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 đối với một cử chỉ của người dùng.
  • Sử dụng tính nă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ợ vị trí địa lý.
  • Đừng chỉ tìm hiểu cách triển khai tính năng định vị vị trí; 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 thử tính năng vị trí địa lý trên trang web của bạn.

Trường hợp sử dụng thông tin vị trí địa lý

  • 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 của bạn bằng thông tin vị trí của người dùng (tức là gắn thẻ địa lý cho ảnh).

Yêu cầu cấp quyền 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 tiết lộ vị trí của họ khi tải trang. Vậy đâu là các phương pháp hay nhất?

Giả sử 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 thông tin vị trí của họ cho bạn, vì vậy, bạn cần áp dụng một phong cách phát triển phòng thủ.

  1. Xử lý tất cả lỗi trong API vị trí địa lý để bạn có thể điều chỉnh trang web cho phù hợp với điều kiện này.
  2. Hãy rõ ràng và rõ ràng về nhu cầu của bạn đối với vị trí.
  3. Sử dụng giải pháp dự phòng nếu cần.

Sử dụng tính năng dự phòng nếu cần có vị trí địa lý

Bạn không nên yêu cầu trang web hoặc ứng dụng của mình 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 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 dự đoán chính xác nhất 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ạ địa chỉ đó với các địa chỉ thực tế đã đăng ký với cơ sở dữ liệu RIPE. Các 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 phát sóng di động gần người dùng nhất. Trong nhiều trường hợp, các giá trị này thậm chí có thể không chính xác, đặc biệt là khi người dùng đang 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 thông tin vị trí khi người dùng thực hiện một cử chỉ

Hãy đảm bảo người dùng hiểu lý do bạn yêu cầu thông tin vị trí của họ và họ sẽ nhận được lợi ích gì. Yêu cầu cấp quyền truy cập ngay lập tức trên trang chủ khi trang web tải dẫn đến trải nghiệm người dùng kém.

Trang web yêu cầu quyền trên trang trình tìm cửa hàng.
NÊN LÀM: Luôn yêu cầu quyền truy cập thông tin vị trí khi người dùng thực hiện một cử chỉ.
Một trang web yêu cầu quyền trên trang chủ.
ĐỪNG: Yêu cầu người dùng cung cấp thông tin này trên trang chủ khi trang web đang tải; việc này sẽ khiến trải nghiệm người dùng kém.

Thay vào đó, hãy đưa ra cho người dùng một lời kêu gọi hành động rõ ràng hoặc cho biết 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 truy cập của hệ thống với hành động vừa được bắt đầu.

Cho biết rõ một hành động sẽ yêu cầu thông tin vị trí của họ

Trong một nghiên cứu của nhóm Google Ads, khi một người dùng đượ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 khách sạn cụ thể, họ được nhắc chia sẻ thông tin vị trí GPS 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 cảm thấy khó chịu vì không hiểu tại sao họ lại thấy các khách sạn ở San Francisco khi muốn đặt phòng ở Boston.

Để có trải nghiệm tốt hơn, hãy đảm bảo người dùng hiểu lý do tại sao bạn yêu cầu họ cung cấp thông tin vị trí. Thêm một chỉ báo phổ biến trên các thiết bị, chẳng hạn như máy đo khoảng cách hoặc lời kêu gọi hành động rõ ràng như "Tìm ở gần tôi".

Một công cụ tìm khoảng không quảng cáo.
Sử dụng máy đo khoảng cách
Một biểu mẫu có nút tìm ở gần tôi.
Lời kêu gọi hành động cụ thể để tìm địa điểm gần tôi

Nhắc nhẹ người dùng cấp quyền truy cập thông tin vị trí

Bạn không có quyền truy cập vào bất kỳ tác vụ nào mà người dùng đang thực hiện. Bạn biết chính xác thời điểm người dùng không cho phép truy cập vào thông tin vị trí của họ, nhưng không biết thời điểm họ cấp quyền truy cập; 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 "động viên" người dùng hành động nếu cần họ hoàn tất hành động.

Đề xuất:

  1. 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ị phù hợp.
  2. Nếu bạn nhận được thông báo lỗi, hãy cho người dùng thấy thông báo đó.
  3. 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ả.
  4. Nếu sau khi hết thời gian chờ mà bạn chưa nhận được phản hồi tích cực, hãy hiện thông báo cho người dùng.
  5. Nếu phản hồi đế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

Hiện nay, phần lớn trình duyệt đều hỗ trợ API vị trí địa lý, nhưng bạn nên luôn kiểm tra xem bạn có hỗ trợ API vị trí địa lý hay không 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 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.');
}

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 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 này, 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 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 độ; ví dụ: đối tượng này có thể bao gồm độ cao hoặc hướng. Bạn không thể biết hệ thống vị trí đó sử dụng thông tin bổ sung nào cho đến khi hệ thống thực sự trả về dữ liệu.

Theo dõi 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 (khi người dùng đồng ý) chỉ bằng một lệnh gọi đến getCurrentPosition().

Nếu bạn muốn liên tục giám sát vị trí của người dùng, hãy sử dụng phương thức API vị trí địa lý, watchPosition(). Phương thức này hoạt động 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ị:

  1. Nhận khoá chính xác hơn cho người dùng.
  2. 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;
});

Trường hợp nên sử dụng thông tin vị trí địa lý để theo dõi vị trí của người dùng

  • Bạn muốn có khoá chính xác hơn trên 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 bước 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 vị trí địa lý

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 kết nối với hệ thống con địa lý, nhưng với tư cách là nhà phát triển web, bạn không biết thiết bị của người dùng có hỗ trợ gì để theo dõi vị trí của người dùng. Ngoài ra, khi theo dõi một vị trí, bạn đang khiến thiết bị phải xử lý thêm nhiều thao tác.

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 một cách linh hoạt

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í. Trong trường hợp xảy ra lỗi, một đối số tuỳ chọn thứ hai 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í

Đối với nhiều trường hợp sử dụng, bạn không cần thông tin vị trí mới nhất của người dùng; mà chỉ cần ướ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ả định vị vị trí đã nhận đượ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 các giao diện phần cứng vị trí địa lý như tam giác Wi-Fi 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);
};

Không bắt người dùng phải chờ, hãy đặt thời gian chờ

Trừ phi bạn đặt thời gian chờ, yêu cầu của bạn về 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 muốn tìm cửa hàng gần người dùng nhất, bạn khó có thể 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ô và trả về nhanh nhất có thể.

Nếu thực sự 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 dùng cách này một cách thận trọng: 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 thông tin vị trí địa lý bằng Công cụ của Chrome cho nhà phát triển

Thẻ cảm biến trong Công cụ cho nhà phát triển.

Khi bạn đã thiết lập vị trí địa lý, bạn sẽ muốn:

  • Kiểm thử cách ứng dụng hoạt động ở nhiều vị trí địa lý.
  • Xác minh rằng ứng dụng của bạn sẽ xuống cấp nhẹ khi không có tuỳ chọn định vị vị trí.

Bạn có thể làm cả hai việc này trong Công cụ của Chrome cho nhà phát triển.

  1. Mở Công cụ dành cho nhà phát triển của Chrome.
  2. Nhấn Esc để Mở ngăn Console.
  3. Mở trình đơn ngăn của Bảng điều khiển
  4. Nhấp vào tuỳ chọn Cảm biến để hiển thị thẻ Cảm biến.

Tại đây, bạn có thể ghi đè vị trí thành một thành phố lớn được đặt trước, nhập một vị trí tuỳ chỉnh hoặc tắt tính năng xác định vị trí địa lý bằng cách đặt chế độ ghi đè thành Không có vị trí.

Phản hồi