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])
参数： 
  • type：string一个区分大小写的字符串，表示要监听的事件类型。
  • listener：EventListener|EventListenerObject接收通知的对象。此参数必须是具有 handleEvent 方法的函数或对象
  • options：boolean|AddEventListenerOptions optional请参阅选项。自定义事件仅支持 capture 和 passive。
返回值：  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
查看PlaceAutocompleteElement.componentRestrictions
locationBias optional
类型：  LocationBias optional
查看PlaceAutocompleteElement.locationBias
locationRestriction optional
类型：  LocationRestriction optional
查看PlaceAutocompleteElement.locationRestriction
requestedLanguage optional
类型：  string optional
查看PlaceAutocompleteElement.requestedLanguage
requestedRegion optional
类型：  string optional
查看PlaceAutocompleteElement.requestedRegion
types optional
类型：  Array<string> optional
查看PlaceAutocompleteElement.types

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 中的库。

PlaceDetailsElement 类

google.maps.places.PlaceDetailsElement 类

用于显示地点详细信息的 HTML 元素。使用 configureFromPlace() 或 configureFromLocation() 方法指定要呈现的内容。如需使用地点详情元素，请在 Google Cloud 控制台中为您的项目启用 Places UI Kit API。

自定义元素：
<gmp-place-details size="small"></gmp-place-details>

此类扩展了 HTMLElement。

此类实现了 PlaceDetailsElementOptions。

通过调用 const {PlaceDetailsElement} = await google.maps.importLibrary("places") 进行访问。请参阅 Maps JavaScript API 中的库。
PlaceDetailsElement
PlaceDetailsElement([options])
参数： 
place
类型：  Place optional
只读。一个 Place 对象，其中包含当前渲染的地点的 ID、位置和视口。
size
类型：  PlaceDetailsSize optional
PlaceDetailsElement 的尺寸变体。默认情况下，该元素将显示 PlaceDetailsSize.X_LARGE。
HTML 属性：
  • <gmp-place-details size="small"></gmp-place-details>
  • <gmp-place-details size="medium"></gmp-place-details>
  • <gmp-place-details size="large"></gmp-place-details>
  • <gmp-place-details size="x-large"></gmp-place-details>
BetaaddEventListener
addEventListener(type, listener[, options])
参数： 
  • type：string一个区分大小写的字符串，表示要监听的事件类型。
  • listener：EventListener|EventListenerObject接收通知的对象。此参数必须是具有 handleEvent 方法的函数或对象
  • options：boolean|AddEventListenerOptions optional请参阅选项。自定义事件仅支持 capture 和 passive。
返回值：  void
设置一个函数，以便在有指定事件传送到目标时调用该函数。请参阅 addEventListener
configureFromLocation
configureFromLocation(location)
参数： 
返回值：  Promise<void> 一个 Promise，在加载和呈现地点数据后解析。
使用反向地理编码从 LatLng 配置微件。
configureFromPlace
configureFromPlace(place)
参数： 
  • place：Place|{id:string}要为其呈现详情的容器。
返回值：  Promise<void> 一个 Promise，在加载和呈现地点数据后解析。
通过 Place 对象或地点 ID 配置微件。
BetaremoveEventListener
removeEventListener(type, listener[, options])
参数： 
返回值：  void
从目标中移除之前使用 addEventListener 注册的事件监听器。请参阅 removeEventListener
gmp-load
function(event)
参数： 
当元素加载并呈现其内容时，系统会触发此事件。此事件不会向上传递。
gmp-requesterror
function(event)
参数： 
当对后端的请求被拒绝（例如 API 密钥不正确）时，系统会触发此事件。此事件不会向上传递。

PlaceDetailsElementOptions 接口

google.maps.places.PlaceDetailsElementOptions 接口

PlaceDetailsElement 的选项。
size optional
类型：  PlaceDetailsSize optional
查看PlaceDetailsElement.size

PlaceDetailsSize 常量

google.maps.places.PlaceDetailsSize 常量

PlaceDetailsElement 的尺寸款式/规格。

通过调用 const {PlaceDetailsSize} = await google.maps.importLibrary("places") 进行访问。请参阅 Maps JavaScript API 中的库。
LARGE 大规格变体，包括大图片、基本信息和联系信息。
MEDIUM 中等变体，包含大图片和基本信息。
SMALL 小规格变体，包含小图片和基本信息。
X_LARGE 超大变体，包含照片拼接图、评价和全面的地点信息。

PlaceListElement 类

google.maps.places.PlaceListElement 类

用于在列表中显示地点搜索结果的 HTML 元素。使用 configureFromSearchByTextRequest() 或 configureFromSearchNearbyRequest() 方法指定要为哪个请求呈现结果。如需使用地点列表元素，请在 Google Cloud 控制台中为您的项目启用 Places UI Kit API。

