Places Widgets

PlaceAutocompleteElement

google.maps.places.PlaceAutocompleteElement

PlaceAutocompleteElement 是 HTMLElement 的子类,可为 Places Autocomplete API 提供界面组件。

自定义元素:
<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。与输入的 name 属性具有相同的行为。请注意,这是提交表单时使用的名称。如需了解详情,请参阅 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
HTML 属性
  • <gmp-placeautocomplete name="string"></gmp-placeautocomplete>
requestedLanguage
类型:  string optional
应返回结果的语言(如果可能)的语言标识符。系统可能会将以所选语言显示的结果排名更高,但建议并不局限于此语言。请参阅支持的语言列表
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
prediction-item 的一部分,即预测的主要文本。对地理位置而言,它会包含地点名称(如“上海”)或街道名称和编号(如“长安大街3号”)。默认情况下,prediction-item-main-text 为黑色。如果 prediction-item 中有任何附加文本,该文本将位于 prediction-item-main-text 之外,并且继承 prediction-item 的样式。默认情况下,此类文本会显示为灰色。附加文本通常是地址。
prediction-item-match
返回的联想查询的一部分,其于用户输入相匹配。默认情况下,该匹配文本以粗体突出显示。请注意,匹配的文本可能位于 prediction-item 中的任何位置。它不一定是 prediction-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)
参数: 
当用户选择地点预测结果时,系统会触发此事件。包含地点对象。
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

此事件会在用户使用地点自动补全元素选择地点后创建。使用 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

此微件可根据用户输入的文本提供地点预测结果。它会附加到类型为 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()
参数:None
当用户选择的地点有 PlaceResult 可用时,系统会触发此事件。
如果用户输入的不是控件建议的地点名称,并按下 Enter 键,或者地点详情请求失败,则 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、types 和 name 字段,其中 place_id、types 和 description 由自动补全服务返回。默认情况下,该环境处于停用状态。
strictBounds optional
类型:  boolean optional
一个布尔值,表示自动补全 widget 应仅返回在发送查询时位于自动补全 widget 边界内的地点。将 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()
参数:None
当用户选择查询时,系统会触发此事件,getPlaces 应用于获取新地点。

SearchBoxOptions 接口

google.maps.places.SearchBoxOptions 接口

可在 SearchBox 对象上设置的选项。

bounds optional
类型:  LatLngBounds|LatLngBoundsLiteral optional
用于对查询预测进行偏向的区域。预测结果会偏向于(但不限于)定位到这些边界的查询。