Places Widgets

PlaceAutocompleteElement 类

google.maps.places.PlaceAutocompleteElement 类

PlaceAutocompleteElement 是一个 HTMLElement 子类，可为 Places Autocomplete API 提供界面组件。

自定义元素：
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng|lat,lng,altitude" requested-language="string" requested-region="string" unit-system="metric|imperial" types="type1 type2 type3..."></gmp-place-autocomplete>

此类扩展了 HTMLElement。

此类实现了 PlaceAutocompleteElementOptions。

通过调用 const {PlaceAutocompleteElement} = await google.maps.importLibrary("places") 进行访问。
请参阅 Maps JavaScript API 中的库。
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
参数： 
AlphaincludedPrimaryTypes
类型：  Array<string> optional
包含主要地点类型（例如“restaurant”或“gas_station”）。

仅当某个地点的主要类型包含在此列表中时，才会返回该地点。最多可以指定 5 个值。如果未指定任何类型，系统将返回所有地点类型。
HTML 属性：
  • <gmp-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-place-autocomplete>
AlphaincludedRegionCodes
类型：  Array<string> optional
仅包含指定地区的结果，最多可指定 15 个 CLDR 双字符地区代码。空集不会限制结果。如果同时设置了 locationRestriction 和 includedRegionCodes，结果将位于交集区域。
HTML 属性：
  • <gmp-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-place-autocomplete>
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-place-autocomplete name="string"></gmp-place-autocomplete>
Alphaorigin
用于计算距离的起点。如果未指定，则不计算距离。如果提供了海拔高度，则不会将其用于计算。
HTML 属性：
  • <gmp-place-autocomplete origin="lat,lng|lat,lng,altitude"></gmp-place-autocomplete>
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>
AlphaunitSystem
类型：  UnitSystem optional
用于显示距离的单位制。如果未指定，则单位制由 requestedRegion 确定。
HTML 属性：
  • <gmp-place-autocomplete unit-system="metric|imperial"></gmp-place-autocomplete>
BetacomponentRestrictions
类型：  ComponentRestrictions optional
组件限制。组件限制用于将预测限制为仅在父组件内进行。例如，国家/地区。
Betatypes
类型：  Array<string> optional
要返回的预测类型。如需了解支持的类型，请参阅 开发者指南。如果未指定任何类型，系统将返回所有类型。
HTML 属性：
  • <gmp-place-autocomplete types="type1 type2 type3..."></gmp-place-autocomplete>
prediction-item
预测下拉菜单中的项，表示单个预测结果。
prediction-item-icon
预测项列表中显示在每个项目左侧的图标。
prediction-item-main-text
预测项的一部分，是预测结果的主要文本。对地理位置而言，它会包含地点名称（如“上海”）或街道名称和编号（如“长安大街3号”）。默认情况下，prediction-item-main-text 显示为黑色。如果预测项中有任何附加文本，该文本将位于 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-error
function(errorEvent)
实参： 
当对后端的请求被拒绝时（例如，API 密钥不正确），系统会触发此事件。此事件不会冒泡。
gmp-select
function(placePredictionSelectEvent)
实参： 
当用户选择地点预测结果时，系统会触发此事件。包含可转换为 Place 对象的 PlacePrediction 对象。
gmp-placeselect
function(placeAutocompletePlaceSelectEvent)
实参： 
当用户选择地点预测结果时，系统会触发此事件。包含 Place 对象。

PlaceAutocompleteElementOptions 接口

google.maps.places.PlaceAutocompleteElementOptions 接口

用于构建 PlaceAutocompleteElement 的选项。如需了解每个属性的说明，请参阅 PlaceAutocompleteElement 类中同名的属性。
BetacomponentRestrictions optional
类型：  ComponentRestrictions optional
AlphaincludedPrimaryTypes optional
类型：  Array<string> optional
AlphaincludedRegionCodes optional
类型：  Array<string> optional
locationBias optional
类型：  LocationBias optional
locationRestriction optional
类型：  LocationRestriction optional
name optional
类型：  string optional
Alphaorigin optional
requestedLanguage optional
类型：  string optional
Betatypes optional
类型：  Array<string> optional
AlphaunitSystem optional
类型：  UnitSystem optional

PlaceAutocompletePlaceSelectEvent 类

google.maps.places.PlaceAutocompletePlaceSelectEvent 类

此事件是在用户通过地点自动补全元素选择地点后创建的。使用 event.place 访问所选内容。

此类扩展了 Event。

通过调用 const {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places") 进行访问。
请参阅 Maps JavaScript API 中的库。
Betaplace
类型：  Place

PlacePredictionSelectEvent 类

google.maps.places.PlacePredictionSelectEvent 类

此事件是在用户使用 PlaceAutocompleteElement 选择预测项后创建的。使用 event.placePrediction 访问所选内容。

此类扩展了 Event。

通过调用 const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places") 进行访问。
请参阅 Maps JavaScript API 中的库。
placePrediction
类型：  PlacePrediction

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 配置 widget。
configureFromPlace
configureFromPlace(place)
参数： 
  • place：Place|{id:string} 要呈现详细信息的位置。
返回值：  Promise<void> 一种在位置数据加载并呈现后即会解析的 promise。
通过 Place 对象或地点 ID 配置 widget。
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、位置和视口。

自动补全类

google.maps.places.Autocomplete 类

一种根据用户输入的文本提供地点预测的 widget。它会附加到类型为 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)
参数： 
  • fields：Array<string> optional
返回值：无
设置成功检索到详情时要在详情响应中包含的地点字段。如需查看字段列表，请参阅 PlaceResult。
setOptions
setOptions(options)
参数： 
返回值：无
setTypes
setTypes(types)
参数： 
  • types：Array<string> optional 要包含的预测类型。
返回值：无
设置要返回的预测类型。如需了解支持的类型，请参阅 开发者指南。如果未指定任何类型，系统将返回所有类型。
继承自： 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 类

一种根据用户输入的文本提供查询预测的 widget。它会附加到类型为 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()
参数：None
当用户选择查询时会触发此事件，getPlaces 应用于获取新地点。

SearchBoxOptions 接口

google.maps.places.SearchBoxOptions 接口

可在 SearchBox 对象上设置的选项。
bounds optional
类型：  LatLngBounds|LatLngBoundsLiteral optional
要将查询预测结果偏向的区域。预测偏向于（但不限于）以这些边界为目标的查询。