自定义元素：
<gmp-place-list selectable></gmp-place-list>

此类扩展了 HTMLElement。

此类实现了 PlaceListElementOptions。

通过调用 const {PlaceListElement} = await google.maps.importLibrary("places") 进行访问。请参阅 Maps JavaScript API 中的库。
PlaceListElement
PlaceListElement([options])
参数： 
places
类型：  Array<Place>
只读。一个 Place 对象数组，其中包含当前渲染的地点的 ID、位置和视口。
selectable
类型：  boolean
列表项是否可选择。如果为 true，列表项将是点击时会分派 gmp-placeselect 事件的按钮。还支持无障碍键盘导航和选择。
HTML 属性：
  • <gmp-place-list selectable></gmp-place-list>
BetaaddEventListener
addEventListener(type, listener[, options])
参数： 
  • type：string一个区分大小写的字符串，表示要监听的事件类型。
  • listener：EventListener|EventListenerObject接收通知的对象。此参数必须是具有 handleEvent 方法的函数或对象
  • options：boolean|AddEventListenerOptions optional请参阅选项。自定义事件仅支持 capture 和 passive。
返回值：  void
设置一个函数，以便在有指定事件传送到目标时调用该函数。请参阅 addEventListener
configureFromSearchByTextRequest
configureFromSearchByTextRequest(request)
参数： 
  • request：SearchByTextRequest要为其渲染结果的请求。SearchByTextRequest 的 fields 属性不是必需的。
返回值：  Promise<void> 一个 Promise，在加载和呈现地点数据后解析。
配置微件以呈现 Places Text Search API 请求中的搜索结果。
configureFromSearchNearbyRequest
configureFromSearchNearbyRequest(request)
参数： 
  • request：SearchNearbyRequest要为其渲染结果的请求。SearchNearbyRequest 的 fields 属性不是必需的。
返回值：  Promise<void> 一个 Promise，在加载和呈现地点数据后解析。
配置微件以呈现 Places Nearby Search API 请求中的搜索结果。
BetaremoveEventListener
removeEventListener(type, listener[, options])
参数： 
返回值：  void
从目标中移除之前使用 addEventListener 注册的事件监听器。请参阅 removeEventListener
gmp-load
function(event)
参数： 
当元素加载并呈现其内容时，系统会触发此事件。此事件不会向上传递。
gmp-placeselect
function(event)
参数： 
当用户选择地点时，系统会触发此事件。包含 Place 对象和列表中所选地点的索引。
gmp-requesterror
function(event)
参数： 
当对后端的请求被拒绝（例如 API 密钥不正确）时，系统会触发此事件。此事件不会向上传递。

PlaceListElementOptions 接口

google.maps.places.PlaceListElementOptions 接口

PlaceListElement 的选项。
selectable optional
类型：  boolean optional
查看PlaceListElement.selectable

PlaceListPlaceSelectEvent 类

google.maps.places.PlaceListPlaceSelectEvent 类

当用户选择地点时，PlaceListElement 会发出此事件。

此类扩展了 Event。

通过调用 const {PlaceListPlaceSelectEvent} = await google.maps.importLibrary("places") 进行访问。请参阅 Maps JavaScript API 中的库。
index
类型：  number
所选地点的列表索引。
place
类型：  Place
一个 Place 对象，其中包含所选地点的 ID、位置和视口。

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)
参数： 
  • fields：Array<string> optional
返回值：None
设置在成功检索详细信息时要在详细信息响应中包含的地点的字段。如需查看字段列表，请参阅 PlaceResult。
setOptions
setOptions(options)
参数： 
返回值：None
setTypes
setTypes(types)
参数： 
  • types：Array<string> optional要包含的预测类型。
返回值：None
设置要返回的预测结果类型。如需了解支持的类型，请参阅 开发者指南。如果未指定任何类型，系统将返回所有类型。
继承： addListener、bindTo、get、notify、set、setValues、unbind、unbindAll
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
设置用于对查询预测进行偏向处理的区域。结果只会偏向于此区域，但不会完全局限于此区域。
继承： addListener、bindTo、get、notify、set、setValues、unbind、unbindAll
places_changed
function()
参数：None
当用户选择查询时，系统会触发此事件，getPlaces 应用于获取新地点。

SearchBoxOptions 接口

google.maps.places.SearchBoxOptions 接口

可在 SearchBox 对象上设置的选项。
bounds optional
类型：  LatLngBounds|LatLngBoundsLiteral optional
用于对查询预测进行偏向的区域。预测结果会偏向于（但不限于）定位到这些边界的查询。