Tự động hoàn thành địa điểm

Chọn nền tảng: Android iOS JavaScript Dịch vụ web

Giới thiệu

Tự động hoàn thành là một tính năng của thư viện Địa điểm trong API JavaScript của Maps. Bạn có thể sử dụng tính năng tự động hoàn thành để cung cấp cho ứng dụng hành vi tìm kiếm trước khi nhập của trường tìm kiếm Google Maps. Dịch vụ tự động hoàn thành có thể so khớp với toàn bộ từ và chuỗi con, phân giải tên địa chỉ, địa chỉ và mã cộng. Do đó, các ứng dụng có thể gửi cụm từ tìm kiếm dưới dạng loại người dùng để cung cấp thông tin dự đoán nhanh về địa điểm.

Bắt đầu

Trước khi sử dụng thư viện Địa điểm trong API JavaScript của Maps, trước tiên hãy đảm bảo rằng API địa điểm đã được bật trong Google Cloud Console, trong cùng một dự án mà bạn đã thiết lập cho API JavaScript của Maps.

Cách xem danh sách API đã bật:

  1. Truy cập vào Google Cloud Console.
  2. Nhấp vào nút Select a project (Chọn dự án), sau đó chọn dự án mà bạn đã thiết lập cho API JavaScript cho Maps và nhấp vào Mở.
  3. Từ danh sách API trên Trang tổng quan, hãy tìm API Địa điểm.
  4. Nếu thấy API trong danh sách thì bạn đã hoàn tất. Nếu API không có trong danh sách, hãy bật API:
    1. Ở đầu trang, hãy chọn ENABLE API (BẬT API) để hiện thẻ Library (Thư viện). Ngoài ra, trên trình đơn bên trái, hãy chọn Thư viện.
    2. Tìm API Địa điểm, sau đó chọn API này trong danh sách kết quả.
    3. Chọn BẬT. Khi quá trình này kết thúc, API Địa điểm sẽ xuất hiện trong danh sách API trên Trang tổng quan.

Đang tải thư viện

Dịch vụ Địa điểm là một thư viện độc lập, tách biệt với mã API JavaScript chính của Maps. Để sử dụng chức năng có trong thư viện này, trước tiên bạn phải tải chức năng này bằng cách sử dụng thông số libraries trong URL khởi động API của Maps:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">
</script>

Hãy xem phần Tổng quan về thư viện để biết thêm thông tin.

Tóm tắt các lớp

API này cung cấp 2 loại tiện ích tự động hoàn thành mà bạn có thể thêm thông qua các lớp AutocompleteSearchBox tương ứng. Ngoài ra, bạn có thể sử dụng lớp AutocompleteService để truy xuất kết quả tự động hoàn thành theo cách lập trình (xem Tài liệu tham khảo API JavaScript của Maps: Lớp dịch vụ tự động hoàn thành).

Dưới đây là bản tóm tắt các lớp có sẵn:

  • Autocomplete thêm một trường nhập văn bản vào trang web của bạn và theo dõi trường đó để nhập các ký tự. Khi người dùng nhập văn bản, tính năng tự động hoàn thành sẽ trả về cụm từ gợi ý địa điểm dưới dạng danh sách chọn thả xuống. Khi người dùng chọn một địa điểm trong danh sách, thông tin về địa điểm sẽ được trả về đối tượng tự động hoàn thành và ứng dụng của bạn có thể truy xuất thông tin đó. Vui lòng xem thông tin chi tiết bên dưới.
    Một trường văn bản tự động hoàn thành và một danh sách đề xuất lựa chọn được cung cấp khi người dùng nhập cụm từ tìm kiếm.
    Hình 1: Trường văn bản tự động hoàn thành và danh sách chọn
    Đã điền xong biểu mẫu địa chỉ.
    Hình 2: Biểu mẫu địa chỉ đã hoàn tất
  • SearchBox thêm trường nhập văn bản vào trang web của bạn theo cách tương tự như Autocomplete. Những điểm khác biệt như sau:
    • Điểm khác biệt chính nằm ở kết quả xuất hiện trong danh sách chọn. SearchBox cung cấp một danh sách mở rộng các cụm từ gợi ý, có thể bao gồm các địa điểm (do API Địa điểm xác định) cùng với các cụm từ tìm kiếm đề xuất. Ví dụ: nếu người dùng nhập ' pizza ở New&#39 ;, danh sách chọn lọc có thể bao gồm cụm từ ' Pizza ở New York, NY' cũng như tên của nhiều cửa hàng pizza.
    • SearchBox cung cấp ít tuỳ chọn hơn Autocomplete để hạn chế tìm kiếm. Trước đây, bạn có thể xu hướng tìm kiếm về một LatLngBounds nhất định. Sau đó, bạn có thể hạn chế nội dung tìm kiếm ở một quốc gia cụ thể và một số loại địa điểm cụ thể, cũng như đặt giới hạn. Để biết thêm thông tin, hãy xem dưới đây.
    Đã điền xong biểu mẫu địa chỉ.
    Hình 3: SearchBox hiển thị các cụm từ tìm kiếm và cụm từ gợi ý địa điểm.
    Xem thông tin chi tiết bên dưới.
  • Bạn có thể tạo một đối tượng AutocompleteService để truy xuất thông tin dự đoán theo phương thức lập trình. Gọi getPlacePredictions() để truy xuất các địa điểm phù hợp hoặc gọi getQueryPredictions() để truy xuất các địa điểm phù hợp cùng với các cụm từ tìm kiếm được đề xuất. Lưu ý: AutocompleteService không thêm tuỳ chọn điều khiển nào trên giao diện người dùng. Thay vào đó, các phương thức trên trả về một loạt các đối tượng dự đoán. Mỗi đối tượng gợi ý chứa văn bản của cụm từ gợi ý, cũng như thông tin tham khảo và thông tin chi tiết về cách kết quả khớp với thông tin do người dùng nhập. Xem thông tin chi tiết bên dưới.

