Places Widgets

PlaceAutocompleteElement 類別

google.maps.places.PlaceAutocompleteElement 類別

PlaceAutocompleteElement 是 HTMLElement 子類別,可提供 Places Autocomplete API 的 UI 元件。

自訂元素:
<gmp-place-autocomplete name="string" requested-language="string" requested-region="string" types="type1 type2 type3..."></gmp-place-autocomplete>

這個類別會擴充 HTMLElement

這個類別會實作 PlaceAutocompleteElementOptions

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

PlaceAutocompleteElement
PlaceAutocompleteElement(options)
參數: 
componentRestrictions
類型:  ComponentRestrictions optional
元件限制。元件限制的用途是限制系統只能預測父項元件中的項目。例如國家/地區。
locationBias
類型:  LocationBias optional
搜尋地點時要使用的軟邊界或提示。
locationRestriction
類型:  LocationRestriction optional
限制搜尋結果的範圍。
name
類型:  string optional
要用於輸入元素的名稱。詳情請參閱 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name。遵循輸入輸入名稱屬性的行為。請注意,這是在提交表單時要使用的名稱。詳情請參閱 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
HTML 屬性:
  • <gmp-placeautocomplete name="string"></gmp-placeautocomplete>
requestedLanguage
類型:  string optional
傳回結果的語言 ID (如果可以的話)。所選語言的搜尋結果也許能獲得較高排名,但建議並不限於這個語言。請參閱支援語言清單
HTML 屬性:
  • <gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>
requestedRegion
類型:  string optional
用於結果格式及篩選結果的區碼。這項設定不會限制建議在這個國家/地區顯示。區碼接受 ccTLD (「頂層網域」) 的兩位字元值多數 ccTLD 代碼與 ISO 3166-1 代碼相同,只有少數例外。舉例來說,英國的 ccTLD 是「uk」(.co.uk),但 ISO 3166-1 代碼卻是「gb」(正式的國名是「大不列顛暨北愛爾蘭聯合王國」)。
HTML 屬性:
  • <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
types
類型:  Array<string> optional
要傳回的預測結果類型。如需瞭解支援的類型,請參閱 開發人員指南。如果沒有指定類型,系統就會傳回所有類型。
HTML 屬性:
  • <gmp-place-autocomplete types="type1 type2 type3..."></gmp-place-autocomplete>
prediction-item
預測結果下拉式選單中的項目,代表單一預測。
prediction-item-icon
顯示在預測查詢字串清單中每個項目左側的圖示。
prediction-item-main-text
預測項目的一部分,是預測結果的主要文字。就地理位置而言,這包含地方資訊名稱 (例如「Sydney」) 或街道名稱及門牌號碼 (例如「10 King Street」)。根據預設,Predict-item-main-text 會顯示黑色。如果預測項目中有任何額外文字,則不在預測項目內,且會從預測項目沿用其樣式。在預設情況下會以灰色顯示。這組額外文字通常是地址。
prediction-item-match
傳回的預測查詢字串中,與使用者輸入文字相符的部分。根據預設,這組相符文字會以粗體字標示。請注意,相符文字可能會在預測項目內的任何位置,不一定是 Predict-item-main-text 的一部分。
prediction-item-selected
使用者透過鍵盤前往的項目。注意:所選項目都會受到這個元件樣式和預測項目部分的樣式影響。
prediction-list
包含「地方資訊自動完成」服務所傳回預測查詢字串清單的視覺元素。這份清單會以下拉式清單的形式,顯示在 PlaceAutocompleteElement 下方。
BetaaddEventListener
addEventListener(type, listener[, options])
參數: 
  • typestring 這是區分大小寫的字串,代表要監聽的事件類型。
  • listenerEventListener|EventListenerObject 接收通知的物件。這必須是內含 handleEvent 方法的函式或物件
  • optionsboolean|AddEventListenerOptions optional 查看選項。自訂事件僅支援 capturepassive
傳回值:  void
設定會在指定事件傳送至目標時呼叫的函式。詳情請參閱 addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
參數: 
傳回值:  void
從目標中移除先前使用 addEventListener 註冊的事件監聽器。詳情請參閱「removeEventListener
gmp-placeselect
function(placeAutocompletePlaceSelectEvent)
引數: 
使用者選取地點預測結果時,會觸發此事件。此屬性包含 Place 物件。
gmp-requesterror
function(placeAutocompleteRequestErrorEvent)
引數: 
向後端發出的要求遭拒 (例如錯誤的 API 金鑰) 時,會觸發此事件。這場活動不會以對話框形式顯示。

PlaceAutocompleteElementOptions 介面

google.maps.places.PlaceAutocompleteElementOptions 介面

建構 PlaceAutocompleteElement 的選項。

componentRestrictions optional
類型:  ComponentRestrictions optional
locationBias optional
類型:  LocationBias optional
locationRestriction optional
類型:  LocationRestriction optional
requestedLanguage optional
類型:  string optional
requestedRegion optional
類型:  string optional
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 中的程式庫

Betaplace
類型:  Place

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)
參數: 
  • fieldsArray<string> optional
傳回值:
設定成功擷取詳細資料時,要在詳細資料回應中納入「地點」的欄位。如需欄位清單,請參閱 PlaceResult
setOptions
setOptions(options)
參數: 
傳回值:
setTypes
setTypes(types)
參數: 
  • typesArray<string> optional 要包含的預測類型。
傳回值:
設定要傳回的預測結果類型。如需瞭解支援的類型,請參閱 開發人員指南。如果沒有指定類型,系統就會傳回所有類型。
沿用: 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、type 和 name 欄位,以及由 Autocomplete 服務傳回的 place_id、type 和 description。預設為停用。
strictBounds optional
類型:  boolean optional
布林值,表示自動完成小工具只能傳回查詢發出時,自動完成小工具邊界內的地點。將 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)
參數: 
傳回值:
設定自訂預測查詢所使用的區域。結果只會優先顯示在此區域,而不會完全只限於該區域。
沿用: addListenerbindTogetnotifysetsetValuesunbindunbindAll
places_changed
function()
引數:
使用者選取查詢時,會觸發此事件,應使用 getPlaces 取得新地點。

SearchBoxOptions 介面

google.maps.places.SearchBoxOptions 介面

可為 SearchBox 物件設定的選項。

bounds optional
類型:  LatLngBounds|LatLngBoundsLiteral optional
查詢預測結果自訂調整依據的區域。預測作業可能會優先 (但不限於) 指定這些邊界的查詢。