Places Widgets

PlaceAutocompleteElement 类

google.maps.places.PlaceAutocompleteElement 类

  • PlaceAutocompleteElement 是一个 HTMLElement 子类，可为 Places Autocomplete API 提供界面组件。加载 places 库后，您可以在 HTML 中创建具有自动补全功能的输入。例如： 
    <gmp-placeautocomplete ></gmp-placeautocomplete>

自定义元素：
<gmp-placeautocomplete name="string" requested-language="string" requested-region="string" types="type1 type2 type3..."></gmp-placeautocomplete>

此类扩展了 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-placeautocomplete requested-language="string"></gmp-placeautocomplete>
requestedRegion
类型：string optional
用于设置结果格式和过滤结果的区域代码。但不会将建议限制在此国家/地区。地区代码接受 ccTLD（“顶级域名”）双字符值。多数 ccTLD 代码都与 ISO 3166-1 代码相同，但也有一些需要注意的例外情况。例如，英国的 ccTLD 为“uk”(.co.uk)，而其 ISO 3166-1 代码为“gb”（专指“大不列颠及北爱尔兰联合王国”）。
HTML 属性：
  • <gmp-placeautocomplete requested-region="string"></gmp-placeautocomplete>
types
类型：Array<string> optional
要返回的预测结果类型。如需了解支持的类型，请参阅 开发者指南。如果未指定任何类型，系统将返回所有类型。
HTML 属性：
  • <gmp-placeautocomplete types="type1 type2 type3..."></gmp-placeautocomplete>
prediction-item
预测结果下拉菜单中的表示单项预测结果的项目。
prediction-item-icon
预测项列表中显示在每个项目左侧的图标。
prediction-item-main-text
预测项的一部分，即预测的主要文本。对地理位置而言，它会包含地点名称（如“上海”）或街道名称和编号（如“长安大街3号”）。默认情况下，predict-item-main-text 显示为黑色。如果预测项中有任何附加文本，该文本将位于预测项主文本之外，并且从预测项继承其样式。默认情况下，此类文本会显示为灰色。附加文本通常是地址。
prediction-item-match
返回的联想查询的一部分，其于用户输入相匹配。默认情况下，该匹配文本以粗体突出显示。请注意，匹配的文本可能位于预测项中的任何位置。它不一定是 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

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

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 用户选择的地点。
如果成功检索到用户所选地点的详细信息，则返回详情。否则，返回一个存根 Place 对象，其中 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
要在其中搜索地点的区域。
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 字段，以及由 Autocomplete 服务返回的 place_id、types 和 description。默认情况下，该环境处于停用状态。
strictBounds optional
类型：boolean optional
一个布尔值，表示自动补全 widget 应仅返回发送查询时 Autocomplete 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)
参数：
返回值：None
设置用于自定义调整查询预测的区域。结果只会偏向于该区域，而不会完全局限于该区域。
继承的样式：addListener、bindTo、get、notify、set、setValues、unbind、unbindAll
places_changed
function()
参数：None
当用户选择查询时会触发此事件，应使用 getPlaces 来获取新地点。

SearchBoxOptions 接口

google.maps.places.SearchBoxOptions 接口

可以在 SearchBox 对象上设置的选项。
bounds optional
查询预测结果要偏向的区域。预测结果偏向于（但不限于）定位到这些边界的查询。