Thêm tiện ích Tự động hoàn thành

Tiện ích Autocomplete tạo trường nhập văn bản trên trang web của bạn, cung cấp thông tin dự đoán về các địa điểm trong danh sách chọn giao diện người dùng và trả về thông tin chi tiết về địa điểm theo yêu cầu getPlace(). Mỗi mục trong danh sách lựa chọn tương ứng với một địa điểm (do API Địa điểm xác định).

Hàm khởi tạo Autocomplete nhận hai đối số:

  • Phần tử HTML input thuộc loại text. Đây là trường nhập mà dịch vụ tự động hoàn thành sẽ theo dõi và đính kèm kết quả.
  • Đối số AutocompleteOptions không bắt buộc có thể chứa các thuộc tính sau:
    • Một mảng dữ liệu fields cần đưa vào phản hồi Place Details cho PlaceResult đã chọn của người dùng. Nếu bạn không đặt thuộc tính hoặc nếu ['ALL'] được chuyển vào, thì tất cả các trường có sẵn sẽ được trả về và lập hóa đơn (bạn không nên sử dụng cách này để triển khai phiên bản chính thức). Để biết danh sách các trường, hãy xem PlaceResult.
    • Một mảng types xác định một kiểu thu thập dữ liệu hoặc một kiểu rõ ràng, như liệt kê trong các loại được hỗ trợ. Nếu không chỉ định loại, thì mọi loại đều được trả về.
    • bounds là một đối tượng google.maps.LatLngBounds xác định khu vực cần tìm kiếm địa điểm. Kết quả này thiên về nhưng không giới hạn ở những địa điểm có trong các giới hạn này.
    • strictBounds là một boolean chỉ định liệu API có phải chỉ trả về những vị trí nằm trong khu vực được xác định bởi bounds nhất định hay không. API không trả về kết quả bên ngoài khu vực này ngay cả khi kết quả khớp với thông tin người dùng nhập vào.
    • Bạn có thể sử dụng componentRestrictions để hạn chế kết quả trong các nhóm cụ thể. Hiện tại, bạn có thể sử dụng componentRestrictions để lọc theo tối đa 5 quốc gia. Bạn phải chuyển các quốc gia dưới dạng mã quốc gia tương thích với ISO 3166-1 Alpha-2 gồm hai ký tự. Bạn phải chuyển nhiều quốc gia dưới dạng danh sách mã quốc gia.

      Lưu ý: Nếu bạn nhận được kết quả không mong muốn kèm theo mã quốc gia, hãy xác minh rằng bạn đang sử dụng mã có chứa quốc gia, lãnh thổ phụ thuộc và các khu vực địa lý đặc biệt mà bạn quan tâm. Bạn có thể tìm thông tin về mã tại Wikipedia: Danh sách mã quốc gia theo tiêu chuẩn ISO 3166 hoặc Nền tảng duyệt web trực tuyến ISO.

    • Bạn có thể sử dụng placeIdOnly để hướng dẫn tiện ích Autocomplete chỉ truy xuất mã địa điểm. Khi gọi getPlace() trên đối tượng Autocomplete, PlaceResult được cung cấp sẽ chỉ đặt các thuộc tính place id, typesname. Bạn có thể sử dụng mã địa điểm được trả về bằng lệnh gọi đến các dịch vụ Địa điểm, Mã hoá địa lý, Đường đi hoặc Ma trận khoảng cách.

Ràng buộc các dự đoán của tính năng Tự động hoàn thành

Theo mặc định, tính năng Tự động hoàn thành địa điểm trình bày tất cả các loại địa điểm. Thông tin này không khớp với các thông tin dự đoán gần vị trí của người dùng và tìm nạp tất cả trường dữ liệu hiện có cho địa điểm mà người dùng đã chọn. Đặt các tuỳ chọn Tự động hoàn thành địa điểm để trình bày các cụm từ gợi ý phù hợp hơn dựa trên trường hợp sử dụng của bạn.

Đặt các tùy chọn khi xây dựng

Hàm khởi tạo Autocomplete chấp nhận một tham số AutocompleteOptions để đặt các quy tắc ràng buộc khi tạo tiện ích. Ví dụ sau đây đặt các tùy chọn bounds, componentRestrictionstypes để yêu cầu địa điểm loại establishment, ưu tiên các địa điểm đó trong khu vực địa lý được chỉ định và hạn chế dự đoán chỉ với những địa điểm trong Hoa Kỳ. Việc đặt tùy chọn fields chỉ định thông tin nào cần trả về về địa điểm đã chọn của người dùng.

Gọi setOptions() để thay đổi giá trị của một tiện ích hiện có.

TypeScript

const center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
  north: center.lat + 0.1,
  south: center.lat - 0.1,
  east: center.lng + 0.1,
  west: center.lng - 0.1,
};
const input = document.getElementById("pac-input") as HTMLInputElement;
const options = {
  bounds: defaultBounds,
  componentRestrictions: { country: "us" },
  fields: ["address_components", "geometry", "icon", "name"],
  strictBounds: false,
  types: ["establishment"],
};

const autocomplete = new google.maps.places.Autocomplete(input, options);

JavaScript

