Places Widgets

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
要顯示自動完成功能的輸入元素。
繼承: componentRestrictionslocationBiaslocationRestrictionrequestedLanguagerequestedRegiontypes
BetaaddEventListener
addEventListener(type, listener[, options])
參數: 
  • typestring (區分大小寫) 的字串,代表要監聽的事件類型。
  • listenerEventListener|EventListenerObject接收通知的物件。這必須是函式或含有 processEvent 方法的物件
  • optionsboolean|AddEventListenerOptions optional請參閱選項。自訂事件僅支援 capturepassive
傳回值:  void
設定函式,當指定事件傳送至目標時,就會呼叫函式。請參閱 addEventListener
BetaremoveEventListener
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 (如有)。所選語言的搜尋結果可能會取得較高的排名,但 Google 僅針對這種語言提供建議。請參閱支援語言清單
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 中的程式庫

Alphaplace
類型:  Place

PlaceAutocompleteRequestErrorEvent 類別

google.maps.places.PlaceAutocompleteRequestErrorEvent 類別

當網路要求發生問題時,PlaceAutocompleteElement 會發出這個事件。

這個類別會擴充 Event

呼叫 const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places") 即可存取。請參閱 Maps JavaScript API 中的程式庫

Autocomplete 類別

google.maps.places.Autocomplete 類別

這個小工具可根據使用者輸入文字提供地點預測結果。這個模組會附加至 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使用者選取的地點。
如果詳細資料擷取成功,傳回使用者所選地點的詳細資料。否則會傳回虛設常式地點物件,並將 name 屬性設為輸入欄位的目前值。
setBounds
setBounds(bounds)
參數: 
傳回值:None
設定要傳回「地點」結果的偏好區域。結果可能會優先 (但不限於) 這個地區。
setComponentRestrictions
setComponentRestrictions(restrictions)
參數: 
傳回值:None
設定元件限制。元件限制是用來將預測結果限制在父項元件中。例如國家/地區。
setFields
setFields(fields)
參數: 
  • fieldsArray<string> optional
傳回值:None
設定成功擷取詳細資料時,要在詳細資料回應中納入「地點」的欄位。如需欄位清單,請參閱 PlaceResult
setOptions
setOptions(options)
參數: 
傳回值:None
setTypes
setTypes(types)
參數: 
  • typesArray<string> optional要納入的預測類型。
傳回值:None
設定要傳回的預測結果類型。如要瞭解支援的類型,請參閱 開發人員指南。如果沒有指定類型,就會傳回所有類型。
繼承: addListenerbindTogetnotifysetsetValuesunbindunbindAll
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']
placeIdOnly optional
類型:  boolean optional
是否僅擷取地點 ID。觸發 place_changed 事件時提供的 PlaceResult 只會包含 place_id、類型和名稱欄位,其中 place_id、類型和說明則由自動完成服務傳回。預設為停用。
strictBounds optional
類型:  boolean optional
布林值,表示「自動完成」小工具只會在查詢傳送時,傳回位於 Autocomplete 小工具範圍內的地點。如果將 strictBounds 設為 false (預設值),結果會優先 (但不限於) 顯示邊界內的地點。
types optional
類型:  Array<string> optional
要傳回的預測結果類型。如要瞭解支援的類型,請參閱 開發人員指南。如果沒有指定類型,就會傳回所有類型。

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)
參數: 
傳回值:None
設定自訂調整查詢預測結果的區域。結果只會偏向在這個領域,不會完全受限。
繼承: addListenerbindTogetnotifysetsetValuesunbindunbindAll
places_changed
function()
引數:
使用者選取查詢時,會觸發這個事件,getPlaces 應用於取得新地點。

SearchBoxOptions 介面

google.maps.places.SearchBoxOptions 介面

可設定在 SearchBox 物件上的選項。

bounds optional
類型:  LatLngBounds|LatLngBoundsLiteral optional
查詢預測結果偏誤的範圍。預測功能可能會優先 (但不限於) 指定這些邊界的查詢。