PlaceAutocompleteElement 類別
google.maps.places.PlaceAutocompleteElement
類別
- PlaceAutocompleteElement 是
HTMLElement
子類別,可提供 Places Autocomplete API 的 UI 元件。載入places
程式庫後,就可以在 HTML 中建立具備自動完成功能的輸入項目。例如:<gmp-placeautocomplete ></gmp-placeautocomplete>
自訂元素:
<gmp-placeautocomplete></gmp-placeautocomplete>
這個類別會擴充 HTMLElement
。
這個類別會實作 PlaceAutocompleteElementOptions
。
呼叫 const {PlaceAutocompleteElement} = await google.maps.importLibrary("places")
即可存取。請參閱 Maps JavaScript API 中的程式庫。
建構函式 | |
---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement(options) 參數:
|
屬性 | |
---|---|
inputElement |
類型:
HTMLInputElement 顯示自動完成字串的輸入元素。 |
沿用:
componentRestrictions 、locationBias 、locationRestriction 、requestedLanguage 、requestedRegion 、types
|
方法 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 參數:
傳回值:
void 設定會在指定事件傳送至目標時呼叫的函式。詳情請參閱 addEventListener |
removeEventListener |
removeEventListener(type, listener[, options]) 參數:
傳回值:
void 從目標中移除先前使用 addEventListener 註冊的事件監聽器。詳情請參閱「removeEventListener」 |
PlaceAutocompleteElementOptions 介面
google.maps.places.PlaceAutocompleteElementOptions
介面
建構 PlaceAutocompleteElement 的選項。
屬性 | |
---|---|
inputElement |
類型:
HTMLInputElement 顯示自動完成字串的輸入元素。 |
componentRestrictions optional |
類型:
ComponentRestrictions optional 元件限制。元件限制的用途是限制系統只能預測父項元件中的項目。例如國家/地區。 |
locationBias optional |
類型:
LocationBias optional 搜尋地點時要使用的軟邊界或提示。 |
locationRestriction optional |
類型:
LocationRestriction optional 限制搜尋結果的範圍。 |
requestedLanguage optional |
類型:
string optional 傳回結果的語言 ID (如果可以的話)。所選語言的搜尋結果也許能獲得較高排名,但建議並不限於這個語言。請參閱支援語言清單。 |
requestedRegion optional |
類型:
string optional 用於結果格式及篩選結果的區碼。這項設定不會限制建議在這個國家/地區顯示。區碼接受 ccTLD (「頂層網域」) 的兩位字元值多數 ccTLD 代碼與 ISO 3166-1 代碼相同,只有少數例外。舉例來說,英國的 ccTLD 是「uk」( .co.uk ),但 ISO 3166-1 代碼卻是「gb」(正式的國名是「大不列顛暨北愛爾蘭聯合王國」)。 |
types optional |
類型:
Array<string> optional 要傳回的預測結果類型。如需瞭解支援的類型,請參閱 開發人員指南。如果沒有指定類型,系統就會傳回所有類型。 |
PlaceAutocompletePlaceSelectEvent 類別
google.maps.places.PlaceAutocompletePlaceSelectEvent
類別
使用者利用 Place Autocomplete 元素選取地點後,系統就會建立此事件。使用 event.place
存取所選項目。
這個類別會擴充 Event
。
呼叫 const {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places")
即可存取。請參閱 Maps JavaScript API 中的程式庫。
PlaceAutocompleteRequestErrorEvent 類別
google.maps.places.PlaceAutocompleteRequestErrorEvent
類別
當網路要求發生問題時,PlaceAutocompleteElement 會引發這個事件。
這個類別會擴充 Event
。
呼叫 const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places")
即可存取。請參閱 Maps JavaScript API 中的程式庫。
Autocomplete 類別
google.maps.places.Autocomplete
類別
這個小工具可根據使用者輸入文字提供 Place 預測結果。此項目會附加至 text
類型的輸入元素,並監聽該欄位中的文字輸入。預測結果清單會以下拉式清單顯示,且會隨著您輸入文字更新。
這個類別會擴充 MVCObject
。
呼叫 const {Autocomplete} = await google.maps.importLibrary("places")
即可存取。請參閱 Maps JavaScript API 中的程式庫。
建構函式 | |
---|---|
Autocomplete |
Autocomplete(inputField[, opts]) 參數:
建立 Autocomplete 的新例項,這個例項會將特定選項附加到指定的輸入文字欄位。 |
方法 | |
---|---|
getBounds |
getBounds() 參數:無
傳回值:
LatLngBounds|undefined 自訂調整邊界。傳回預測遭到偏誤的界限。 |
getFields |
getFields() 參數:無
傳回值:
Array<string>|undefined 成功擷取詳細資料時,傳回詳細資料回應中要包含的地點欄位。如需欄位清單,請參閱 PlaceResult 。 |
getPlace |
getPlace() 參數:無
傳回值:
PlaceResult 使用者選取的地點。如果已成功擷取詳細資料,則傳回使用者所選取地點的詳細資料。否則會傳回虛設常式 Place 物件,並將 name 屬性設為輸入欄位目前的值。 |
setBounds |
setBounds(bounds) 參數:
傳回值:無
設定要傳回「地點」結果的偏好區域。結果可能會偏誤 (但不僅限於這個區域)。 |
setComponentRestrictions |
setComponentRestrictions(restrictions) 參數:
傳回值:無
設定元件限制。元件限制的用途是限制系統只能預測父項元件中的項目。例如國家/地區。 |
setFields |
setFields(fields) 參數:
傳回值:無
設定成功擷取詳細資料時,要在詳細資料回應中納入「地點」的欄位。如需欄位清單,請參閱 PlaceResult 。 |
setOptions |
setOptions(options) 參數:
傳回值:無
|
setTypes |
setTypes(types) 參數:
傳回值:無
設定要傳回的預測結果類型。如需瞭解支援的類型,請參閱 開發人員指南。如果沒有指定類型,系統就會傳回所有類型。 |
沿用:
addListener 、bindTo 、get 、notify 、set 、setValues 、unbind 、unbindAll
|
活動 | |
---|---|
place_changed |
function() 引數:無
使用者所選地點有 PlaceResult 時,會觸發此事件。如果使用者輸入的地點名稱不是控制項建議的地點,然後按下 Enter 鍵;如果 Place Details 要求失敗,則 PlaceResult 會納入使用者在 name 屬性中輸入的內容,而且未定義其他屬性。 |
AutocompleteOptions 介面
google.maps.places.AutocompleteOptions
介面
可為 Autocomplete
物件設定的選項。
屬性 | |
---|---|
bounds optional |
類型:
LatLngBounds|LatLngBoundsLiteral optional 要搜尋地點的區域。 |
componentRestrictions optional |
類型:
ComponentRestrictions optional 元件限制。元件限制的用途是限制系統只能預測父項元件中的項目。例如國家/地區。 |
fields optional |
類型:
Array<string> optional 成功擷取詳細資料後,要用於詳細資料回應中的「地點」欄位,而之後會收費。如果傳入 ['ALL'] ,系統會傳回所有可用的欄位並產生費用 (不建議用於實際工作環境部署作業)。如需欄位清單,請參閱 PlaceResult 。巢狀欄位可使用點路徑 (例如 "geometry.location" ) 指定。預設值為 ['ALL'] 。 |
|
類型:
boolean optional 是否只擷取地點 ID。引發 place_changed 事件時所提供的 PlaceResult 只含有 place_id、type 和 name 欄位,以及由 Autocomplete 服務傳回的 place_id、type 和 description。預設為停用。 |
strictBounds optional |
類型:
boolean optional 布林值,表示自動完成小工具只能傳回查詢發出時,自動完成小工具邊界內的地點。將 strictBounds 設為 false (預設值) 會調整結果的優先範圍 (但不限於) 邊界內的地點。 |
types optional |
類型:
Array<string> optional 要傳回的預測結果類型。如需瞭解支援的類型,請參閱 開發人員指南。如果沒有指定類型,系統就會傳回所有類型。 |
SearchBox 類別
google.maps.places.SearchBox
類別
這個小工具可根據使用者輸入文字提供查詢預測。此項目會附加至 text
類型的輸入元素,並監聽該欄位中的文字輸入。預測結果清單會以下拉式清單顯示,且會隨著您輸入文字更新。
這個類別會擴充 MVCObject
。
呼叫 const {SearchBox} = await google.maps.importLibrary("places")
即可存取。請參閱 Maps JavaScript API 中的程式庫。
建構函式 | |
---|---|
SearchBox |
SearchBox(inputField[, opts]) 參數:
建立 SearchBox 的新例項,這個例項會將特定選項附加到指定的輸入文字欄位。 |
方法 | |
---|---|
getBounds |
getBounds() 參數:無
傳回值:
LatLngBounds|undefined 傳回查詢預測偏誤的範圍。 |
getPlaces |
getPlaces() 參數:無
傳回值:
Array<PlaceResult>|undefined 傳回使用者選取的查詢,以便與 places_changed 事件搭配使用。 |
setBounds |
setBounds(bounds) 參數:
傳回值:無
設定自訂預測查詢所使用的區域。結果只會優先顯示在此區域,而不會完全只限於該區域。 |
沿用:
addListener 、bindTo 、get 、notify 、set 、setValues 、unbind 、unbindAll
|
活動 | |
---|---|
places_changed |
function() 引數:無
使用者選取查詢時,會觸發此事件,應使用 getPlaces 取得新地點。 |
SearchBoxOptions 介面
google.maps.places.SearchBoxOptions
介面
可為 SearchBox
物件設定的選項。
屬性 | |
---|---|
bounds optional |
類型:
LatLngBounds|LatLngBoundsLiteral optional 查詢預測結果自訂調整依據的區域。預測作業可能會優先 (但不限於) 指定這些邊界的查詢。 |