const center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
  north: center.lat + 0.1,
  south: center.lat - 0.1,
  east: center.lng + 0.1,
  west: center.lng - 0.1,
};
const input = document.getElementById("pac-input");
const options = {
  bounds: defaultBounds,
  componentRestrictions: { country: "us" },
  fields: ["address_components", "geometry", "icon", "name"],
  strictBounds: false,
  types: ["establishment"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

Chỉ định các trường dữ liệu

Chỉ định các trường dữ liệu để tránh bị tính phí cho SKU dữ liệu địa điểm mà bạn không cần. Đưa thuộc tính fields vào AutocompleteOptions được truyền đến hàm khởi tạo tiện ích, như minh hoạ trong ví dụ trước đó hoặc gọi setFields() trên đối tượng Autocomplete hiện có.

autocomplete.setFields(["place_id", "geometry", "name"]);

Xác định độ chệch và ranh giới vùng tìm kiếm cho tính năng Tự động hoàn thành

Bạn có thể thiên vị các kết quả tự động hoàn thành để ưu tiên một vị trí hoặc một khu vực gần đúng, theo các cách sau:

  • Đặt ranh giới khi tạo đối tượng Autocomplete.
  • Thay đổi giới hạn trên Autocomplete hiện có.
  • Đặt ranh giới cho khung nhìn của bản đồ.
  • Giới hạn phạm vi tìm kiếm ở các giới hạn.
  • Giới hạn phạm vi tìm kiếm ở một quốc gia cụ thể.

Ví dụ trước minh hoạ việc đặt giới hạn khi tạo. Những ví dụ sau đây minh họa các kỹ thuật xu hướng khác.

Thay đổi giới hạn của một nội dung tự động hoàn thành hiện có

Gọi setBounds() để thay đổi khu vực tìm kiếm trên một Autocomplete hiện có thành các ranh giới hình chữ nhật.

TypeScript

const southwest = { lat: 5.6108, lng: 136.589326 };
const northeast = { lat: 61.179287, lng: 2.64325 };
const newBounds = new google.maps.LatLngBounds(southwest, northeast);

autocomplete.setBounds(newBounds);

JavaScript

const southwest = { lat: 5.6108, lng: 136.589326 };
const northeast = { lat: 61.179287, lng: 2.64325 };
const newBounds = new google.maps.LatLngBounds(southwest, northeast);

autocomplete.setBounds(newBounds);
Đặt ranh giới cho khung nhìn của bản đồ

Dùng bindTo() để xu hướng kết quả cho khung nhìn của bản đồ, ngay cả khi khung nhìn đó thay đổi.

TypeScript

autocomplete.bindTo("bounds", map);

JavaScript

autocomplete.bindTo("bounds", map);

Sử dụng unbind() để huỷ liên kết cụm từ gợi ý của tính năng Tự động hoàn thành khỏi khung nhìn của bản đồ.

TypeScript

autocomplete.unbind("bounds");
autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

JavaScript

autocomplete.unbind("bounds");
autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

Xem ví dụ

Giới hạn phạm vi tìm kiếm ở các giới hạn hiện tại

Đặt tùy chọn strictBounds để giới hạn kết quả trong ranh giới hiện tại, cho dù dựa trên khung nhìn bản đồ hay ranh giới hình chữ nhật.

autocomplete.setOptions({ strictBounds: true });
Hạn chế dự đoán ở một quốc gia cụ thể

Sử dụng tuỳ chọn componentRestrictions hoặc gọi setComponentRestrictions() để hạn chế nội dung tìm kiếm tự động hoàn thành trong một nhóm tối đa 5 quốc gia cụ thể.

TypeScript

autocomplete.setComponentRestrictions({
  country: ["us", "pr", "vi", "gu", "mp"],
});

JavaScript

autocomplete.setComponentRestrictions({
  country: ["us", "pr", "vi", "gu", "mp"],
});

Xem ví dụ

Các loại địa điểm ràng buộc

Sử dụng tuỳ chọn types hoặc gọi setTypes() để ràng buộc các dự đoán đối với một số loại địa điểm nhất định. Hạn chế này chỉ định một loại hoặc một tập hợp loại, như được liệt kê trong phần Loại địa điểm. Nếu không có điều kiện ràng buộc nào được chỉ định, tất cả các loại sẽ được trả về.

Đối với giá trị của tuỳ chọn types hoặc giá trị được chuyển đến setTypes(), bạn có thể chỉ định:

  • Một mảng chứa tối đa 5 giá trị trong Bảng 1 hoặc Bảng 2 từ Loại địa điểm. Ví dụ:

    types: ['hospital', 'pharmacy', 'bakery', 'country']

    hoặc:

    autocomplete.setTypes(['hospital', 'pharmacy', 'bakery', 'country']);
  • Bất kỳ bộ lọc nào trong Bảng 3 từ Loại địa điểm. Bạn chỉ có thể chỉ định một giá trị duy nhất từ Bảng 3.

Yêu cầu sẽ bị từ chối nếu:

  • Bạn chỉ định nhiều hơn năm loại.
  • Bạn chỉ định bất kỳ loại nào không nhận dạng được.
  • Bạn kết hợp mọi loại từ Bảng 1 hoặc Bảng 2 với bất kỳ bộ lọc nào trong Bảng 3.

Bản minh hoạ tính năng Tự động hoàn thành của địa điểm thể hiện sự khác biệt giữa các thông tin dự đoán giữa các loại địa điểm.

Truy cập vào bản minh họa

Đang tải thông tin địa điểm

Khi người dùng chọn một địa điểm trong số các cụm từ gợi ý đính kèm vào trường văn bản tự động hoàn thành, dịch vụ này sẽ kích hoạt một sự kiện place_changed. Cách xem thông tin chi tiết về địa điểm:

  1. Tạo trình xử lý sự kiện cho sự kiện place_changed và gọi addListener() trên đối tượng Autocomplete để thêm trình xử lý.
  2. Gọi Autocomplete.getPlace() trên đối tượng Autocomplete để truy xuất đối tượng PlaceResult. Sau đó, bạn có thể sử dụng đối tượng này để nhận thêm thông tin về địa điểm đã chọn.

Theo mặc định, khi người dùng chọn một địa điểm, tính năng tự động hoàn thành sẽ trả về tất cả trường dữ liệu có sẵn cho địa điểm đã chọn và bạn sẽ được lập hóa đơn tương ứng. Sử dụng Autocomplete.setFields() để chỉ định trường dữ liệu địa điểm cần trả về. Đọc thêm về đối tượng PlaceResult, bao gồm cả danh sách các trường dữ liệu địa điểm mà bạn có thể yêu cầu. Để tránh phải trả phí cho dữ liệu mà mình không cần, hãy nhớ sử dụng Autocomplete.setFields() để chỉ xác định dữ liệu địa điểm mà bạn sẽ sử dụng.

Thuộc tính name chứa description từ thông tin dự đoán của tính năng Tự động hoàn thành địa điểm. Bạn có thể đọc thêm về description trong tài liệu về tính năng Tự động hoàn thành địa điểm.

Đối với biểu mẫu địa chỉ, bạn nên lấy địa chỉ ở định dạng có cấu trúc. Để trả về địa chỉ có cấu trúc cho địa điểm đã chọn, hãy gọi Autocomplete.setFields() và chỉ định trường address_components.

Ví dụ sau đây sử dụng tính năng tự động hoàn thành để điền vào các trường trong biểu mẫu địa chỉ.

TypeScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }

      case "locality":
        (document.querySelector("#locality") as HTMLInputElement).value =
          component.long_name;
        break;

      case "administrative_area_level_1": {
        (document.querySelector("#state") as HTMLInputElement).value =
          component.short_name;
        break;
      }

      case "country":
        (document.querySelector("#country") as HTMLInputElement).value =
          component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;

  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

JavaScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        document.querySelector("#locality").value = component.long_name;
        break;
      case "administrative_area_level_1": {
        document.querySelector("#state").value = component.short_name;
        break;
      }
      case "country":
        document.querySelector("#country").value = component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;
  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

window.initAutocomplete = initAutocomplete;

Xem ví dụ

Tùy chỉnh văn bản phần giữ chỗ

Theo mặc định, trường văn bản do dịch vụ tự động hoàn thành tạo sẽ chứa văn bản phần giữ chỗ tiêu chuẩn. Để sửa đổi văn bản, hãy đặt thuộc tính placeholder trên phần tử input:

<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">

Lưu ý: Văn bản phần giữ chỗ mặc định được bản địa hóa tự động. Nếu chỉ định giá trị phần giữ chỗ của riêng mình, bạn phải xử lý việc bản địa hoá giá trị đó trong ứng dụng. Để biết thông tin về cách API JavaScript của Google Maps chọn ngôn ngữ bạn muốn sử dụng, vui lòng đọc tài liệu về cách bản địa hóa.

Xem phần Tạo tiện ích tự động hoàn thành và hộp tìm kiếm để tùy chỉnh giao diện tiện ích.

SearchBox cho phép người dùng thực hiện việc tìm kiếm địa lý bằng văn bản, chẳng hạn như 'pizza ở New York' hoặc &#39 ; cửa hàng giày gần đường robson&#39 ;. Bạn có thể đính kèm SearchBox vào một trường văn bản. Khi văn bản được nhập, dịch vụ sẽ trả về cụm từ gợi ý dưới dạng một danh sách thả xuống.

SearchBox cung cấp một danh sách mở rộng các cụm từ gợi ý, có thể bao gồm các địa điểm (do API Địa điểm xác định) cùng với các cụm từ tìm kiếm đề xuất. Ví dụ: nếu người dùng nhập ' pizza ở mới&#39 ;, danh sách chọn lọc có thể bao gồm cụm từ ' pizza ở New York, NY' cũng như tên của nhiều cửa hàng pizza. Khi người dùng chọn một địa điểm trong danh sách, thông tin về địa điểm đó sẽ được trả về đối tượng SearchBox và ứng dụng của bạn có thể truy xuất thông tin đó.

Hàm khởi tạo SearchBox nhận hai đối số:

  • Phần tử HTML input thuộc loại text. Đây là trường nhập dữ liệu mà dịch vụ SearchBox sẽ theo dõi và đính kèm kết quả.
  • Đối số options, có thể chứa thuộc tính bounds: bounds là một đối tượng google.maps.LatLngBounds xác định khu vực cần tìm kiếm địa điểm. Kết quả này chỉ áp dụng cho những địa điểm có trong các giới hạn này.

Mã sau đây sử dụng tham số ranh giới để phân phối kết quả về các địa điểm trong một khu vực địa lý cụ thể, được chỉ định thông qua các tọa độ kinh độ/kinh độ.

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');

var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds
});

