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 cho Maps. Bạn có thể sử dụng tính năng tự động hoàn thành để cung cấp hành vi tìm kiếm nhập trước của trường tìm kiếm của Google Maps. Dịch vụ tự động hoàn thành có thể so khớp với các từ và chuỗi con đầy đủ, phân giải tên địa điểm, địa chỉ và dấu cộng mã. Do đó, ứng dụng có thể gửi truy vấn dưới dạng kiểu người dùng, tới cung cấp dự đoán địa điểm nhanh chóng. Như được xác định bởi Places API, một "địa điểm" có thể là một cơ sở, vị trí địa lý hoặc địa điểm yêu thích.
Bắt đầu
Trước khi sử dụng thư viện Địa điểm trong API Maps JavaScript, trước tiên hãy đảm bảo Places API được bật trong Google Cloud Console, trong cùng một dự án bạn thiết lập cho API Maps JavaScript.
Cách xem danh sách API đã bật:
- Chuyển đến Bảng điều khiển Google Cloud.
- Nhấp vào nút Select a project (Chọn dự án), rồi chọn chính dự án mà bạn đã thiết lập cho API Maps JavaScript rồi nhấp vào Mở.
- Trong danh sách API trên Trang tổng quan, hãy tìm API Địa điểm.
- 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,
bật:
- Ở đầu trang, hãy chọn ENABLE API (BẬT API) để hiển thị Thẻ Thư viện. Ngoài ra, từ trình đơn bên trái, hãy chọn Thư viện.
- Tìm kiếm API Địa điểm, sau đó chọn API đó từ danh sách kết quả.
- Chọn BẬT. Khi quá trình này kết thúc, API Địa điểm 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 dịch vụ
Mã API JavaScript cho Maps. Để sử dụng chức năng có trong đó
trong thư viện này, thì trước tiên, bạn phải tải thư viện bằng libraries
trong URL khởi động của API Maps:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initMap">
</script>
Hãy xem 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 qua
lớp Autocomplete
và SearchBox
tương ứng.
Ngoài ra, bạn có thể dùng lớp AutocompleteService
để truy xuất
kết quả tự động hoàn thành theo phương thức lập trình (xem Tài liệu tham khảo API Maps JavaScript:
Lớp Tự động hoàn thành).
Dưới đây là tóm tắt về các lớp học hiện có:
-
Autocomplete
thêm trường nhập văn bản vào trang web của bạn, và theo dõi trường đó để xem các mục nhập 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ác cụm từ gợi ý địa điểm ở dạng danh sách lựa 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à có thể được truy xuất theo ứng dụng của bạn. Xem thông tin chi tiết bên dưới.Hình 1: Trường văn bản tự động hoàn thành và danh sách chọn Hình 2: Biểu mẫu địa chỉ đã hoàn chỉnh -
SearchBox
thêm trường nhập văn bản vào trang web của bạn, trong nhiều giống nhưAutocomplete
. Có 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
nguồn cung cấp một danh sách mở rộng các dự đoán, có thể bao gồm các địa điểm (như được xác định bởi API Địa điểm) cùng với các cụm từ tìm kiếm được đề xuất. Ví dụ: nếu người dùng nhập 'pizza in new', danh sách lựa chọn có thể bao gồm cụm từ 'pizza ở New York, NY' cũng như tên của nhiều loại pizza đầu ra của chúng tôi. SearchBox
cung cấp ít lựa chọn hơnAutocomplete
để giới hạn tìm kiếm. Trước đây, bạn có thể thiên về mộtLatLngBounds
nhất định. Trong thứ hai, bạn có thể hạn chế tìm kiếm ở một quốc gia cụ thể và các loại địa điểm, cũng như đặt giới hạn. Để biết thêm thông tin, hãy xem bên dưới.
Hình 3: Một SearchBox trình bày cụm từ tìm kiếm và thông tin dự đoán về địa điểm. - Điểm khác biệt chính nằm ở
kết quả xuất hiện trong danh sách chọn.
- Bạn có thể tạo một
Đối tượng
AutocompleteService
cần truy xuất dự đoán theo phương thức lập trình. GọigetPlacePredictions()
tới truy xuất các địa điểm phù hợp hoặc gọigetQueryPredictions()
để truy xuất đị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 bất kỳ thành phần điều khiển giao diện người dùng nào. Thay vào đó, các phương thức trên sẽ trả về một mảng các đối tượng dự đoán. Một đối tượng dự đoán chứa văn bản của dự đoán cũng như tham chiếu thông tin và chi tiết về cách kết quả khớp với hoạt động đầu vào của người dùng. Xem chi tiết bên dưới.
Thêm tiện ích Tự động hoàn thành
Autocomplete
tiện ích con 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 lựa chọn giao diện người dùng
danh sách và trả về chi tiết địa điểm để phản hồi yêu cầu getPlace()
. Mỗi mục nhập trong
chọn danh sách tương ứng với một địa điểm (như được xác định bởi Places API).
Hàm khởi tạo Autocomplete
nhận 2 đối số:
- Phần tử HTML
input
thuộc loạitext
. Đây là trường nhập dữ liệu mà tính năng tự động hoàn thành mà dịch vụ của Google sẽ theo dõi và đính kèm kết quả vào. - không bắt buộc
Đối số
AutocompleteOptions
có thể chứa các thuộc tính sau:- Mảng dữ liệu
fields
cần được đưa vào phản hồiPlace Details
choPlaceResult
đã chọn của người dùng. Nếu thuộc tính chưa được thiết lập hoặc nếu['ALL']
được truyền vào, tất cả các trường có sẵn sẽ được trả về và được lập hoá đơn cho (không khuyến nghị) để triển khai phiên bản chính thức). Để xem danh sách các trường, hãy xemPlaceResult
. - Một mảng
types
chỉ định một kiểu rõ ràng hoặc một tập hợp kiểu, như được liệt kê trong các kiểu được hỗ trợ. Nếu không có loại nào được chỉ định, tất cả các loại bị trả lại. bounds
là một đối tượnggoogle.maps.LatLngBounds
chỉ định khu vực cần tìm kiếm địa điểm. Kết quả thiên lệch, nhưng không giới hạn ở, địa điểm nằm trong những giới hạn này.strictBounds
là mộtboolean
chỉ định liệu API có chỉ trả về các địa điểm nằm hoàn toàn trong khu vực được xác định hay không bởibounds
cho trước. API không trả về kết quả bên ngoài khu vực này ngay cả khi khớp với hoạt động đầu vào của người dùng.- Bạn có thể dùng
componentRestrictions
để giới hạn kết quả các nhóm cụ thể. Hiện tại, bạn có thể sử dụngcomponentRestrictions
để lọc theo tối đa 5 quốc gia. Quốc gia phải được thông qua dưới dạng một quốc gia tương thích với hai ký tự, theo tiêu chuẩn ISO 3166-1 Alpha-2 . Nhiều quốc gia phải được chuyển 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 mà bạn đang sử dụng mã bao gồm quốc gia, vùng lãnh thổ phụ thuộc và đặc biệt khu vực địa lý quan tâm mà bạn muốn. Bạn có thể tìm thấy thông tin mã tại Wikipedia: Danh sách ISO Mã quốc gia 3166 hoặc Duyệt web trực tuyến theo ISO Nền tảng.
placeIdOnly
có thể được dùng để hướng dẫn Tiện íchAutocomplete
để chỉ truy xuất Mã địa điểm. Đang gọigetPlace()
trên đối tượngAutocomplete
, phương thứcPlaceResult
được cung cấp sẽ chỉ cóplace id
, Đã đặt thuộc tínhtypes
vàname
. Bạn có thể sử dụng hàm được trả về ID địa điểm cùng với cuộc gọi đến Địa điểm, Mã hóa địa lý, Chỉ đường hoặc Ma trận khoảng cách luôn miễn phí.
- Mảng dữ liệu
Giới hạn khả năng 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 thể hiện tất cả các loại địa điểm và có xu hướng dự đoán gần vị trí của người dùng và tìm nạp tất cả các trường dữ liệu có sẵn cho địa điểm mà người dùng đã chọn. Đặt địa điểm Các tuỳ chọn tự động hoàn thành để đưa ra 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 tuỳ chọn khi tạo
Hàm khởi tạo Autocomplete
chấp nhận AutocompleteOptions
để đặt các quy tắc ràng buộc khi tạo tiện ích. Ví dụ sau đây đặt giá trị
Các tuỳ chọn bounds
, componentRestrictions
và types
để
yêu cầu địa điểm loại establishment
, ưu tiên những địa điểm trong khu vực địa lý được chỉ định
và hạn chế dự đoán ở chỉ các địa điểm tại Hoa Kỳ. Thiết lập
Tuỳ chọn fields
chỉ định thông tin cần trả về về địa điểm mà người dùng đã chọn.
Gọi setOptions()
để thay đổi giá trị của một tuỳ chọn cho 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, }; 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, }; 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 các SKU dữ liệu địa điểm mà bạn không cần. Đưa thuộc tính fields
vào trong
AutocompleteOptions
được truyền đến hàm khởi tạo tiện ích, như minh hoạ trong phần trước
hoặc gọi setFields()
trên một đố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ự động hoàn thành
Bạn có thể thiên về kết quả tự động hoàn thành để ưu tiên kết quả gần đúng vị trí hoặc diện tích, theo những cách sau:
- Đặt giới hạn 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.
- Giới hạn 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. Các ví dụ sau minh hoạ các kỹ thuật xu hướng khác.
Thay đổi các giới hạn của tính năng 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
thành 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 đồ
Sử dụng bindTo()
để dịch chuyển kết quả đến chế độ xem 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ác nội dung dự đoán 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 });
Giới hạn nội dung tìm kiếm ở giới hạn hiện tại
Đặt tuỳ chọn strictBounds
để hạn chế kết quả ở 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 });
Giới hạn cụm từ gợi ý ở một quốc gia cụ thể
Sử dụng tuỳ chọn componentRestrictions
hoặc gọi setComponentRestrictions()
để hạn chế
tự động hoàn thành tìm kiếm cho một nhóm cụ thể gồm tối đa 5 quốc gia.
TypeScript
autocomplete.setComponentRestrictions({ country: ["us", "pr", "vi", "gu", "mp"], });
JavaScript
autocomplete.setComponentRestrictions({ country: ["us", "pr", "vi", "gu", "mp"], });
Giới hạn các loại địa điểm
Dùng tuỳ chọn types
hoặc gọi setTypes()
để ràng buộc
các dự đoán cho một số loại địa điểm nhất định. Quy tắc ràng buộc này chỉ định một kiểu hoặc một bộ sưu tập kiểu,
như được liệt kê trong Loại địa điểm.
Nếu bạn không chỉ định quy tắc ràng buộc nào, thì hệ thống sẽ trả về tất cả các loại.
Đối với giá trị của tuỳ chọn types
hoặc giá trị được truyền đến setTypes()
, bạn
có thể chỉ định:
Một mảng có chứa tối đa 5 giá trị từ 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 trong Bảng 3.
Yêu cầu sẽ bị từ chối nếu:
- Bạn chỉ định hơn 5 loại.
- Bạn chỉ định mọi loại không nhận dạng được.
- Bạn kết hợp bất kỳ loại nào trong Bảng 1 hoặc Bảng 2 với bất kỳ từ Bảng 3.
Bản minh hoạ Tự động hoàn thành về địa điểm thể hiện sự khác biệt trong cụm từ gợi ý giữa các loại địa điểm.
Đang tải thông tin về địa điểm
Khi người dùng chọn một địa điểm trong số các cụm từ gợi ý được đính kèm với tính năng tự động hoàn thành
trường văn bản, thì dịch vụ sẽ kích hoạt sự kiện place_changed
. Để nhận địa điểm
chi tiết:
- Tạo một trình xử lý sự kiện cho sự kiện
place_changed
và gọiaddListener()
trên đối tượngAutocomplete
để thêm trình xử lý. - Gọi
Autocomplete.getPlace()
trên đối tượngAutocomplete
để truy xuấtPlaceResult
mà sau đó bạn có thể sử dụng để biết thêm thông tin về đối tượng đã chọn địa điểm.
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 hoá đơn tương ứng.
Sử dụng Autocomplete.setFields()
để chỉ định trường dữ liệu địa điểm nào cần trả về. Đọc thêm về chính sách
Đối tượng PlaceResult
, bao gồm 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à bạn không cần, hãy nhớ sử dụng Autocomplete.setFields()
để chỉ định
dữ liệu địa điểm mà bạn sẽ sử dụng.
Thuộc tính name
chứa
description
trong các cụm từ gợi ý của tính năng Tự động hoàn thành bằng địa điểm. Bạn có thể đọc thêm về chính sách
description
trong
Địa điểm
Tự động hoàn thành tài liệu.
Đối với biểu mẫu địa chỉ, bạn nên lấy địa chỉ theo định dạng có cấu trúc. Người nhận
trả về địa chỉ có cấu trúc cho địa điểm đã chọn, 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 các trường vào một địa chỉ biểu mẫu.
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;
Tuỳ 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 ra sẽ chứa
văn bản giữ chỗ 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 hoá tự động. Nếu bạn chỉ định giá trị trình giữ chỗ của riêng bạn, bạn phải xử lý việc bản địa hoá giá trị đó giá trị nhất định trong ứng dụng của bạn. Để biết thông tin về cách Google Maps API JavaScript chọn ngôn ngữ để sử dụng, vui lòng đọc tài liệu về bản địa hoá.
Xem phần Tạo kiểu cho tiện ích Tự động hoàn thành và SearchBox để tuỳ chỉnh giao diện của tiện ích.
Thêm tiện ích SearchBox
SearchBox
cho phép người dùng thực hiện theo các bước địa lý dựa trên văn bản
tìm kiếm, chẳng hạn như 'pizza ở New York' hoặc "cửa hàng giày gần đường robson".
Bạn có thể đính kèm SearchBox
vào một trường văn bản và dưới dạng
văn bản được nhập, dịch vụ sẽ trả về các gợi ý trong
dưới dạng một danh sách chọn lọc thả xuống.
SearchBox
cung cấp một danh sách mở rộng các dự đoán, giúp
có thể bao gồm địa điểm (như được xác định bởi API Địa điểm) cùng với tìm kiếm được đề xuất
. Ví dụ: nếu người dùng nhập "pizza mới", danh sách lựa chọn có thể
bao gồm cụm từ 'pizza ở New York, NY' cũng như tên của các
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à có thể là
được ứng dụng của bạn truy xuất.
Hàm khởi tạo SearchBox
nhận 2 đối số:
- Phần tử HTML
input
thuộc loạitext
. Đây là trường nhập dữ liệu mà dịch vụSearchBox
sẽ giám sát và đính kèm kết quả vào. - Đối số
options
, có thể chứa Thuộc tínhbounds
:bounds
là mộtgoogle.maps.LatLngBounds
đối tượng chỉ định khu vực mà trong đó cần tìm kiếm địa điểm. Kết quả thiên vị, nhưng không giới hạn ở, các địa điểm nằm trong các giới hạn này.
Mã sau đây sử dụng tham số giới hạn để sai lệch kết quả đối với các địa điểm trong một khu vực địa lý cụ thể, được chỉ định qua vĩ độ/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 vùng 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à truyền phương thức
đối tượng LatLngBounds
có liên quan.
Đang tải thông tin về địa điểm
Khi người dùng chọn một mục trong số các gợi ý đi kèm với cụm từ tìm kiếm
thì 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 một số dự đoán, mỗi dự đoán 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 phần Tạo kiểu cho tiện ích Tự động hoàn thành và SearchBox để tuỳ chỉnh giao diện của tiện ích.
Truy xuất thông tin dự đoán của Dịch vụ tự động hoàn thành địa điểm theo phương thức lập trình
Để truy xuất cụm 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 bất kỳ thành phần điều khiển giao diện người dùng nào. Thay vào đó, phương thức này trả về một mảng dự đoán
các đối tượng, mỗi đối tượng chứa văn bản dự đoán, thông tin tham chiếu,
và chi tiết về cách kết quả khớp với hoạt động đầu vào của người dùng.
Điều này rất hữu ích nếu bạn muốn kiểm soát giao diện người dùng nhiều hơn so với
do Autocomplete
và SearchBox
cung cấp
được mô tả ở trên.
AutocompleteService
hiển thị các phương thức sau:
getPlacePredictions()
trả về thông tin gợi ý địa điểm. Lưu ý: Một "địa điểm" có thể là một cơ sở, vị trí địa lý hoặc địa điểm yêu thích, như được xác định bởi Places API.getQueryPredictions()
trả về một danh sách mở rộng gồm gợi ý, có thể bao gồm địa điểm (như được xác định bởi Places API) 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 in new', danh sách lựa chọn có thể bao gồm cụm từ 'pizza ở New York, NY' cũng như tên của các cửa hàng pizza khác nhau.
Cả hai phương thức ở trên đều trả về một mảng dự đoán đối tượng có dạng sau:
description
là cụm từ gợi ý trùng khớp.distance_meters
là khoảng cách tính bằng mét từ địa điểm đếnAutocompletionRequest.origin
được chỉ định.matched_substrings
chứa một tập hợp chuỗi con trong mô tả khớp với các phần tử trong thông tin nhập của người dùng. Thông tin này hữu ích cho 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, sẽ xuất hiện dưới dạng chuỗi con của trường mô tả.length
là độ dài của chuỗi con.offset
là độ lệch ký tự, được đo bằng giá trị bắt đầu chuỗi mô tả, mà tại đó chuỗi con phù hợp sẽ xuất hiện.
place_id
là giá trị nhận dạng dạng văn bản giúp xác định chính xác một địa điểm. Để truy xuất thông tin về địa điểm, hãy truyền giá trị nhận dạng này vào trườngplaceId
của một Chi tiết địa điểm yêu cầu. Tìm hiểu thêm về cách tham chiếu đến một địa điểm có mã địa điểm.terms
là một mảng chứa các phần tử của truy vấn. Cho một địa điểm, mỗi phần tử thường sẽ tạo thành một phần của địa chỉ.offset
là độ lệch ký tự, được đo bằng giá trị bắt đầu chuỗi mô tả, mà tại đó chuỗi con phù hợp sẽ xuất hiện.value
là cụm từ khớp.
Ví dụ bên dưới thực thi một yêu cầu dự đoán truy vấn cho cụm từ 'pizza gần' và hiện kết quả dưới dạng 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> <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 script 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. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <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
Mã thông báo phiên
AutocompleteService.getPlacePredictions()
có thể sử dụng mã thông báo phiên (nếu được triển khai) để 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 hoạt động sẽ nhóm các giai đoạn truy vấn và lựa chọn của người dùng
tự động hoàn thành vào một phiên riêng biệt cho mục đích thanh toán. Phiên hoạt động
bắt đầu khi người dùng bắt đầu nhập truy vấn và kết thúc khi họ chọn
địa điểm. Mỗi phiên có thể có nhiều truy vấn, theo sau là một lựa chọn địa điểm.
Sau khi phiên kết thúc, mã thông báo không còn hợp lệ nữa. Ứng dụng của bạn phải
tạo mã thông báo mới cho mỗi phiên. Bạn nên sử dụng mã thông báo phiên cho
tất cả các phiên tự động hoàn thành. Nếu tham số sessionToken
là
hoặc nếu bạn sử dụng lại mã thông báo phiên, thì phiên đó sẽ được tính phí như thể không có
mã phiên hoạt động đã được cung cấp (mỗi yêu cầu được thanh toá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
Thông tin chi tiết về địa điểm
yêu cầu tại địa điểm được thực hiện từ một cuộc gọi đến AutocompleteService.getPlacePredictions()
.
Trong trường hợp này, yêu cầu tự động hoàn thành sẽ được kết hợp với 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 Chi tiết địa điểm thông thường. Bạn không phải trả phí cho
yêu cầu tự động hoàn thành.
Hãy nhớ truyền một mã thông báo phiên duy nhất cho mỗi phiên mới. Sử dụng cùng một mã thông báo cho hơn một 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ả cá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 bằng tính năng Tự động hoàn thành SKU mỗi yêu cầu. Đọc thêm về mã thông báo phiên.
Ví dụ sau đây minh hoạ việc tạo mã thông báo phiên, sau đó truyền mã đó vào một mã
AutocompleteService
(displaySuggestions()
hàm đã được 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ớ truyền một mã thông báo phiên duy nhất cho mỗi phiên mới. 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 sẽ bị tính phí riêng lẻ.
Đọc thêm về mã thông báo phiên.
Tạo kiểu 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 Autocomplete
cung cấp và
SearchBox
được tạo kiểu để đưa vào bản đồ Google. Bạn có thể muốn
để điều chỉnh kiểu cho phù hợp với trang web của riêng bạn. Các lớp CSS sau đây
sẵn có. Tất cả các lớp được liệt kê dưới đây áp dụng cho cả
Autocomplete
và các tiện ích SearchBox
.
![Hình minh hoạ dạng đồ hoạ của các lớp CSS cho tính năng Tự động hoàn thành và
Tiện ích SearchBox](https://developers.google.cn/static/maps/documentation/javascript/images/place-autocomplete-css-diagram.png?authuser=9&hl=vi)
lớp CSS | Mô tả |
---|---|
pac-container |
Phần tử hình ảnh chứa danh sách các dự đoán được trả về
Dịch vụ Tự động hoàn thành địa điểm. Danh sách này xuất hiện dưới dạng danh sách thả xuống bên dưới
Tiện ích Autocomplete hoặc SearchBox . |
pac-icon |
Biểu tượng hiển thị ở bên trái của mỗi mục trong danh sách dự đoán. |
pac-item |
Một mục trong danh sách các dự đoán được cung cấp bởi
Tiện ích Autocomplete hoặc SearchBox . |
pac-item:hover |
Mặt hàng khi người dùng di chuột qua mặt hàng đó. |
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à một thành viên của lớp này và của lớp pac-item .
|
pac-item-query |
span bên trong pac-item là phần chính của
truy vấn dự đoán. Đối với vị trí địa lý, trường này chứa tên địa điểm, chẳng hạn như
"Sydney", hoặc tên và số nhà, chẳng hạn như "10 King Street". Cho
tìm kiếm bằng văn bản như 'pizza ở New York', từ đó chứa toàn bộ văn bản
của truy vấn. Theo mặc định, pac-item-query sẽ có màu
đen. Nếu có thêm bất kỳ văn bản nào trong pac-item , thì
bên ngoài pac-item-query và kế thừa kiểu của
pac-item . Theo mặc định, hộp này có màu xám. Văn bản bổ sung
thường là một địa chỉ. |
pac-matched |
Phần cụm từ gợi ý đượ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 phù hợp này được đánh dấu bằng văn bản in đậm. Lưu ý rằng
văn bản phù hợp có thể ở bất cứ đâu trong pac-item . Không phải
nhất thiết phải là một phần của pac-item-query và có thể là một phần
trong pac-item-query cũng như một phần trong văn bản còn lại
trong pac-item . |
Sử dụng thành phần Bộ chọn địa điểm
Lưu ý: Mẫu này sử dụng thư viện nguồn mở. Xem README để được hỗ trợ và phản hồi liên quan đến thư viện.
Thử dùng các thành phần web. Sử dụng Thành phần web của Bộ chọn địa điểm để bật tính năng nhập văn bản, cho phép người dùng cuối tìm kiếm một địa chỉ hoặc địa điểm cụ thể bằng tính năng tự động hoàn thành.
![Ảnh GIF có hộp tìm kiếm. Người dùng bắt đầu nhập địa chỉ làm thông tin đầu vào và trình đơn thả xuống chứa các cụm từ liên quan
xuất hiện. Người dùng nhấp vào địa chỉ trong trình đơn thả xuống rồi điền thông tin vào hộp tìm kiếm
trong phần còn lại của địa chỉ.](https://developers.google.cn/static/maps/documentation/javascript/images/place-picker.gif?authuser=9&hl=vi)
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 hoạt động tốt là sử dụng Tiện ích Tự động hoàn thành của API Maps JavaScript, Tiện ích Tự động hoàn thành của SDK Địa điểm dành cho Android, hoặc SDK Địa điểm dành cho iOS Kiểm soát giao diện người dùng tự động hoàn thành
- Hiểu rõ về tính năng Tự động hoàn thành địa điểm thiết yếu trường dữ liệu ngay từ đầu.
- Các trường xu hướng vị trí và giới hạn vị trí là không bắt buộc nhưng có thể có tác động đáng kể đến hiệu suất tự động hoàn thành.
- Sử dụng tính năng xử lý lỗi để đảm bảo ứng dụng của bạn xuống cấp nhẹ nếu API trả về lỗi.
- Đảm bảo ứng dụng của bạn xử lý khi không có lựa chọn nào và cung cấp cho người dùng một cách để tiếp tục.
Các phương pháp hay nhất để tối ưu hoá chi phí
Tối ưu hoá chi phí cơ bản
Để tối ưu hoá chi phí khi sử dụng tính năng Tự động hoàn thành về địa điểm hãy sử dụng mặt nạ trường trong các tiện ích Chi tiết địa điểm và Tự động hoàn thành về địa điểm để chỉ trả về trường dữ liệu địa điểm mà bạn cần.
Tối ưu hoá 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 chế độ Giá theo mỗi yêu cầu và yêu cầu kết quả API mã hoá địa lý về địa điểm đã chọn thay vì Thông tin chi tiết về địa điểm. Đặt giá Cho mỗi yêu cầu được kết hợp với API mã hoá địa lý sẽ tiết kiệm chi phí hơn so với đặt giá 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 mà người dùng đã chọn, thì API mã hoá địa lý sẽ cung cấp thông tin này trong ít hơn một lệnh gọi Chi tiết địa điểm.
- Nếu người dùng chọn một cụm từ gợi ý tự động hoàn thành trong số trung bình 4 yêu cầu dự đoán Tự động hoàn thành trở xuống, thì phương thức đặt giá Theo yêu cầu có thể tiết kiệm chi phí hơn so với phương thức đặt giá Theo phiên.
Ứ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 ý đã chọn không?
Có, cần thêm thông tin
Sử dụng tính năng Tự động hoàn thành địa điểm dựa trên phiên cù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 chi tiết 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 sẽ dùng mã thông báo phiên (theo phương thức lập trình hoặc tích hợp vào tiện ích JavaScript, Android hoặc iOS) với tổng chi phí là 0, 017 USD cho mỗi phiên cộng với SKU dữ liệu địa điểm có thể áp dụng tuỳ thuộc vào các trường dữ liệu địa điểm
Triển khai tiện ích
Tính năng quản lý phiên được tự động tích hợp vào tiện ích JavaScript, Android hoặc iOS. Dữ liệu này bao gồm cả yêu cầu Tự động hoàn thành về địa điểm và thông tin chi tiết về địa điểm trên cụm từ gợi ý đã chọn. Hãy nhớ chỉ định tham số fields
để đảm bảo rằng bạn chỉ yêu cầu
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 Thông tin chi tiết về địa điểm về cụm từ gợi ý đã chọn, hãy bao gồm các thông số sau:
- Mã địa điểm trong phản hồi Tự động hoàn thành về địa điểm
- Mã thông báo phiên được dùng trong yêu cầu Tự động hoàn thành địa điểm
- Tham số
fields
chỉ định trường dữ liệu địa điểm mà bạn cần
Không, chỉ cần địa chỉ và vị trí
API mã hoá địa lý có thể là một lựa chọn tiết kiệm chi phí hơn so với Chi tiết địa điểm cho ứng dụng của bạn, tuỳ 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 tuỳ thuộc vào nội dung người dùng đang nhập, nơi ứng dụng đang được dùng và việc các phương pháp hay nhất để tối ưu hoá 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 người dùng nhập vào trước khi chọn dự đoán Tự động hoàn thành địa điểm trong ứng dụng của bạn.
Trung bình, người dùng có chọn một cụm từ gợi ý của tính năng Tự động hoàn thành về địa điểm trong tối đa 4 yêu cầu không?
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 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 về địa điểm đã chọn.
API mã hoá địa lý cung cấp các địa chỉ và vĩ độ/kinh độ của địa chỉ $0,005 cho mỗi yêu cầu. Việc tạo 4 yêu cầu Tự động hoàn thành theo địa điểm – Theo yêu cầu có chi phí là 0,01132 USD, do đó, tổng chi phí của 4 yêu cầu cộng với lệnh gọi API mã hoá địa lý về thông tin dự đoán địa điểm được chọn sẽ là 0,01632 USD, thấp hơn giá Tự động hoàn thành mỗi phiên là 0,017 USD/phiên.1
Hãy cân nhắc áp dụng các phương pháp hay nhất về hiệu suất để giúp người dùng nhận được thông tin gợi ý mà họ đang tìm với ít ký tự hơn nữa.
Không
Sử dụng tính năng Tự động hoàn thành địa điểm dựa trên phiên cù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 sẽ đưa ra trước khi người dùng chọn thông tin dự đoán của tính năng Tự động hoàn thành về địa điểm vượt quá chi phí để tính giá mỗi phiên, nên việc triển khai tính năng Tự động hoàn thành địa điểm phải dùng một mã thông báo phiên cho cả yêu cầu Tự động hoàn thành về địa điểm và yêu cầu Thông tin chi tiết về địa điểm được liên kết với 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 tiện ích JavaScript, Android hoặc iOS. Dữ liệu này bao gồm cả yêu cầu Tự động hoàn thành về địa điểm và thông tin chi tiết về địa điểm trên cụm từ gợi ý đã chọn. Hãy nhớ chỉ định tham 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 Thông tin chi tiết về địa điểm về cụm từ gợi ý đã chọn, hãy bao gồm các thông số sau:
- Mã địa điểm trong phản hồi Tự động hoàn thành về địa điểm
- Mã thông báo phiên được dùng trong yêu cầu Tự động hoàn thành địa điểm
- Tham 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 trì hoãn các yêu cầu Tự động hoàn thành địa điểm
Bạn có thể sử 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 3 hoặc 4 ký tự đầu tiên để ứng dụng của bạn đưa ra ít yêu cầu hơn. Ví dụ: thực hiện 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 7 ký tự sau đó chọn gợi ý mà bạn thực hiện một yêu cầu API mã hóa địa lý, tổng chi phí sẽ là $0,01632 (4 * $0,00283 Tự động hoàn thành mỗi yêu cầu + $0,005 Mã hóa địa lý).1
Nếu việc trì hoãn yêu cầu có thể khiến yêu cầu có lập trình trung bình của bạn dưới 4, bạn có thể làm theo hướng dẫn triển khai Tự động hoàn thành địa điểm bằng cách sử dụng API mã hoá địa lý. Lưu ý rằng việc trì hoãn yêu cầu có thể được xem là độ trễ của người dùng vì họ có thể thấy cụm từ gợi ý mỗi khi nhấn phím mới.
Cân nhắc áp dụng các phương pháp hay nhất về hiệu suất để giúp người dùng nhận được thông tin gợi ý mà họ đang tìm kiếm với ít ký tự hơn.
-
Các chi phí được liệt kê ở đây được tính bằng đô la Mỹ. Vui lòng tham khảo trang Thanh toán trên 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ách để tối ưu hoá hiệu suất của tính năng Tự động hoàn thành về địa điểm:
- Thêm hạn chế theo quốc gia, thiên vị vị trí, và lựa chọn ngôn ngữ ưu tiên (đối với việc triển khai có lập trình) cho tính năng Tự động hoàn thành địa điểm trong quá trình triển khai. Không cần lựa chọn ưu tiên ngôn ngữ với các tiện ích vì chúng chọn tuỳ 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 đồ, thì bạn có thể dịch chuyển vị trí theo khung nhìn của 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 ý Tự động hoàn thành,
bởi vì không có dự đoán nào trong số đó là địa chỉ kết quả mong muốn, nên bạn có thể sử dụng lại
hoạt động đầu vào của người dùng để cố gắng nhận được kết quả có liên quan 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 thông tin đầu vào ban đầu của người dùng trong lệnh gọi đến API mã hoá địa lý.
- Nếu bạn muốn người dùng nhập truy vấn 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ỉ dự kiến có ở một khu vực cụ thể, hãy sử dụng xu hướng vị trí.
- Người dùng nhập địa chỉ con ở những quốc gia có hỗ trợ tính năng Tự động hoàn thành bằng địa điểm địa chỉ phụ không hoàn chỉnh, ví dụ: Cộng hoà Séc, Estonia và Lithuania. Ví dụ: Địa chỉ bằng tiếng Séc "Stroupe Sửanického 3191/17, Praha" đưa ra dự đoán một phần tại vị trí Tự động hoàn thành.
- Người dùng nhập địa chỉ có tiền tố đoạn đường như "23-30 29th St, Queens" inch New York City hoặc "47-380 Kamehameha Hwy, Kaneohe" trên đảo Kauai ở Hawaii.
Chính sách và hạn mức sử dụng
Hạn mức
Để biết thông tin về hạn mức và giá, hãy xem Tài liệu về việc sử dụng và thanh toán dành cho Places API.
Chính sách
Việc sử dụng Thư viện địa điểm, Maps JavaScript API phải tuân theo các chính sách nêu trên cho Places API.