Tiện ích Place Autocomplete tạo một trường nhập dữ liệu, cung cấp thông tin dự đoán về địa điểm trong danh sách lựa chọn trên giao diện người dùng và trả về Place Details theo lựa chọn của người dùng. Sử dụng Tiện ích Place Autocomplete để nhúng giao diện người dùng tự động hoàn thành độc lập hoàn chỉnh trên trang web của bạn. Để xem tài liệu tham khảo API đầy đủ, hãy xem PlaceAutocompleteElement.
Điều kiện tiên quyết
Để sử dụng Place Autocomplete, bạn phải bật Places API (Mới) trên dự án Google Cloud của mình. Hãy xem phần Bắt đầu để biết thông tin chi tiết.
Tính năng mới
Tính năng Place Autocomplete đã được cải thiện theo những cách sau:
- Giao diện người dùng của tiện ích Tự động hoàn thành hỗ trợ bản địa hoá theo khu vực (bao gồm cả ngôn ngữ từ phải sang trái) cho phần giữ chỗ nhập văn bản, biểu trưng danh sách cụm từ gợi ý và cụm từ gợi ý về địa điểm.
- Cải thiện khả năng hỗ trợ tiếp cận, bao gồm cả việc hỗ trợ trình đọc màn hình và tương tác bằng bàn phím.
- Tiện ích Tự động hoàn thành trả về
lớp Địa điểm mới
(tham chiếu
Place) để đơn giản hoá việc xử lý đối tượng được trả về. - Hỗ trợ tốt hơn cho thiết bị di động và màn hình nhỏ.
- Hiệu suất tốt hơn và giao diện đồ hoạ được cải thiện.
Thêm tiện ích Tự động hoàn thành
Tiện ích Tự động hoàn thành tạo một trường nhập dữ liệu văn bản, cung cấp thông tin dự đoán về địa điểm trong danh sách chọn trên giao diện người dùng và trả về Place Details để phản hồi lượt nhấp của người dùng bằng trình nghe gmp-select. Phần này hướng dẫn bạn cách thêm tiện ích tự động hoàn thành vào trang web hoặc bản đồ Google.
Thêm tiện ích Tự động hoàn thành vào trang web
Để thêm tiện ích Tự động hoàn thành vào một trang web, hãy tạo một google.maps.places.PlaceAutocompleteElement mới và thêm tiện ích đó vào trang như trong ví dụ sau:
TypeScript
// Request needed libraries. const { PlaceAutocompleteElement } = await google.maps.importLibrary('places'); // Create the input HTML element, and append it. const placeAutocomplete = new PlaceAutocompleteElement(); document.body.appendChild(placeAutocomplete);
JavaScript
// Request needed libraries. const { PlaceAutocompleteElement } = await google.maps.importLibrary('places'); // Create the input HTML element, and append it. const placeAutocomplete = new PlaceAutocompleteElement(); document.body.appendChild(placeAutocomplete);
Xem ví dụ về đoạn mã hoàn chỉnh
Thêm tiện ích Tự động hoàn thành vào bản đồ
Nếu địa chỉ thanh toán của bạn nằm ngoài Khu vực kinh tế Châu Âu (EEA), thì bạn cũng có thể sử dụng tiện ích Tự động hoàn thành với Google Maps.
Để thêm tiện ích Tự động hoàn thành vào bản đồ, trước tiên, hãy yêu cầu các thư viện cần thiết, như minh hoạ dưới đây:
// In your TS or JS, request the needed libraries. const { PlaceAutocompleteElement } = await google.maps.importLibrary("places");
Sau đó, trong HTML, hãy lồng một phần tử gmp-place-autocomplete mới vào trong một div và lồng div đó vào trong một gmp-map, như trong ví dụ sau:
<gmp-map center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
<div
class="place-autocomplete-card"
slot="control-inline-start-block-start">
<gmp-place-autocomplete
placeholder="Search for a place..."></gmp-place-autocomplete>
</div>
</gmp-map>Để thêm tiện ích Tự động hoàn thành vào bản đồ theo phương thức lập trình, hãy tạo một thực thể google.maps.places.PlaceAutocompleteElement mới, thêm PlaceAutocompleteElement vào div và áp dụng thuộc tính slot cho div, như trong ví dụ sau:
// In your TS or JS, request the needed libraries. const { PlaceAutocompleteElement } = await google.maps.importLibrary("places"); // Get the map element. const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; // Create the PlaceAutocompleteElement instance. const placeAutocomplete = new PlaceAutocompleteElement({}); // Create a div and append the PlaceAutocompleteElement to it. const card = document.createElement("div"); card.appendChild(placeAutocomplete); // Apply the slot attribute to the div. // This positions the control in the top-left corner of the map. card.setAttribute("slot", "control-inline-start-block-start"); // Append the div to the map element (check for null). if (mapElement) { mapElement.appendChild(card); }
Xem ví dụ về đoạn mã hoàn chỉnh
Thêm văn bản phần giữ chỗ
Sử dụng thuộc tính placeholder để thêm văn bản phần giữ chỗ. Ví dụ sau đây cho thấy cách đặt văn bản phần giữ chỗ trong HTML:
<gmp-place-autocomplete placeholder="Search for a place..." ></gmp-place-autocomplete>
Bạn cũng có thể đặt văn bản phần giữ chỗ theo phương thức lập trình:
placeAutocomplete.placeholder = 'Search for a place...';
Giới hạn cụm từ gợi ý của tính năng tự động hoàn thành
Theo mặc định, Place Autocomplete sẽ hiển thị tất cả các loại địa điểm, ưu tiên các cụm từ gợi ý 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 PlaceAutocompleteElementOptions để đưa ra các cụm từ gợi ý phù hợp hơn bằng cách hạn chế hoặc ưu tiên kết quả.
Việc hạn chế kết quả sẽ khiến tiện ích Tự động hoàn thành bỏ qua mọi kết quả nằm ngoài khu vực hạn chế. Một phương pháp phổ biến là giới hạn kết quả trong ranh giới bản đồ. Việc thiên vị kết quả sẽ khiến tiện ích Tự động hoàn thành hiển thị kết quả trong khu vực được chỉ định, nhưng một số kết quả trùng khớp có thể nằm ngoài khu vực đó.
Nếu bạn không cung cấp bất kỳ ranh giới hoặc khung nhìn bản đồ nào, thì API sẽ cố gắng phát hiện vị trí của người dùng từ địa chỉ IP của họ và sẽ ưu tiên kết quả cho vị trí đó. Đặt ranh giới bất cứ khi nào có thể. Nếu không, những người dùng khác nhau có thể nhận được thông tin dự đoán khác nhau. Ngoài ra, để cải thiện thông tin dự đoán nói chung, bạn cần cung cấp một khung nhìn hợp lý, chẳng hạn như khung nhìn mà bạn đặt bằng cách kéo hoặc thu phóng trên bản đồ, hoặc khung nhìn do nhà phát triển đặt dựa trên vị trí và bán kính của thiết bị. Khi không có bán kính, 5 km được coi là giá trị mặc định hợp lý cho tính năng Place Autocomplete. Đừng đặt khung nhìn có bán kính bằng 0 (một điểm duy nhất), khung nhìn chỉ rộng vài mét (dưới 100 mét) hoặc khung nhìn trải dài trên toàn cầu.
Hạn chế tìm kiếm địa điểm theo quốc gia
Để giới hạn việc tìm kiếm địa điểm ở một hoặc nhiều quốc gia cụ thể, hãy sử dụng thuộc tính includedRegionCodes để chỉ định(các) mã quốc gia như trong đoạn mã sau (các mã này giả định rằng bạn đã tạo một thực thể có tên là placeAutocomplete):
placeAutocomplete.includedRegionCodes = ['us', 'au'];;
Giới hạn phạm vi tìm kiếm địa điểm trong ranh giới trên bản đồ
Để giới hạn phạm vi tìm kiếm địa điểm trong ranh giới của bản đồ, hãy sử dụng thuộc tính locationRestriction. Đoạn mã sau đây cho biết cách thêm trình nghe để cập nhật ranh giới khi chúng thay đổi:
// Use the bounds_changed event to restrict results to the current map bounds. google.maps.event.addListener(innerMap, 'bounds_changed', async () => { placeAutocomplete.locationRestriction = innerMap.getBounds(); });
Để xoá locationRestriction, hãy đặt thành null.
Kết quả tìm kiếm địa điểm thiên vị
Tạo độ lệch cho kết quả tìm kiếm địa điểm theo một khu vực hình tròn bằng cách sử dụng thuộc tính locationBias, như minh hoạ dưới đây:
placeAutocomplete.locationBias = {radius: 100, center: {lat: 40.749933, lng: -73.98633}};
Để xoá locationBias, hãy đặt thành null.
Hạn chế kết quả tìm kiếm địa điểm theo một số loại nhất định
Hạn chế kết quả tìm kiếm địa điểm đối với một số loại địa điểm nhất định bằng cách sử dụng thuộc tính includedPrimaryTypes và chỉ định một hoặc nhiều loại, như minh hoạ dưới đây:
const autocomplete = new google.maps.places.PlaceAutocompleteElement({ includedPrimaryTypes: ['establishment'], });
Để xem danh sách đầy đủ các loại được hỗ trợ, hãy xem Bảng loại địa điểm A và B.
Lấy thông tin chi tiết về địa điểm
Để lấy Place Details cho địa điểm đã chọn, hãy thêm trình nghe gmp-select vào PlaceAutocompleteElement, như trong ví dụ sau:
TypeScript
// Add the gmp-select listener, and display the results. placeAutocomplete.addEventListener( 'gmp-select', async ({ placePrediction, }: google.maps.places.PlacePredictionSelectEvent) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'], }); selectedPlaceTitle.textContent = 'Selected Place:'; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2 ); } );
JavaScript
// Add the gmp-select listener, and display the results. placeAutocomplete.addEventListener( 'gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'], }); selectedPlaceTitle.textContent = 'Selected Place:'; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2 ); } );
Xem ví dụ về đoạn mã hoàn chỉnh
Trong ví dụ trước, trình nghe sự kiện nhận được một
PlacePredictionSelectEvent
và gọi
placePrediction.toPlace()
để lấy một thực thể
Lớp địa điểm
(tham chiếu
Place). Gọi
place.fetchFields()
để lấy
trường dữ liệu
Place Details cần thiết cho ứng dụng của bạn.
Trình nghe trong ví dụ tiếp theo yêu cầu các trường displayName, formattedAddress, location và viewport trong place.fetchFields(), sau đó sử dụng place.viewport với fitBounds() để hiển thị địa điểm đã chọn trên bản đồ.
TypeScript
// Add the gmp-select listener, and display the results on the map. placeAutocomplete.addEventListener( 'gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: [ 'displayName', 'formattedAddress', 'location', 'viewport', ], }); // If the place has a geometry, then present it on a map. if (place.viewport) { innerMap.fitBounds(place.viewport); } else { innerMap.setCenter(place.location!); innerMap.setZoom(17); } const content = document.createElement('div'); const nameText = document.createElement('span'); nameText.textContent = place.displayName ?? 'No name'; content.appendChild(nameText); content.appendChild(document.createElement('br')); const addressText = document.createElement('span'); addressText.textContent = place.formattedAddress ?? 'No address'; content.appendChild(addressText); updateInfoWindow(content, place.location); marker.position = place.location; } );
JavaScript
// Add the gmp-select listener, and display the results on the map. placeAutocomplete.addEventListener( 'gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: [ 'displayName', 'formattedAddress', 'location', 'viewport', ], }); // If the place has a geometry, then present it on a map. if (place.viewport) { innerMap.fitBounds(place.viewport); } else { innerMap.setCenter(place.location); innerMap.setZoom(17); } const content = document.createElement('div'); const nameText = document.createElement('span'); nameText.textContent = place.displayName ?? 'No name'; content.appendChild(nameText); content.appendChild(document.createElement('br')); const addressText = document.createElement('span'); addressText.textContent = place.formattedAddress ?? 'No address'; content.appendChild(addressText); updateInfoWindow(content, place.location); marker.position = place.location; } );
Xem ví dụ về đoạn mã hoàn chỉnh
Bản đồ mẫu
Phần này chứa mã hoàn chỉnh cho các bản đồ mẫu xuất hiện trên trang này.
Phần tử tự động hoàn thành
Ví dụ này thêm một tiện ích Tự động hoàn thành vào trang web và hiển thị kết quả cho từng địa điểm đã chọn.
TypeScript
async function init(): Promise<void> { // Request needed libraries. const { PlaceAutocompleteElement } = await google.maps.importLibrary('places'); // Create the input HTML element, and append it. const placeAutocomplete = new PlaceAutocompleteElement(); document.body.appendChild(placeAutocomplete); // Inject HTML UI. const selectedPlaceTitle = document.createElement('p'); selectedPlaceTitle.textContent = ''; document.body.appendChild(selectedPlaceTitle); const selectedPlaceInfo = document.createElement('pre'); selectedPlaceInfo.textContent = ''; document.body.appendChild(selectedPlaceInfo); // Add the gmp-select listener, and display the results. placeAutocomplete.addEventListener( 'gmp-select', async ({ placePrediction, }: google.maps.places.PlacePredictionSelectEvent) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'], }); selectedPlaceTitle.textContent = 'Selected Place:'; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2 ); } ); } void init();
JavaScript
async function init() { // Request needed libraries. const { PlaceAutocompleteElement } = await google.maps.importLibrary('places'); // Create the input HTML element, and append it. const placeAutocomplete = new PlaceAutocompleteElement(); document.body.appendChild(placeAutocomplete); // Inject HTML UI. const selectedPlaceTitle = document.createElement('p'); selectedPlaceTitle.textContent = ''; document.body.appendChild(selectedPlaceTitle); const selectedPlaceInfo = document.createElement('pre'); selectedPlaceInfo.textContent = ''; document.body.appendChild(selectedPlaceInfo); // Add the gmp-select listener, and display the results. placeAutocomplete.addEventListener( 'gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'], }); selectedPlaceTitle.textContent = 'Selected Place:'; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2 ); } ); } void init();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } p { font-family: Roboto, sans-serif; font-weight: bold; }
HTML
<html>
<head>
<title>Place Autocomplete element</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
<script>
// prettier-ignore
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "GOOGLE_MAPS_API_KEY"
});
</script>
</head>
<body>
<p style="font-family: roboto, sans-serif">Search for a place here:</p>
</body>
</html>Bản đồ tự động hoàn thành
Ví dụ này cho bạn biết cách thêm tiện ích Tự động hoàn thành vào bản đồ Google.
TypeScript
const mapElement = document.querySelector('gmp-map')!; const placeAutocomplete = document.querySelector('gmp-place-autocomplete')!; let innerMap: google.maps.Map; let marker: google.maps.marker.AdvancedMarkerElement; let infoWindow: google.maps.InfoWindow; async function init(): Promise<void> { // Request needed libraries. const [{ AdvancedMarkerElement }, { InfoWindow }] = await Promise.all([ google.maps.importLibrary('marker'), google.maps.importLibrary('maps'), google.maps.importLibrary('places'), ]); // Get the inner map. innerMap = mapElement.innerMap; innerMap.setOptions({ mapTypeControl: false, }); // Use the bounds_changed event to restrict results to the current map bounds. innerMap.addListener('bounds_changed', () => { placeAutocomplete.locationRestriction = innerMap.getBounds()!; }); // Create the marker and infoWindow. marker = new AdvancedMarkerElement({ map: innerMap, }); infoWindow = new InfoWindow(); // Add the gmp-select listener, and display the results on the map. placeAutocomplete.addEventListener( 'gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: [ 'displayName', 'formattedAddress', 'location', 'viewport', ], }); // If the place has a geometry, then present it on a map. if (place.viewport) { innerMap.fitBounds(place.viewport); } else { innerMap.setCenter(place.location!); innerMap.setZoom(17); } const content = document.createElement('div'); const nameText = document.createElement('span'); nameText.textContent = place.displayName ?? 'No name'; content.appendChild(nameText); content.appendChild(document.createElement('br')); const addressText = document.createElement('span'); addressText.textContent = place.formattedAddress ?? 'No address'; content.appendChild(addressText); updateInfoWindow(content, place.location); marker.position = place.location; } ); } // Helper function to create an info window. function updateInfoWindow( content: string | Element | Text | null | undefined, center: google.maps.LatLng | google.maps.LatLngLiteral | null | undefined ) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map: innerMap, anchor: marker, shouldFocus: false, }); } void init();
JavaScript
const mapElement = document.querySelector('gmp-map'); const placeAutocomplete = document.querySelector('gmp-place-autocomplete'); let innerMap; let marker; let infoWindow; async function init() { // Request needed libraries. const [{ AdvancedMarkerElement }, { InfoWindow }] = await Promise.all([ google.maps.importLibrary('marker'), google.maps.importLibrary('maps'), google.maps.importLibrary('places'), ]); // Get the inner map. innerMap = mapElement.innerMap; innerMap.setOptions({ mapTypeControl: false, }); // Use the bounds_changed event to restrict results to the current map bounds. innerMap.addListener('bounds_changed', () => { placeAutocomplete.locationRestriction = innerMap.getBounds(); }); // Create the marker and infoWindow. marker = new AdvancedMarkerElement({ map: innerMap, }); infoWindow = new InfoWindow(); // Add the gmp-select listener, and display the results on the map. placeAutocomplete.addEventListener( 'gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: [ 'displayName', 'formattedAddress', 'location', 'viewport', ], }); // If the place has a geometry, then present it on a map. if (place.viewport) { innerMap.fitBounds(place.viewport); } else { innerMap.setCenter(place.location); innerMap.setZoom(17); } const content = document.createElement('div'); const nameText = document.createElement('span'); nameText.textContent = place.displayName ?? 'No name'; content.appendChild(nameText); content.appendChild(document.createElement('br')); const addressText = document.createElement('span'); addressText.textContent = place.formattedAddress ?? 'No address'; content.appendChild(addressText); updateInfoWindow(content, place.location); marker.position = place.location; } ); } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map: innerMap, anchor: marker, shouldFocus: false, }); } void init();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ gmp-map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } .place-autocomplete-card { background-color: #fff; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; margin: 10px; padding: 5px; font-family: Roboto, sans-serif; font-size: small; } gmp-place-autocomplete { width: 300px; } #infowindow-content .title { font-weight: bold; } #map #infowindow-content { display: inline; }
HTML
<html>
<head>
<title>Place Autocomplete map</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
<script>
// prettier-ignore
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "GOOGLE_MAPS_API_KEY"
});
</script>
</head>
<body>
<gmp-map center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
<div
class="place-autocomplete-card"
slot="control-inline-start-block-start">
<gmp-place-autocomplete
placeholder="Search for a place..."></gmp-place-autocomplete>
</div>
</gmp-map>
</body>
</html>Tối ưu hoá tính năng Tự động hoàn thành (Mới)
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 (Mới).
Sau đâ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 hiệu quả là sử dụng Tiện ích Tự động hoàn thành (Mới) của API JavaScript của Maps, Tiện ích Tự động hoàn thành (Mới) của SDK Địa điểm cho Android, hoặc Tiện ích Tự động hoàn thành (Mới) của SDK Địa điểm cho iOS.
- Hiểu rõ các trường dữ liệu cần thiết của tính năng Tự động hoàn thành (Mới) ngay từ đầu.
- Các trường thiên vị vị trí và 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.
- 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 một cách linh hoạt nếu API trả về lỗi.
- Đảm bảo ứng dụng của bạn xử lý được trường hợp không có lựa chọn nào và cung cấp cho người dùng 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í sử dụng dịch vụ Tự động hoàn thành (Mới), hãy sử dụng mặt nạ trường trong các tiện ích Place Details (Mới) và Tự động hoàn thành (Mới) để chỉ trả về trường dữ liệu Tự động hoàn thành (Mới) mà bạn cần.
Tối ưu hoá chi phí nâng cao
Hãy cân nhắc việc triển khai tính năng Tự động hoàn thành (Mới) theo phương thức lập trình để sử dụng SKU: Giá của yêu cầu Tự động hoàn thành và yêu cầu kết quả của Geocoding API về địa điểm đã chọn thay vì Place Details (Mới). Mô hình định giá theo yêu cầu kết hợp với Geocoding API sẽ tiết kiệm chi phí hơn so với mô hình định giá theo 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ĩ độ và kinh độ hoặc địa chỉ của địa điểm mà người dùng đã chọn, thì Geocoding API sẽ cung cấp thông tin này với chi phí thấp hơn so với lệnh gọi Place Details (Mới).
- 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 trung bình 4 yêu cầu cụm từ gợi ý của tính năng Tự động hoàn thành (Mới) trở xuống, thì mức giá theo yêu cầu có thể tiết kiệm chi phí hơn so với mức giá theo phiên.
| Những thông tin cần có trong đơn đăng ký | Số yêu cầu trung bình về tính năng Tự động hoàn thành (Mới) trước khi người dùng chọn một cụm từ gợi ý | Cách triển khai được đề xuất |
|---|---|---|
| Thông tin chi tiết về địa điểm ngoài địa chỉ và vị trí, chẳng hạn như tên địa điểm, trạng thái doanh nghiệp hoặc giờ mở cửa | Số lượng bất kỳ | Tính năng Tự động hoàn thành dựa trên phiên (Mới) có Thông tin chi tiết về địa điểm (Mới) |
| Chỉ địa chỉ và vĩ độ/kinh độ của cụm từ gợi ý đã chọn | 4 trở xuống | Tính năng Tự động hoàn thành theo yêu cầu (Mới) với Geocoding API |
| Chỉ địa chỉ và vĩ độ/kinh độ của cụm từ gợi ý đã chọn | Hơn 4 | Tính năng Tự động hoàn thành (Mới) dựa trên phiên cho các ứng dụng chỉ có địa chỉ |
Geocoding API có thể là một lựa chọn tiết kiệm chi phí hơn so với Place Details (Mới) cho ứng dụng của bạn, tuỳ thuộc vào hiệu suất sử dụng Autocomplete (Mới). Hiệu suất của tính năng Tự động hoàn thành (Mới) trong mỗi ứng dụng sẽ khác nhau tuỳ thuộc vào nội dung người dùng nhập, nơi ứng dụng được sử dụng và liệu các phương pháp hay nhất để tối ưu hoá hiệu suất đã được triển khai hay chưa.
Để tìm số yêu cầu trung bình cho bảng, hãy phân tích xem trung bình người dùng nhập bao nhiêu ký tự trước khi chọn một cụm từ gợi ý của tính năng Tự động hoàn thành (Mới) trong ứng dụng của bạn.
Tính năng Tự động hoàn thành (Mới) dựa trên phiên có Place Details (Mới)
Sử dụng tính năng Tự động hoàn thành (Mới) dựa trên phiên với Place Details (Mới).
Vì ứng dụng của bạn yêu cầu Chi tiết địa điểm (Mới), 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 (Mới) phải sử dụng mã thông báo phiên
(theo phương thức lập trình hoặc được tích hợp vào các tiện ích
JavaScript,
Android
hoặc iOS)
cho mỗi phiên cộng với các SKU Địa điểm hiện hành,
tuỳ thuộc vào trường dữ liệu địa điểm mà bạn yêu cầu.1
Triển khai tiện ích
Tính năng quản lý phiên được tích hợp tự động vào các tiện ích
JavaScript,
Android
hoặc iOS. Trong đó bao gồm cả yêu cầu Tự động hoàn thành (Mới) và yêu cầu Place Details (Mới)
về 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 trường dữ liệu Tự động hoàn thành (Mới) 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 (Mới). Khi yêu cầu Place Details (Mới) về cụm từ gợi ý đã chọn, hãy thêm các tham số sau:
- Mã địa điểm từ phản hồi của tính năng Tự động hoàn thành (Mới)
- Mã thông báo phiên được dùng trong yêu cầu Tự động hoàn thành (Mới)
- Tham số
fieldschỉ định trường dữ liệu của tính năng Tự động hoàn thành (Mới) mà bạn cần
Tính năng Tự động hoàn thành (Mới) theo yêu cầu bằng Geocoding API
Triển khai tính năng Tự động hoàn thành (Mới) theo phương thức lập trình mà không cần mã thông báo phiên và gọi Geocoding API trên cụm từ gợi ý địa điểm đã chọn.
Geocoding API cung cấp địa chỉ và toạ độ vĩ độ/kinh độ.
Việc thực hiện 4 yêu cầu Autocomplete Requests cộng với một lệnh gọi Geocoding API về cụm từ gợi ý địa điểm đã chọn sẽ có chi phí thấp hơn chi phí cho mỗi phiên của Autocomplete (Mới).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 cụm từ gợi ý mà họ đang tìm kiếm chỉ với ít ký tự hơn.
Tính năng Tự động hoàn thành dựa trên phiên (Mới) cho các ứng dụng chỉ có địa chỉ
Sử dụng tính năng Tự động hoàn thành (Mới) dựa trên phiên với Place Details (Mới).
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 (Mới) vượt quá chi phí của mức giá theo phiên, nên việc triển khai tính năng Tự động hoàn thành (Mới) phải sử dụng mã thông báo phiên cho cả yêu cầu Tự động hoàn thành (Mới) và yêu cầu Chi tiết địa điểm (Mới) liên quan
theo phiên.
1
Triển khai tiện ích
Tính năng quản lý phiên được tích hợp tự động vào các tiện ích
JavaScript,
Android
hoặc iOS. Trong đó bao gồm cả yêu cầu Tự động hoàn thành (Mới) và yêu cầu Place Details (Mới) đối với 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 cần thiết.
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 (Mới).
Khi yêu cầu Place Details (Mới) về cụm từ gợi ý đã chọn, hãy thêm các tham số sau:
- Mã địa điểm từ phản hồi của tính năng Tự động hoàn thành (Mới)
- Mã thông báo phiên được dùng trong yêu cầu Tự động hoàn thành (Mới)
- Tham số
fieldschỉ định các trường chẳng hạn như địa chỉ và hình học
Cân nhắc việc trì hoãn yêu cầu Tự động hoàn thành (Mới)
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 (Mới) 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ụ: việc đưa ra yêu cầu về tính năng Tự động hoàn thành (Mới) cho mỗi 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ự rồi chọn một cụm từ gợi ý mà bạn đưa ra một yêu cầu về Geocoding API, thì tổng chi phí sẽ là 4 yêu cầu về tính năng Tự động hoàn thành (Mới) + Mã hoá địa lý.1
Nếu việc trì hoãn yêu cầu có thể giúp số yêu cầu có lập trình trung bình của bạn giảm xuống dưới 4, thì bạn có thể làm theo hướng dẫn triển khai Autocomplete (Mới) hiệu suất cao bằng Geocoding API. Xin lưu ý rằng việc trì hoãn yêu cầu có thể được người dùng coi là độ trễ, người dùng có thể muốn xem thông tin dự đoán sau mỗi lần nhấn phím mới.
Hãy cân nhắc 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 nhận được cụm từ gợi ý mà họ đang tìm kiếm với ít ký tự hơn.
-
Để biết chi phí, hãy xem bảng giá của Google Maps Platform.
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 (Mới):
- Thêm các quy định hạn chế theo quốc gia, thiên vị vị trí và (đối với việc triển khai có lập trình) ngôn ngữ ưu tiên cho việc triển khai Tính năng tự động hoàn thành (Mới). Bạn không cần đặt ngôn ngữ ưu tiên cho các tiện ích vì các tiện ích này sẽ chọn ngôn ngữ ưu tiên 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 (Mới) đi kèm với 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 (Mới), thường là do không có cụm từ gợi ý nào là địa chỉ kết quả mong muố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 thông tin đầu vào ban đầu của người dùng trong lệnh gọi đến Geocoding API.
- Nếu bạn muốn người dùng nhập cụm từ tìm kiếm cho một địa điểm cụ thể theo tên hoặc địa chỉ, hãy sử dụng yêu cầu Chi tiết địa điểm (Mới). Nếu bạn chỉ muốn nhận kết quả ở một khu vực cụ thể, hãy sử dụng tính năng thiên vị vị trí.
- Người dùng nhập địa chỉ của cơ sở phụ, chẳng hạn như địa chỉ của các căn hộ hoặc căn hộ cụ thể trong một toà nhà. Ví dụ: địa chỉ "Stroupežnického 3191/17, Praha" ở Séc sẽ trả về một cụm từ gợi ý một phần trong tính năng Tự động hoàn thành (Mới).
- Người dùng nhập địa chỉ có tiền tố đ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 ở Hawaii.
Thiên vị vị trí
Tạo độ lệch cho kết quả theo một khu vực cụ thể bằng cách truyền tham số location và tham số radius. Thao tác này hướng dẫn tính năng Tự động hoàn thành (Mới) ưu tiên hiển thị kết quả trong khu vực đã xác định. Kết quả bên ngoài khu vực đã xác định vẫn có thể xuất hiện. Bạn có thể sử dụng tham số includedRegionCodes để lọc kết quả nhằm chỉ hiển thị những địa điểm trong một quốc gia cụ thể.
Hạn chế về vị trí
Giới hạn kết quả trong một khu vực cụ thể bằng cách truyền tham số locationRestriction.
Bạn cũng có thể giới hạn kết quả ở khu vực được xác định bằng location và tham số radius bằng cách thêm tham số locationRestriction. Thao tác này hướng dẫn tính năng Tự động hoàn thành (Mới) chỉ trả về kết quả trong khu vực đó.