Thay đổi khu vực tìm kiếm cho SearchBox

Để thay đổi khu vực tìm kiếm cho một SearchBox hiện có, hãy gọi setBounds() trên đối tượng SearchBox và chuyển đối tượng LatLngBounds liên quan.

Xem ví dụ

Đang tải thông tin địa điểm

Khi người dùng chọn một mục trong các cụm từ gợi ý đính kèm vào hộp tìm kiếm, dịch vụ này sẽ kích hoạt một sự kiện places_changed. Bạn có thể gọi getPlaces() trên đối tượng SearchBox để truy xuất một mảng chứa nhiều cụm từ gợi ý, mỗi gợi ý là một đối tượng PlaceResult.

Để biết thêm thông tin về đối tượng PlaceResult, hãy tham khảo tài liệu về kết quả chi tiết về địa điểm.

TypeScript

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
  const places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach((marker) => {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  const bounds = new google.maps.LatLngBounds();

  places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
      console.log("Returned place contains no geometry");
      return;
    }

    const icon = {
      url: place.icon as string,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25),
    };

    // Create a marker for each place.
    markers.push(
      new google.maps.Marker({
        map,
        icon,
        title: place.name,
        position: place.geometry.location,
      })
    );

    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

JavaScript

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
  const places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach((marker) => {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  const bounds = new google.maps.LatLngBounds();

  places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
      console.log("Returned place contains no geometry");
      return;
    }

    const icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25),
    };

    // Create a marker for each place.
    markers.push(
      new google.maps.Marker({
        map,
        icon,
        title: place.name,
        position: place.geometry.location,
      })
    );
    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

Xem ví dụ

Xem phần Tạo tiện ích tự động hoàn thành và hộp tìm kiếm để tùy chỉnh giao diện tiện ích.

Truy xuất dữ liệu dự đoán Dịch vụ tự động hoàn thành địa điểm theo phương thức lập trình

