Place Autocomplete 小工具會建立文字輸入欄位、在 UI 選單中提供地點預測結果，以及傳回 Place Details 以回應使用者選取。使用 Place Autocomplete 小工具，在網頁中嵌入完整的獨立式自動完成使用者介面。
必要條件
如要使用 Place Autocomplete，請務必在 Google Cloud 專案中啟用「Places API (新版)」。詳情請參閱「開始使用」一文。
最新資訊
Place Autocomplete 包含下列改善項目：
- Autocomplete 小工具 UI 支援區域本地化 (包括 RTL 語言)，適用於文字輸入預留位置、預測結果清單標誌和地點預測結果。
- 進階無障礙功能，包括支援螢幕閱讀器和鍵盤互動。
- Autocomplete 小工具會傳回新的 Place 類別，簡化回傳物件的處理流程。
- 更有效地支援行動裝置和小螢幕。
- 更出色的效能，更清楚的圖形外觀。
新增 Autocomplete 小工具
Autocomplete 小工具會建立文字輸入欄位、在 UI 選單中提供地點預測結果，以及透過 gmp-select 事件監聽器傳回 Place Details 以回應使用者點擊。本節將說明如何在網頁或 Google 地圖中加入 Autocomplete 小工具。
在網頁中加入 Autocomplete 小工具
如要在網頁中加入 Autocomplete 小工具，請建立新的 google.maps.places.PlaceAutocompleteElement，然後附加至網頁，如以下範例所示：
TypeScript
// Request needed libraries. (await google.maps.importLibrary('places')) as google.maps.PlacesLibrary; // Create the input HTML element, and append it. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement( {} ); document.body.appendChild(placeAutocomplete);
JavaScript
// Request needed libraries. (await google.maps.importLibrary('places')); // Create the input HTML element, and append it. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({}); document.body.appendChild(placeAutocomplete);
在地圖中加入 Autocomplete 小工具
如果帳單地址位於歐洲經濟區 (EEA) 以外，您也可以搭配 Google 地圖使用 Autocomplete 小工具。
如要在地圖中加入 Autocomplete 小工具，請建立新的 google.maps.places.PlaceAutocompleteElement 執行個體，再將 PlaceAutocompleteElement 附加至 div，然後推送至地圖做為自訂控制項，如以下範例所示：
TypeScript
// Get the inner map. innerMap = mapElement.innerMap; innerMap.setOptions({ mapTypeControl: false, }); // 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(); });
JavaScript
// Get the inner map. innerMap = mapElement.innerMap; innerMap.setOptions({ mapTypeControl: false, }); // 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(); });
限制 Autocomplete 預測結果
根據預設，Place Autocomplete 會顯示所有地點類型 (優先顯示使用者所在位置附近的預測結果)，並擷取使用者所選地點的所有可用資料欄位。您可以限制或自訂調整結果，將 PlaceAutocompleteElementOptions 設為顯示更相關的預測結果。
限制結果後，Autocomplete 小工具會略過超出限制區域的所有結果。常見做法是將結果限制在地圖範圍內。自訂調整結果會讓 Autocomplete 小工具顯示指定區域內的結果，但有些相符項目可能會超出這個區域。
如未提供任何邊界或地圖可視區域，API 就會嘗試根據使用者的 IP 位址偵測所在位置，然後針對該位置調整結果。請盡可能設定邊界，否則不同使用者可能會收到不同的預測結果。此外，為了改善整體預測結果，請務必提供合理的可視區域，例如您透過平移或縮放地圖設定的可視區域，或是開發人員根據裝置位置和半徑設定的可視區域。如果沒有設定半徑，系統會將 5 公里視為 Place Autocomplete 的合理預設值。請勿將可視區域設為下列值：半徑為零 (單一點)、範圍僅有幾公尺 (小於 100 公尺)，或是橫跨全球。
按國家/地區限制 Place Search
如要將 Place Search 限制在一或多個特定國家/地區，請使用 includedRegionCodes 屬性指定國家/地區代碼，如以下程式碼片段所示：
const pac = new google.maps.places.PlaceAutocompleteElement({ includedRegionCodes: ['us', 'au'], });
將 Place Search 限制在地圖範圍內
如要將 Place Search 限制在地圖邊界內，請使用 locationRestrictions 屬性新增邊界，如以下程式碼片段所示：
const pac = new google.maps.places.PlaceAutocompleteElement({ locationRestriction: map.getBounds(), });
限制地圖範圍時，請務必新增事件監聽器，在範圍變更時加以更新：
map.addListener('bounds_changed', () => { autocomplete.locationRestriction = map.getBounds(); });
如要移除 locationRestriction，請設為 null。
自訂調整 Place Search 結果
使用 locationBias 屬性並傳遞半徑，將 Place Search 結果自訂調整為僅限某個圓形區域，如下所示：
const autocomplete = new google.maps.places.PlaceAutocompleteElement({ locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}}, });
如要移除 locationBias，請設為 null。
將 Place Search 結果限制為特定類型
使用 includedPrimaryTypes 屬性並指定一或多個類型，將 Place Search 結果限制為特定類型的地點，如下所示：
const autocomplete = new google.maps.places.PlaceAutocompleteElement({ includedPrimaryTypes: ['establishment'], });
如需支援類型的完整清單，請參閱「地點類型表 A 和 B」。
取得 Place Details
如要取得所選地點的 Place Details，請在 PlaceAutocompleteElement 中加入 gmp-select 事件監聽器，如以下範例所示：
TypeScript
// Add the gmp-placeselect listener, and display the results. //prettier-ignore //@ts-ignore 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); });
JavaScript
// Add the gmp-placeselect listener, and display the results. //prettier-ignore //@ts-ignore 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); });
在上例中，事件監聽器會傳回 Place 類別的物件。呼叫 place.fetchFields() 即可取得應用程式所需的 Place Details 資料欄位。
下例中的事件監聽器會要求地點資訊，並將這項資訊顯示在地圖上。
TypeScript
// Add the gmp-placeselect listener, and display the results on the map. //prettier-ignore //@ts-ignore placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'], }); // 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); } let content = document.createElement('div'); let nameText = document.createElement('span'); nameText.textContent = place.displayName; content.appendChild(nameText); content.appendChild(document.createElement('br')); let addressText = document.createElement('span'); addressText.textContent = place.formattedAddress; content.appendChild(addressText); updateInfoWindow(content, place.location); marker.position = place.location; } );
JavaScript
// Add the gmp-placeselect listener, and display the results on the map. //prettier-ignore //@ts-ignore placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'], }); // 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); } let content = document.createElement('div'); let nameText = document.createElement('span'); nameText.textContent = place.displayName; content.appendChild(nameText); content.appendChild(document.createElement('br')); let addressText = document.createElement('span'); addressText.textContent = place.formattedAddress; content.appendChild(addressText); updateInfoWindow(content, place.location); marker.position = place.location; });
地圖範例
本節包含本頁上地圖範例的完整程式碼。
Autocomplete 元素
本例會在網頁中加入 Autocomplete 小工具，並顯示各個所選地點的結果。
TypeScript
async function initMap(): Promise<void> { // Request needed libraries. (await google.maps.importLibrary('places')) as google.maps.PlacesLibrary; // Create the input HTML element, and append it. const placeAutocomplete = new google.maps.places.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-placeselect listener, and display the results. //prettier-ignore //@ts-ignore 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); }); } initMap();
JavaScript
async function initMap() { // Request needed libraries. (await google.maps.importLibrary('places')); // Create the input HTML element, and append it. const placeAutocomplete = new google.maps.places.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-placeselect listener, and display the results. //prettier-ignore //@ts-ignore 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); }); } initMap();
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>
</head>
<body>
<p style="font-family: roboto, sans-serif">Search for a place here:</p>
<!-- prettier-ignore -->
<script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
</body>
</html>試用範例
Autocomplete 地圖
本例顯示如何在 Google 地圖中加入 Autocomplete 小工具。
TypeScript
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; const placeAutocomplete = document.querySelector( 'gmp-place-autocomplete' ) as google.maps.places.PlaceAutocompleteElement; let innerMap; let marker: google.maps.marker.AdvancedMarkerElement; let infoWindow: google.maps.InfoWindow; let center = { lat: 40.749933, lng: -73.98633 }; // New York City async function initMap(): Promise<void> { // Request needed libraries. const [] = await Promise.all([ google.maps.importLibrary('marker'), 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. google.maps.event.addListener(innerMap, 'bounds_changed', async () => { placeAutocomplete.locationRestriction = innerMap.getBounds(); }); // Create the marker and infowindow. marker = new google.maps.marker.AdvancedMarkerElement({ map: innerMap, }); infoWindow = new google.maps.InfoWindow({}); // Add the gmp-placeselect listener, and display the results on the map. //prettier-ignore //@ts-ignore placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'], }); // 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); } let content = document.createElement('div'); let nameText = document.createElement('span'); nameText.textContent = place.displayName; content.appendChild(nameText); content.appendChild(document.createElement('br')); let addressText = document.createElement('span'); addressText.textContent = place.formattedAddress; 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, }); } initMap();
JavaScript
const mapElement = document.querySelector('gmp-map'); const placeAutocomplete = document.querySelector('gmp-place-autocomplete'); let innerMap; let marker; let infoWindow; let center = { lat: 40.749933, lng: -73.98633 }; // New York City async function initMap() { // Request needed libraries. const [] = await Promise.all([ google.maps.importLibrary('marker'), 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. google.maps.event.addListener(innerMap, 'bounds_changed', async () => { placeAutocomplete.locationRestriction = innerMap.getBounds(); }); // Create the marker and infowindow. marker = new google.maps.marker.AdvancedMarkerElement({ map: innerMap, }); infoWindow = new google.maps.InfoWindow({}); // Add the gmp-placeselect listener, and display the results on the map. //prettier-ignore //@ts-ignore placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'], }); // 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); } let content = document.createElement('div'); let nameText = document.createElement('span'); nameText.textContent = place.displayName; content.appendChild(nameText); content.appendChild(document.createElement('br')); let addressText = document.createElement('span'); addressText.textContent = place.formattedAddress; 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, }); } initMap();
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: large; font-weight: bold; } 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>
<!-- prettier-ignore -->
<script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</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">
<p>Search for a place here:</p>
<gmp-place-autocomplete></gmp-place-autocomplete>
</div>
</gmp-map>
</body>
</html>試用範例
Autocomplete (新版) 最佳化
本節將說明最佳做法，協助您充分運用 Autocomplete (New) 服務。
以下列出幾項一般準則：
- 如要開發有效的使用者介面，最快的方法就是使用 Maps JavaScript API Autocomplete (New) 小工具、 Places SDK for Android Autocomplete (New) 小工具， 或 Places SDK for iOS Autocomplete (New) 小工具。
- 從一開始就瞭解 Autocomplete (新版) 的必要資料欄位。
- 「位置自訂調整」和「位置限制」為自選欄位，但可能會對自動完成效能產生重大影響。
- 使用錯誤處理機制，可以減輕 API 傳回錯誤時對應用程式效能造成的影響。
- 確保應用程式能處理未選取任何項目的情況，以便使用者繼續操作。
費用最佳化最佳做法
基本費用最佳化
為了讓 Autocomplete (New) 服務費用發揮最大效益，請使用 Place Details (New) 和 Autocomplete (New) 小工具中的欄位遮罩，只傳回所需的 Autocomplete (New) 資料欄位。
進階費用最佳化
建議您透過程式輔助方式導入 Autocomplete (New)，採用SKU：Autocomplete Request 計價，並要求已選地點 (而非 Place Details (New)) 的相關 Geocoding API 結果。如果同時符合以下兩項條件，搭配 Geocoding API 使用「按要求」計價會比使用「按工作階段」(以工作階段為準) 計價更具成本效益：
- 如果您只需要針對使用者選取的地點取得經緯度或地址，透過 Geocoding API 擷取這項資訊，支付的費用會比使用 Place Details (New) 呼叫更低。
- 如果使用者在平均四次以內的自動預測結果要求選取了自動預測結果，則「按要求」計價可能會比「按工作階段」計價更符合成本效益。
除了所選預測結果的地址和經緯度，應用程式是否需要任何其他資訊？
是，需要更多詳細資料
搭配 Place Details (新版) 使用以工作階段為準的 Autocomplete (新版)。
由於應用程式需要地點詳細資料 (新版)，例如地點名稱、商家狀態或營業時間，因此實作 Autocomplete (新版) 時，應使用JavaScript、Android 或 iOS 小工具中內建的每個工作階段工作階段符記，以及適用的 Places SKU，具體取決於您要求哪些地點資料欄位。1
透過小工具導入
JavaScript、Android 或 iOS 小工具自動內建工作階段管理功能，其中包含對已選取的預測結果提出的 Autocomplete (新版) 要求和 Place Details (新版) 要求。請務必指定 fields 參數，確保只要求所需的
Autocomplete (New) 資料欄位
。
透過程式輔助方式導入
搭配 Autocomplete (New) 要求使用工作階段符記。要求所選預測結果的相關 Place Details (新版) 時，請加入下列參數：
- Autocomplete (新版) 回應中的地點 ID
- Autocomplete (New) 要求中使用的工作階段符記
- 指定所需 Autocomplete (新版) 資料欄位的
fields參數
否，只需要地址和位置資訊
對您的應用程式而言，Geocoding API 可能比 Place Details (New) 更符合成本效益，視 Autocomplete (New) 使用效能而定。每個應用程式的自動完成 (新版) 效率各不相同，可能取決於使用者輸入的內容、使用應用程式的位置，以及是否採用效能最佳化最佳做法。
為了找出以下問題的解答，請分析使用者在應用程式中選取 Autocomplete (New) 預測結果前，平均輸入的字元數量。
使用者是否會在平均四次以內的要求中選取 Autocomplete (New) 預測結果？
是
透過程式輔助方式導入 Autocomplete (New)，但不使用工作階段符記，並針對已選取的地點預測結果呼叫 Geocoding API。
Geocoding API 提供地址和經緯度座標。
提出四次自動完成要求，加上所選地點預測結果的相關 Geocoding API 呼叫，總費用會低於自動完成 (新版) 功能「按工作階段」計價的每個工作階段費用1。
建議您採用效能最佳做法，讓使用者以更少的字元找到需要的預測結果。
否
搭配 Place Details (新版) 使用以工作階段為準的 Autocomplete (新版)。
由於您預期在使用者選取 Autocomplete (新版) 預測結果前，平均會發出超過「按工作階段」計價費用的要求，因此 Autocomplete (新版) 的實作應針對 Autocomplete (新版) 要求和相關聯的 Place Details (新版) 要求，使用按工作階段計價的工作階段符記。
1
透過小工具導入
JavaScript、Android 或 iOS 小工具自動內建工作階段管理功能，其中包含對已選取的預測結果提出的 Autocomplete (新版) 要求和 Place Details (新版) 要求。請務必指定 fields 參數，確保只要求所需的欄位。
透過程式輔助方式導入
搭配 Autocomplete (New) 要求使用工作階段符記。要求所選預測結果的相關 Place Details (新版) 時，請加入下列參數：
- Autocomplete (新版) 回應中的地點 ID
- Autocomplete (New) 要求中使用的工作階段符記
- 指定地址和幾何圖形等欄位的
fields參數
考慮延後 Autocomplete (New) 要求
您可以運用一些策略，例如將 Autocomplete (New) 要求延後到使用者輸入三或四個字元時再開始，藉此減少應用程式提出要求數量。舉例來說，如果使用者輸入第三個字元後，您為每個字元提出自動完成 (新版) 要求，則使用者輸入七個字元並選取預測結果後，您提出一次 Geocoding API 要求，總費用會是 4 次自動完成 (新版) 要求 + Geocoding。1
如果延後要求可以讓平均程式輔助要求少於四次，您可以按照使用 Geocoding API 提高 Autocomplete (New) 效能的指南操作。請注意，如果使用者希望每輸入一個字就能看到預測結果，可能就會將延後要求視為時間上的延遲。
建議您採用效能最佳做法，讓使用者以更少的字元找到需要的預測結果。
-
如要瞭解費用，請參閱 Google 地圖平台價目表。
效能最佳做法
以下準則說明如何將 Autocomplete (新版) 效能最佳化：
- 針對導入的 Autocomplete (New) 加入國家/地區限制、位置自訂調整和 (適用於程式輔助導入) 語言偏好設定。小工具會從使用者的瀏覽器或行動裝置選擇語言偏好設定，因此不需要設定語言偏好。
- 如果 Autocomplete (New) 附帶地圖，您就可以根據地圖可視區域進行位置自訂調整。
- 如果使用者沒有選擇任何自動完成 (新版) 預測結果 (通常是因為這些預測結果並非他們想要的地址)，您可以重複使用原始使用者輸入內容，嘗試取得更相關的結果：
- 如果您預期使用者只會輸入地址資訊，請在 Geocoding API 呼叫中重複使用原始使用者輸入內容。
- 如果您預期使用者會依名稱或地址查詢某個地點，請使用 Place Details (New) 要求。如果希望將結果範圍限制在特定區域，請使用位置自訂調整。
- 使用者輸入子處所地址，例如建築物內特定單位或公寓的地址。例如，捷克地址「Stroupežnického 3191/17, Praha」在 Autocomplete (新版) 中會產生不完整的預測結果。
- 使用者輸入的地址含有路段前置字元，例如紐約的「23-30 29th St, Queens」或夏威夷考艾島的「47-380 Kamehameha Hwy, Kaneohe」。
位置偏誤
傳遞 location 參數和 radius 參數，針對特定區域調整結果。這會指示 Autocomplete (New) 優先顯示定義區域內的結果。不過，系統還是有可能會顯示定義區域外的結果。您可以使用 components 參數篩選結果，只顯示特定國家/地區內的地點。
限制位置
傳送 locationRestriction 參數，將結果限制在特定區域。
您也可以新增 locationRestriction 參數，將結果限制在 location 和 radius 參數定義的區域內。這會指示 Autocomplete (New) 只傳回該區域內的結果。