Để truy xuất gợi ý theo phương thức lập trình, hãy sử dụng lớp AutocompleteService. AutocompleteService không thêm chế độ điều khiển trên giao diện người dùng. Thay vào đó, công cụ này trả về một loạt các đối tượng dự đoán, mỗi đối tượng chứa văn bản của thông tin dự đoán, thông tin tham chiếu và thông tin chi tiết về cách kết quả khớp với thông tin do người dùng nhập. Việc này hữu ích nếu bạn muốn có nhiều quyền kiểm soát hơn đối với giao diện người dùng so với tính năng do AutocompleteSearchBox mô tả ở trên.

AutocompleteService cho thấy các phương thức sau:

  • getPlacePredictions() trả về các cụm từ gợi ý về địa điểm. Lưu ý: Địa điểm ' có thể là một cơ sở, vị trí địa lý hoặc địa điểm yêu thích nổi bật, như được xác định bởi API Địa điểm.
  • getQueryPredictions() trả về danh sách mở rộng các cụm từ gợi ý, có thể bao gồm các địa điểm (do API Địa điểm xác định) cùng với các cụm từ tìm kiếm đề xuất. Ví dụ: nếu người dùng nhập &;

Cả hai phương thức trên đều trả về một loạt các đối tượng dự đoán thuộc dạng sau:

  • description là dự đoán phù hợp.
  • distance_meters là khoảng cách tính bằng mét tính từ AutocompletionRequest.origin.
  • matched_substrings chứa một tập hợp chuỗi con trong phần mô tả khớp với các phần tử trong dữ liệu đầu vào của người dùng. Điều này rất hữu ích khi làm nổi bật các chuỗi con đó trong ứng dụng của bạn. Trong nhiều trường hợp, cụm từ tìm kiếm sẽ xuất hiện dưới dạng một chuỗi con của trường mô tả.
    • length là độ dài của chuỗi con.
    • offset là độ chênh lệch ký tự, được đo từ đầu chuỗi mô tả, khi xuất hiện chuỗi con trùng khớp.
  • place_id là giá trị nhận dạng dạng văn bản giúp xác định duy nhất một địa điểm. Để truy xuất thông tin về địa điểm, hãy chuyển giá trị nhận dạng này vào trường placeId của yêu cầu Thông tin chi tiết về địa điểm. Tìm hiểu thêm về cách tham chiếu một địa điểm bằng mã địa điểm.
  • terms là một mảng chứa các phần tử của truy vấn. Đối với một địa điểm, mỗi phần tử thường tạo nên một phần địa chỉ.
    • offset là độ chênh lệch ký tự, được đo từ đầu chuỗi mô tả, khi xuất hiện chuỗi con trùng khớp.
    • value là cụm từ phù hợp.

Ví dụ bên dưới thực thi một yêu cầu dự đoán cụm từ tìm kiếm cho cụm từ & # 39;pizza, gần & & 39; và hiển thị kết quả trong một danh sách.

TypeScript

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initService(): void {
  const displaySuggestions = function (
    predictions: google.maps.places.QueryAutocompletePrediction[] | null,
    status: google.maps.places.PlacesServiceStatus
  ) {
    if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
      alert(status);
      return;
    }

    predictions.forEach((prediction) => {
      const li = document.createElement("li");

      li.appendChild(document.createTextNode(prediction.description));
      (document.getElementById("results") as HTMLUListElement).appendChild(li);
    });
  };

  const service = new google.maps.places.AutocompleteService();

  service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions);
}

declare global {
  interface Window {
    initService: () => void;
  }
}
window.initService = initService;

JavaScript

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initService() {
  const displaySuggestions = function (predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
      alert(status);
      return;
    }

    predictions.forEach((prediction) => {
      const li = document.createElement("li");

      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById("results").appendChild(li);
    });
  };

  const service = new google.maps.places.AutocompleteService();

  service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions);
}

window.initService = initService;

CSS

HTML

<html>
  <head>
    <title>Retrieving Autocomplete Predictions</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <p>Query suggestions for 'pizza near Syd':</p>
    <ul id="results"></ul>
    <!-- Replace Powered By Google image src with self hosted image. https://developers.google.com/maps/documentation/places/web-service/policies#other_attribution_requirements -->
    <img
      class="powered-by-google"
      src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"
      alt="Powered by Google"
    />

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initService&libraries=places&v=weekly"
      defer
    ></script>
  </body>
</html>

Dùng thử mẫu

Xem ví dụ

Mã thông báo phiên

AutocompleteService.getPlacePredictions() sử dụng mã thông báo phiên để nhóm các yêu cầu tự động hoàn thành cho mục đích thanh toán. Mã thông báo phiên sẽ nhóm các giai đoạn truy vấn và chọn của một lượt tìm kiếm tự động hoàn thành của người dùng thành một phiên riêng biệt cho mục đích thanh toán. Phiên hoạt động sẽ bắt đầu khi người dùng bắt đầu nhập một truy vấn và kết thúc khi họ chọn một địa điểm. Mỗi phiên hoạt động có thể có nhiều cụm từ tìm kiếm, theo sau là một địa điểm được chọn. Sau khi một phiên kết thúc, mã thông báo sẽ không còn hợp lệ. Ứng dụng phải tạo một mã thông báo mới cho mỗi phiên hoạt động. Bạn nên sử dụng mã thông báo phiên cho mọi phiên tự động hoàn thành. Nếu thông số sessionToken bị bỏ qua hoặc nếu bạn sử dụng lại mã thông báo phiên, thì phiên sẽ bị tính phí như thể không có mã thông báo phiên nào được cung cấp (mỗi yêu cầu được lập hóa đơn riêng).

Bạn có thể sử dụng cùng một mã thông báo phiên để tạo một yêu cầu Đặt chi tiết tại địa điểm dẫn đến một lệnh gọi đến AutocompleteService.getPlacePredictions(). Trong trường hợp này, yêu cầu tự động hoàn thành sẽ kết hợp với yêu cầu Thông tin chi tiết về địa điểm và cuộc gọi sẽ được tính phí như một yêu cầu Thông tin chi tiết về địa điểm thông thường. Bạn sẽ không phải trả phí cho yêu cầu tự động hoàn thành.

Hãy nhớ chuyển một mã thông báo phiên duy nhất cho mỗi phiên hoạt động mới. Việc sử dụng cùng một mã thông báo cho nhiều phiên Tự động hoàn thành sẽ vô hiệu hoá các phiên Tự động hoàn thành đó và tất cả yêu cầu Tự động hoàn thành trong các phiên không hợp lệ sẽ bị tính phí riêng lẻ bằng cách sử dụng SKU cho mỗi yêu cầu tự động hoàn thành. Đọc thêm về mã thông báo của phiên hoạt động.

Ví dụ sau đây cho thấy việc tạo một mã thông báo phiên, sau đó truyền mã này vào AutocompleteService (hàm displaySuggestions() đã bị bỏ qua cho ngắn gọn):

// Create a new session token.
var sessionToken = new google.maps.places.AutocompleteSessionToken();

// Pass the token to the autocomplete service.
var autocompleteService = new google.maps.places.AutocompleteService();
autocompleteService.getPlacePredictions({
  input: 'pizza near Syd',
  sessionToken: sessionToken
},
displaySuggestions);

Hãy nhớ chuyển một mã thông báo phiên duy nhất cho mỗi phiên hoạt động mới. Việc sử dụng cùng một mã thông báo cho nhiều phiên sẽ dẫn đến việc mỗi yêu cầu được tính phí riêng.

Đọc thêm về mã thông báo của phiên hoạt động.

Tạo kiểu cho các tiện ích Tự động hoàn thành và SearchBox

Theo mặc định, các thành phần trên giao diện người dùng do AutocompleteSearchBox cung cấp sẽ được tạo kiểu để đưa vào bản đồ của Google. Bạn có thể điều chỉnh việc tạo kiểu cho phù hợp với trang web của mình. Chúng tôi cung cấp các lớp CSS sau. Tất cả các lớp bên dưới đều áp dụng cho cả tiện ích AutocompleteSearchBox.

Hình minh hoạ đồ họa của các lớp CSS cho các tiện ích Tự động hoàn thành và
      SearchBox
Các lớp CSS cho tiện ích Tự động hoàn thành và SearchBox
Lớp CSS Nội dung mô tả
pac-container Phần tử hình ảnh chứa danh sách cụm từ gợi ý do dịch vụ Tự động hoàn thành địa điểm trả về. Danh sách này xuất hiện dưới dạng một danh sách thả xuống bên dưới tiện ích Autocomplete hoặc SearchBox.
pac-icon Biểu tượng này xuất hiện ở bên trái mỗi mục trong danh sách cụm từ gợi ý.
pac-item Một mục trong danh sách cụm từ gợi ý mà tiện ích Autocomplete hoặc SearchBox cung cấp.
pac-item:hover Mục khi người dùng di chuột qua mục đó.
pac-item-selected Mục khi người dùng chọn mục đó qua bàn phím. Lưu ý: Các mục đã chọn sẽ là thành viên của lớp này và của lớp pac-item.
pac-item-query Span nằm trong pac-item là phần chính của dự đoán. Đối với các vị trí địa lý, URL này chứa tên địa điểm, như ' Sydney&#39 ; hoặc tên đường phố và số, như ' 10 King Street&#39 ;. Đối với các nội dung tìm kiếm dựa trên văn bản như # ' Pizza ở New York, nó chứa văn bản đầy đủ của truy vấn. Theo mặc định, pac-item-query có màu đen. Nếu có thêm văn bản khác trong pac-item, thì văn bản đó nằm ngoài pac-item-query và kế thừa kiểu của pac-item. Bảng này có màu xám theo mặc định. Văn bản bổ sung thường là một địa chỉ.
pac-matched Phần dự đoán được trả về khớp với thông tin đầu vào của người dùng. Theo mặc định, văn bản trùng khớp này được làm nổi bật bằng văn bản in đậm. Xin lưu ý rằng văn bản trùng khớp có thể nằm ở bất kỳ đâu trong pac-item. Biến này không nhất thiết phải là một phần của pac-item-query và có thể nằm một phần trong pac-item-query cũng như một phần của văn bản còn lại trong pac-item.

Tối ưu hoá tính năng Tự động hoàn thành địa điểm

Phần này mô tả các phương pháp hay nhất giúp bạn khai thác tối đa dịch vụ Tự động hoàn thành địa điểm.

Dưới đây là một số nguyên tắc chung:

  • Cách nhanh nhất để phát triển một giao diện người dùng đang hoạt động là sử dụng tiện ích tự động hoàn thành API JavaScript cho Maps, SDK địa điểm dành cho Android tiện ích tự động hoàn thành hoặc SDK địa điểm dành cho quyền kiểm soát giao diện người dùng tự động hoàn thành trên iOS
  • Hiểu rõ về các trường dữ liệu Tự động hoàn thành địa điểm cần thiết ngay từ đầu.
  • Xu hướng vị trí và các trường hạn chế vị trí là không bắt buộc nhưng có thể ảnh hưởng đáng kể đến hiệu suất tự động hoàn thành.
  • Hãy sử dụng cách xử lý lỗi để đảm bảo ứng dụng của bạn xuống cấp nhẹ nếu API trả về một lỗi.
  • Hãy đảm bảo rằng ứng dụng của bạn xử lý khi không có lựa chọn nào và hướng dẫn người dùng cách tiếp tục.

Các phương pháp hay nhất về việc tối ưu hóa chi phí

Tối ưu hóa chi phí cơ bản

Để tối ưu hóa chi phí sử dụng dịch vụ Tự động hoàn thành địa điểm, hãy sử dụng mặt nạ trường trong phần Thông tin chi tiết về địa điểm và tiện ích Tự động hoàn thành địa điểm để chỉ trả về các trường dữ liệu địa điểm bạn cần.

Tối ưu hóa chi phí nâng cao

Cân nhắc việc triển khai tính năng Tự động hoàn thành địa điểm theo phương thức lập trình để truy cập vào Giá theo yêu cầu và yêu cầu kết quả API mã hóa địa lý về địa điểm đã chọn thay vì Thông tin chi tiết về địa điểm. Giá của mỗi Yêu cầu ghép nối với API mã hoá địa lý hiệu quả hơn về chi phí so với giá của mỗi Phiên (dựa trên phiên) nếu đáp ứng cả hai điều kiện sau:

  • Nếu bạn chỉ cần vĩ độ/kinh độ hoặc địa chỉ của địa điểm đã chọn, API mã hóa địa lý sẽ cung cấp thông tin này cho một lệnh gọi Chi tiết địa điểm ít hơn.
  • Nếu người dùng chọn một cụm từ gợi ý của tính năng tự động hoàn thành trong vòng trung bình 4 yêu cầu tự động hoàn thành hoặc ít hơn, thì giá của mỗi Yêu cầu có thể tiết kiệm chi phí hơn giá của mỗi phiên hoạt động.
Để được trợ giúp chọn phương thức triển khai tính năng Tự động hoàn thành địa điểm phù hợp với nhu cầu của bạn, hãy chọn thẻ tương ứng với câu trả lời của bạn cho câu hỏi sau.

Ứng dụng của bạn có yêu cầu thông tin nào khác ngoài địa chỉ và vĩ độ/kinh độ của cụm từ gợi ý bạn đã chọn không?

Có, cần thêm thông tin chi tiết

Sử dụng tính năng Tự động hoàn thành dựa trên phiên hoạt động với thông tin chi tiết về địa điểm.
Vì ứng dụng của bạn yêu cầu thông tin về Địa điểm, chẳng hạn như tên địa điểm, trạng thái doanh nghiệp hoặc giờ mở cửa, nên việc triển khai tính năng Tự động hoàn thành địa điểm phải sử dụng mã thông báo phiên (theo chương trình hoặc tích hợp vào tiện ích JavaScript, Android hoặc iOS) với tổng chi phí $0,017 cho mỗi phiên cộng với SKU dữ liệu địa điểm tùy theo trường bạn yêu cầu

Triển khai tiện ích
Tính năng quản lý phiên được tự động tích hợp vào các tiện ích
JavaScript, Android hoặc iOS. Số liệu này bao gồm cả yêu cầu Tự động hoàn thành địa điểm và yêu cầu Thông tin chi tiết về địa điểm trên thông tin dự đoán đã chọn. Hãy nhớ chỉ định thông số fields để đảm bảo bạn chỉ yêu cầu các trường dữ liệu địa điểm mà bạn cần.

Triển khai có lập trình
Sử dụng mã thông báo phiên với các yêu cầu Tự động hoàn thành địa điểm. Khi yêu cầu Đặt chi tiết về gợi ý đã chọn, hãy thêm các thông số sau:

  1. Mã địa điểm trong phản hồi Tự động hoàn thành địa điểm
  2. Mã thông báo phiên được sử dụng trong yêu cầu Tự động hoàn thành địa điểm
  3. Tham số fields chỉ định các trường dữ liệu địa điểm bạn cần

Không, chỉ cần địa chỉ và vị trí

API mã hóa địa lý có thể là một tùy chọn có hiệu quả về chi phí hơn so với Thông tin chi tiết về địa điểm cho ứng dụng của bạn, tùy thuộc vào hiệu suất của việc sử dụng tính năng Tự động hoàn thành địa điểm. Hiệu quả của tính năng Tự động hoàn thành của mỗi ứng dụng sẽ khác nhau tùy thuộc vào nội dung mà người dùng nhập vào, vị trí sử dụng của ứng dụng và liệu các phương pháp hay nhất để tối ưu hóa hiệu suất có được triển khai hay không.

Để trả lời câu hỏi sau, hãy phân tích số lượng ký tự trung bình mà một người dùng nhập trước khi chọn cụm từ gợi ý của tính năng Tự động hoàn thành địa điểm trong ứng dụng của bạn.

Người dùng của bạn có chọn trung bình 4 hoặc nhiều yêu cầu hơn cho cụm từ gợi ý của tính năng Tự động hoàn thành địa điểm không?

Triển khai tính năng Tự động hoàn thành địa điểm theo phương thức lập trình mà không cần mã thông báo phiên và gọi API mã hoá địa lý trên thông tin dự đoán địa điểm đã chọn.
API mã hóa địa lý cung cấp địa chỉ và tọa độ có vĩ độ/kinh độ $0,005 cho mỗi yêu cầu. Việc tạo 4 yêu cầu Tự động hoàn thành địa điểm – Mỗi yêu cầu có chi phí là 0,01132 đô la. Do đó, tổng chi phí của 4 yêu cầu cộng với một lệnh gọi API mã hóa địa lý về giá thầu dự kiến cho địa điểm đã chọn sẽ là 0,01632 đô la, thấp hơn giá của tính năng Tự động hoàn thành mỗi phiên là 0,017 đô la cho mỗi phiên.1

Hãy xem xét việc áp dụng các phương pháp hay nhất về hiệu suất để giúp người dùng dự đoán được ít ký tự hơn.

Không

Sử dụng tính năng Tự động hoàn thành dựa trên phiên hoạt động với thông tin chi tiết về địa điểm.
Vì số lượng yêu cầu trung bình mà bạn dự kiến thực hiện trước khi người dùng chọn một cụm từ gợi ý của tính năng Tự động hoàn thành địa điểm vượt quá chi phí định giá cho mỗi phiên hoạt động, nên việc triển khai tính năng Tự động hoàn thành địa điểm phải sử dụng mã thông báo phiên cho cả yêu cầu Tự động hoàn thành địa điểm và yêu cầu Thông tin chi tiết về địa điểm có liên quan cho tổng chi phí là 0,017 USD cho mỗi phiên.1

Triển khai tiện ích
Tính năng quản lý phiên được tự động tích hợp vào các tiện ích JavaScript, Android hoặc iOS. Số liệu này bao gồm cả yêu cầu Tự động hoàn thành địa điểm và yêu cầu Thông tin chi tiết về địa điểm trên thông tin dự đoán đã chọn. Hãy nhớ chỉ định thông số fields để đảm bảo bạn chỉ yêu cầu các trường Dữ liệu cơ bản.

Triển khai có lập trình
Sử dụng mã thông báo phiên với các yêu cầu Tự động hoàn thành địa điểm. Khi yêu cầu Đặt chi tiết về gợi ý đã chọn, hãy thêm các thông số sau:

  1. Mã địa điểm trong phản hồi Tự động hoàn thành địa điểm
  2. Mã thông báo phiên được sử dụng trong yêu cầu Tự động hoàn thành địa điểm
  3. Thông số fields chỉ định các trường Dữ liệu cơ bản, chẳng hạn như địa chỉ và hình học

Cân nhắc việc trì hoãn các yêu cầu Tự động hoàn thành địa điểm
Bạn có thể áp dụng các chiến lược như trì hoãn yêu cầu Tự động hoàn thành địa điểm cho đến khi người dùng nhập ba hoặc bốn ký tự đầu tiên để ứng dụng của bạn đưa ra ít yêu cầu hơn. Ví dụ: việc tạo yêu cầu Tự động hoàn thành địa điểm cho từng ký tự sau khi người dùng nhập ký tự thứ ba có nghĩa là nếu người dùng nhập bảy ký tự sau đó chọn một gợi ý mà bạn thực hiện một yêu cầu API mã hóa địa lý, thì tổng chi phí sẽ là $0,01632 (4 * $0,00283 Tự động hoàn thành cho mỗi yêu cầu + $0,005 Mã hóa địa lý).1

Nếu các yêu cầu bị trễ có thể nhận được yêu cầu có lập trình trung bình dưới 4, thì bạn có thể làm theo hướng dẫn để triển khai tính năng Tự động hoàn thành về địa điểm bằng API mã hóa địa lý. Xin lưu ý rằng những yêu cầu có độ trễ có thể được coi là độ trễ khi người dùng có thể muốn xem dự đoán về mọi lần nhấn phím mới.

Hãy xem xét việc áp dụng các phương pháp hay nhất về hiệu suất để giúp người dùng dự đoán được ít ký tự hơn.


  1. Chi phí nêu ở đây được tính theo đô la Mỹ. Vui lòng tham khảo trang Thanh toán của Nền tảng Google Maps để biết thông tin đầy đủ về giá.

Các phương pháp hay nhất về hiệu suất

Các nguyên tắc sau đây mô tả các cách để tối ưu hoá hiệu suất của tính năng Tự động hoàn thành địa điểm:

  • Thêm các quy tắc hạn chế theo quốc gia, xu hướng vị trí và (tùy chọn triển khai theo phương thức lập trình) vào phương thức triển khai tính năng Tự động hoàn thành địa điểm. Tùy chọn ngôn ngữ không cần thiết với các tiện ích vì chúng chọn tùy chọn ngôn ngữ từ trình duyệt hoặc thiết bị di động của người dùng.
  • Nếu tính năng Tự động hoàn thành địa điểm đi kèm với một bản đồ, bạn có thể thiên về vị trí theo khung nhìn bản đồ.
  • Trong trường hợp người dùng không chọn một trong các cụm từ gợi ý của tính năng Tự động hoàn thành, thường thì do không có gợi ý nào trong số đó là địa chỉ kết quả mong muốn, nên bạn có thể sử dụng lại thông tin đầu vào ban đầu của người dùng để cố gắng nhận được kết quả phù hợp hơn:
    • Nếu bạn muốn người dùng chỉ nhập thông tin địa chỉ, hãy sử dụng lại dữ liệu đầu vào của người dùng ban đầu trong lệnh gọi API mã hóa địa lý.
    • Nếu bạn muốn người dùng nhập cụm từ tìm kiếm về một địa điểm cụ thể theo tên hoặc địa chỉ, hãy sử dụng yêu cầu Tìm địa điểm. Nếu kết quả chỉ như mong đợi ở một khu vực cụ thể, hãy sử dụng tính năng xu hướng vị trí.
    Các tình huống khác mà bạn nên quay lại API lập trình địa lý là:
    • Người dùng nhập địa chỉ phụ ở các quốc gia khác ngoài Úc, New Zealand hoặc Canada. Ví dụ: địa chỉ Hoa Kỳ "123 Bowdoin St #456, Boston MA, USA" không được hỗ trợ bằng tính năng Tự động hoàn thành. (Tính năng tự động hoàn thành chỉ hỗ trợ địa chỉ phụ tại Úc, New Zealand và Canada). Các định dạng địa chỉ được hỗ trợ tại 3 quốc gia này là "9/321 Disneyland Street, Sydney, New South Wales, Australia" hoặc "14/19 Langana Avenue, Browns Bay, Auckland, New Zealand" hoặc "145-112 Renfrew Dr, Markham, Ontario, Canada".
    • Người dùng nhập địa chỉ với các tiền tố phân đoạn đường như "23-30 29th St, Queens" ở Thành phố New York hoặc "47-380 Kamehameha Hwy, Kaneohe" trên đảo Kauai ở Hawai\39;i.

Hạn mức sử dụng và chính sách

Hạn mức

Để biết thông tin về hạn mức và giá, hãy xem tài liệu về cách sử dụng và thanh toán đối với API Địa điểm.

Chính sách

Việc sử dụng Thư viện địa điểm, API Maps JavaScript phải tuân theo các chính sách được mô tả cho API địa điểm.