PlaceAutocompleteElement 类
google.maps.places.PlaceAutocompleteElement
类
PlaceAutocompleteElement 是一个 HTMLElement
子类,可为 Places Autocomplete API 提供界面组件。
PlaceAutocompleteElement 会在内部自动使用 AutocompleteSessionToken
将用户自动补全搜索的查询和选择阶段归入不同的会话。
对 PlacePrediction.toPlace
返回的 Place
首次调用 Place.fetchFields
时,会自动包含用于提取 PlacePrediction
的会话令牌。
如需详细了解会话的工作方式,请访问 https://developers.google.com/maps/documentation/places/web-service/place-session-tokens。
自定义元素:
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-place-autocomplete>
此类扩展了 HTMLElement
。
此类实现了 PlaceAutocompleteElementOptions
。
通过调用 const {PlaceAutocompleteElement} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement(options) 参数:
|
属性 | |
---|---|
includedPrimaryTypes |
类型:
Array<string> optional 包含主要地点类型(例如“restaurant”或“gas_station”)。
仅当某个地点的主要类型包含在此列表中时,才会返回该地点。最多可以指定 5 个值。如果未指定任何类型,系统将返回所有地点类型。 HTML 属性:
|
includedRegionCodes |
类型:
Array<string> optional 仅包含指定地区的结果,最多可指定 15 个 CLDR 双字符地区代码。空集不会限制结果。如果同时设置了
locationRestriction 和 includedRegionCodes ,结果将位于交集区域。HTML 属性:
|
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 属性:
|
origin |
类型:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional 用于计算距离的起点。如果未指定,则不计算距离。如果提供了海拔高度,则不会将其用于计算。
HTML 属性:
|
requestedLanguage |
类型:
string optional 一种语言标识符,用于指定结果应以哪种语言返回(如果可能)。系统可能会优先显示所选语言的结果,但建议不限于此语言。请参阅支持的语言列表。
HTML 属性:
|
requestedRegion |
类型:
string optional 用于设置结果格式和过滤结果的地区代码。它不会将建议限制在此国家/地区。地区代码接受 ccTLD(“顶级域名”)双字符值。多数 ccTLD 代码都与 ISO 3166-1 代码相同,但也有一些需要注意的例外情况。例如,英国的 ccTLD 为“uk”(
.co.uk ),而其 ISO 3166-1 代码为“gb”(从技术上讲,是指“大不列颠及北爱尔兰联合王国”这一实体)。HTML 属性:
|
unitSystem |
类型:
UnitSystem optional 用于显示距离的单位制。如果未指定,则单位制由 requestedRegion 确定。
HTML 属性:
|
零件 | |
---|---|
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 下方。 |
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
|
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
事件 | |
---|---|
gmp-error |
function(errorEvent) 实参:
当对后端的请求被拒绝时(例如,API 密钥不正确),系统会触发此事件。此事件不会冒泡。 |
gmp-select |
function(placePredictionSelectEvent) 实参:
当用户选择地点预测结果时,系统会触发此事件。包含可转换为 Place 对象的 PlacePrediction 对象。 |
PlaceAutocompleteElementOptions 接口
google.maps.places.PlaceAutocompleteElementOptions
接口
用于构建 PlaceAutocompleteElement 的选项。如需了解每个属性的说明,请参阅 PlaceAutocompleteElement 类中同名的属性。
属性 | |
---|---|
locationBias optional |
类型:
LocationBias optional |
locationRestriction optional |
类型:
LocationRestriction optional |
name optional |
类型:
string optional |
requestedLanguage optional |
类型:
string optional |
PlacePredictionSelectEvent 类
google.maps.places.PlacePredictionSelectEvent
类
此事件是在用户使用 PlaceAutocompleteElement 选择预测项后创建的。使用 event.placePrediction
访问所选内容。
通过调用 PlacePrediction.toPlace
将 placePrediction 转换为 Place
。
此类扩展了 Event
。
通过调用 const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
属性 | |
---|---|
placePrediction |
类型:
PlacePrediction 通过调用 PlacePrediction.toPlace 将其转换为 Place 。 |
PlaceAutocompleteRequestErrorEvent 类
google.maps.places.PlaceAutocompleteRequestErrorEvent
类
当网络请求出现问题时,PlaceAutocompleteElement 会发出此事件。
此类扩展了 Event
。
通过调用 const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
PlaceContextualElement 类
google.maps.places.PlaceContextualElement
类
一种使用上下文令牌来显示“依托 Google 地图进行接地”响应的上下文视图的 widget。
自定义元素:
<gmp-place-contextual context-token="string"></gmp-place-contextual>
此类扩展了 HTMLElement
。
此类实现了 PlaceContextualElementOptions
。
通过调用 const {PlaceContextualElement} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
属性 | |
---|---|
contextToken |
类型:
string optional 上下文令牌。
HTML 属性:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
|
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
PlaceContextualElementOptions 接口
google.maps.places.PlaceContextualElementOptions
接口
PlaceContextualElement
的选项。
属性 | |
---|---|
contextToken optional |
类型:
string optional “依托 Google 地图进行接地”响应提供的上下文令牌。 |
PlaceContextualListConfigElement 类
google.maps.places.PlaceContextualListConfigElement
类
一种 HTML 元素,用于配置地点情境元素的列表视图的选项。
自定义元素:
<gmp-place-contextual-list-config layout="compact" map-hidden></gmp-place-contextual-list-config>
此类扩展了 HTMLElement
。
此类实现了 PlaceContextualListConfigElementOptions
。
通过调用 const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
属性 | |
---|---|
layout |
类型:
PlaceContextualListLayout optional 布局。
HTML 属性:
|
mapHidden |
类型:
boolean optional 地图是否处于隐藏状态。
HTML 属性:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
|
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
PlaceContextualListConfigElementOptions 接口
google.maps.places.PlaceContextualListConfigElementOptions
接口
PlaceContextualListConfigElement 的选项。
属性 | |
---|---|
layout optional |
类型:
PlaceContextualListLayout optional 布局。默认值为 PlaceContextualListLayout.VERTICAL 。 |
mapHidden optional |
类型:
boolean optional 地图是否处于隐藏状态。默认值为显示地图(值为 false)。 |
PlaceContextualListLayout 常量
google.maps.places.PlaceContextualListLayout
常量
地点情境元素支持的列表视图布局列表。
通过调用 const {PlaceContextualListLayout} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
常量 | |
---|---|
COMPACT |
紧凑型列表布局:列表项以链接的形式呈现在一行中,溢出部分显示在下拉列表中。 |
VERTICAL |
垂直列表布局:列表项以卡片形式在垂直列表中呈现。 |
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 属性:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
configureFromLocation |
configureFromLocation(location) 参数:
返回值:
Promise<void> 一种在位置数据加载并呈现后即会解析的 promise。使用反向地理编码从 LatLng 配置 widget。 |
configureFromPlace |
configureFromPlace(place) 参数:
返回值:
Promise<void> 一种在位置数据加载并呈现后即会解析的 promise。通过 Place 对象或地点 ID 配置 widget。 |
|
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 |
PlaceDetailsSize 常量
google.maps.places.PlaceDetailsSize
常量
PlaceDetailsElement
的尺寸款式/规格。
通过调用 const {PlaceDetailsSize} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
常量 | |
---|---|
LARGE |
大型变体,包括大尺寸图片、基本信息和联系信息。 |
MEDIUM |
中等变体,包含一张大图片和基本信息。 |
SMALL |
包含小图片和基本信息的小变体。 |
X_LARGE |
超大变体,包括照片拼贴、评价和全面的地点信息。 |
PlaceDetailsCompactElement 类
google.maps.places.PlaceDetailsCompactElement
类
以紧凑布局显示地点的详细信息。附加 PlaceDetailsPlaceRequestElement
以指定要渲染的位置。附加 PlaceContentConfigElement
、PlaceStandardContentElement
或 PlaceAllContentElement
以指定要渲染的内容。
如需使用此元素,请在 Google Cloud 控制台中为您的项目启用 Places UI Kit API。
自定义元素:
<gmp-place-details-compact orientation="vertical" truncation-preferred></gmp-place-details-compact>
此类扩展了 HTMLElement
。
此类实现了 PlaceDetailsCompactElementOptions
。
通过调用 const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
PlaceDetailsCompactElement |
PlaceDetailsCompactElement([options]) 参数:
|
属性 | |
---|---|
orientation |
类型:
PlaceDetailsOrientation optional 默认值:
PlaceDetailsOrientation.VERTICAL 元素的方向变体(垂直或水平)。
HTML 属性:
|
place |
类型:
Place optional 只读。包含当前渲染的地点 ID、位置和视口的 Place 对象。 |
truncationPreferred |
类型:
boolean 默认值:
false 如果为 true,则截断地点名称和地址以适合单行显示,而不是换行显示。
HTML 属性:
|
CSS 属性 | |
---|---|
--gmp-mat-color-info |
具有信息性情感色彩的界面元素的颜色。用于轮椅图标。 |
--gmp-mat-color-negative |
具有负面情感的界面元素的颜色。用于“营业中”状态中的“已关闭”文本。 |
--gmp-mat-color-neutral-container |
中性填充界面元素的容器颜色。用于图片占位符。 |
--gmp-mat-color-on-secondary-container |
文字和图标相对于辅助容器颜色的颜色。用于“在 Google 地图中打开”按钮上的文字和图标。 |
--gmp-mat-color-on-surface |
文字和图标在任何界面颜色下的颜色。用于常规文本。 |
--gmp-mat-color-on-surface-variant |
用于在任何 surface 颜色上显示文本和图标的低强调颜色。用于不太强调的文本。 |
--gmp-mat-color-outline-decorative |
非交互式元素的轮廓颜色。用于元素的边框。 |
--gmp-mat-color-positive |
具有积极情感的界面元素的颜色。用于“营业中”状态中的“营业”文本。 |
--gmp-mat-color-primary |
与 surface 颜色相对的互动文字和图标的颜色。用于归因对话框中的评价数量和链接。 |
--gmp-mat-color-secondary-container |
与 Surface 相比,填充色不太显眼,适用于色调按钮等隐性组件。用于“在 Google 地图中打开”按钮的背景。 |
--gmp-mat-color-surface |
背景颜色。用于元素和提供方信息对话框的背景。 |
--gmp-mat-font-body-medium |
用于提供方信息对话框中的正文。 |
--gmp-mat-font-body-small |
用于地点地址、评分、类型、价格和“现在营业”状态。 |
--gmp-mat-font-family |
用于所有文本的基本字体系列。 |
--gmp-mat-font-headline-medium |
用于提供方信息对话框中的标题文本。 |
--gmp-mat-font-label-large |
用于提供方信息对话框中的“在 Google 地图中打开”按钮和链接。 |
--gmp-mat-font-title-small |
用于地点名称。 |
background-color |
替换元素的背景颜色。 |
border |
替换元素的边框。 |
border-radius |
替换元素的边框半径。 |
color-scheme |
|
font-size |
缩放元素中的所有文本和图标,这些文本和图标在内部以 em 为单位定义。默认为 16px 。 |
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
|
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
事件 | |
---|---|
gmp-error |
function(event) 实参:
当对后端的请求被拒绝时(例如,API 密钥不正确),系统会触发此事件。此事件不会冒泡。 |
gmp-load |
function(event) 实参:
当元素加载并呈现其内容时,系统会触发此事件。此事件不会冒泡。 |
PlaceDetailsCompactElementOptions 接口
google.maps.places.PlaceDetailsCompactElementOptions
接口
PlaceDetailsCompactElement
的选项。
属性 | |
---|---|
orientation optional |
类型:
PlaceDetailsOrientation optional |
truncationPreferred optional |
类型:
boolean optional |
PlaceDetailsOrientation 常量
google.maps.places.PlaceDetailsOrientation
常量
PlaceDetailsCompactElement
的方向变体。
通过调用 const {PlaceDetailsOrientation} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
常量 | |
---|---|
HORIZONTAL |
横向。 |
VERTICAL |
竖屏方向。 |
PlaceDetailsPlaceRequestElement 类
google.maps.places.PlaceDetailsPlaceRequestElement
类
配置 Place Details Compact 元素,以根据地点对象、ID 或资源名称加载数据。将此元素作为 PlaceDetailsCompactElement
的子元素附加,以加载指定地点的数据。
自定义元素:
<gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>
此类扩展了 HTMLElement
。
此类实现了 PlaceDetailsPlaceRequestElementOptions
。
通过调用 const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
PlaceDetailsPlaceRequestElement |
PlaceDetailsPlaceRequestElement([options]) 参数:
|
属性 | |
---|---|
place |
类型:
Place optional 要在“地点详情精简”元素中呈现详情的地点对象、ID 或资源名称。此属性会以资源名称的形式反映到属性中。
HTML 属性:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
|
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
PlaceDetailsPlaceRequestElementOptions 接口
google.maps.places.PlaceDetailsPlaceRequestElementOptions
接口
PlaceDetailsPlaceRequestElement
的选项。
属性 | |
---|---|
place optional |
类型:
Place|string optional |
PlaceContentConfigElement 类
google.maps.places.PlaceContentConfigElement
类
配置 Place Details Compact 元素要显示的内容。将此元素作为 PlaceDetailsCompactElement
的子元素附加,以便使用它。将以下任一元素附加到 PlaceContentConfigElement
,即可显示相应内容:
PlaceMediaElement
、PlaceAddressElement
、PlaceRatingElement
、PlaceTypeElement
、PlacePriceElement
、PlaceAccessibleEntranceIconElement
、PlaceOpenNowStatusElement
、PlaceAttributionElement
子元素的顺序无关紧要;元素会以标准顺序呈现内容,且该顺序无法自定义。
自定义元素:
<gmp-place-content-config></gmp-place-content-config>
此类扩展了 HTMLElement
。
此类实现了 PlaceContentConfigElementOptions
。
通过调用 const {PlaceContentConfigElement} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
PlaceContentConfigElement |
PlaceContentConfigElement([options]) 参数:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
|
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
PlaceContentConfigElementOptions 接口
google.maps.places.PlaceContentConfigElementOptions
接口
PlaceContentConfigElement
的选项。
PlaceMediaElement 类
google.maps.places.PlaceMediaElement
类
配置 Place Details Compact 元素以显示地点的媒体内容,例如照片。将此元素作为 PlaceContentConfigElement
的子元素附加,以便使用它。
自定义元素:
<gmp-place-media lightbox-preferred></gmp-place-media>
此类扩展了 HTMLElement
。
此类实现了 PlaceMediaElementOptions
。
通过调用 const {PlaceMediaElement} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
PlaceMediaElement |
PlaceMediaElement([options]) 参数:
|
属性 | |
---|---|
lightboxPreferred |
类型:
boolean optional 默认值:
false 在支持这两种选项的情况下,是否启用或停用媒体灯箱。
HTML 属性:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
|
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
PlaceMediaElementOptions 接口
google.maps.places.PlaceMediaElementOptions
接口
PlaceMediaElement
的选项。
属性 | |
---|---|
lightboxPreferred optional |
类型:
boolean optional |
PlaceAddressElement 类
google.maps.places.PlaceAddressElement
类
配置 Place Details Compact 元素以显示地点的地址。将此元素作为 PlaceContentConfigElement
的子元素附加,以便使用它。
自定义元素:
<gmp-place-address></gmp-place-address>
此类扩展了 HTMLElement
。
此类实现了 PlaceAddressElementOptions
。
通过调用 const {PlaceAddressElement} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
PlaceAddressElement |
PlaceAddressElement([options]) 参数:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
|
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
PlaceAddressElementOptions 接口
google.maps.places.PlaceAddressElementOptions
接口
PlaceAddressElement
的选项。
PlaceRatingElement 类
google.maps.places.PlaceRatingElement
类
配置“地点详情精简”元素以显示地点的评分。将此元素作为 PlaceContentConfigElement
的子元素附加,以便使用它。
自定义元素:
<gmp-place-rating></gmp-place-rating>
此类扩展了 HTMLElement
。
此类实现了 PlaceRatingElementOptions
。
通过调用 const {PlaceRatingElement} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
PlaceRatingElement |
PlaceRatingElement([options]) 参数:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
|
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
PlaceRatingElementOptions 接口
google.maps.places.PlaceRatingElementOptions
接口
PlaceRatingElement
的选项。
PlaceTypeElement 类
google.maps.places.PlaceTypeElement
类
配置 Place Details Compact 元素以显示地点的类型。将此元素作为 PlaceContentConfigElement
的子元素附加,以便使用它。
自定义元素:
<gmp-place-type></gmp-place-type>
此类扩展了 HTMLElement
。
此类实现了 PlaceTypeElementOptions
。
通过调用 const {PlaceTypeElement} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
PlaceTypeElement |
PlaceTypeElement([options]) 参数:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
|
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
PlacePriceElement 类
google.maps.places.PlacePriceElement
类
配置“地点详情精简”元素以显示地点的价格水平或价格范围。将此元素作为 PlaceContentConfigElement
的子元素附加,以便使用它。
自定义元素:
<gmp-place-price></gmp-place-price>
此类扩展了 HTMLElement
。
此类实现了 PlacePriceElementOptions
。
通过调用 const {PlacePriceElement} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
PlacePriceElement |
PlacePriceElement([options]) 参数:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
|
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
PlaceAccessibleEntranceIconElement 类
google.maps.places.PlaceAccessibleEntranceIconElement
类
配置 Place Details Compact 元素,以在地点有无障碍入口时显示轮椅图标。将此元素作为 PlaceContentConfigElement
的子元素附加,以便使用它。
自定义元素:
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
此类扩展了 HTMLElement
。
此类实现了 PlaceAccessibleEntranceIconElementOptions
。
通过调用 const {PlaceAccessibleEntranceIconElement} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
PlaceAccessibleEntranceIconElement |
PlaceAccessibleEntranceIconElement([options]) 参数:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
|
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
PlaceAccessibleEntranceIconElementOptions 接口
google.maps.places.PlaceAccessibleEntranceIconElementOptions
接口
PlaceAccessibleEntranceIconElement
的选项。
PlaceOpenNowStatusElement 类
google.maps.places.PlaceOpenNowStatusElement
类
配置“地点详情精简”元素以显示地点的当前营业状态。将此元素作为 PlaceContentConfigElement
的子元素附加,以便使用它。
自定义元素:
<gmp-place-open-now-status></gmp-place-open-now-status>
此类扩展了 HTMLElement
。
此类实现了 PlaceOpenNowStatusElementOptions
。
通过调用 const {PlaceOpenNowStatusElement} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
PlaceOpenNowStatusElement |
PlaceOpenNowStatusElement([options]) 参数:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
|
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
PlaceOpenNowStatusElementOptions 接口
google.maps.places.PlaceOpenNowStatusElementOptions
接口
PlaceOpenNowStatusElement
的选项。
PlaceAttributionElement 类
google.maps.places.PlaceAttributionElement
类
允许自定义地点详情紧凑型元素中的 Google 地图提供方信息文本。将此元素作为 PlaceContentConfigElement
的子元素附加,以便使用它。如果省略此元素,系统仍会显示提供方信息,但会使用默认颜色。
自定义元素:
<gmp-place-attribution dark-scheme-color="white" light-scheme-color="white"></gmp-place-attribution>
此类扩展了 HTMLElement
。
此类实现了 PlaceAttributionElementOptions
。
通过调用 const {PlaceAttributionElement} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
PlaceAttributionElement |
PlaceAttributionElement([options]) 参数:
|
属性 | |
---|---|
darkSchemeColor |
类型:
AttributionColor optional 默认值:
AttributionColor.WHITE 深色模式下 Google 地图提供方信息的颜色。
HTML 属性:
|
lightSchemeColor |
类型:
AttributionColor optional 默认值:
AttributionColor.GRAY 浅色模式下 Google 地图提供方信息的颜色。
HTML 属性:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
|
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
PlaceAttributionElementOptions 接口
google.maps.places.PlaceAttributionElementOptions
接口
PlaceAttributionElement
的选项。
属性 | |
---|---|
darkSchemeColor optional |
类型:
AttributionColor optional |
lightSchemeColor optional |
类型:
AttributionColor optional |
AttributionColor 常量
google.maps.places.AttributionColor
常量
Google 地图提供方信息文本的颜色选项。您可以自定义提供方信息,以使用上述任何颜色。
通过调用 const {AttributionColor} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
常量 | |
---|---|
BLACK |
黑色提供方文字。 |
GRAY |
灰色的提供方文字。 |
WHITE |
白色提供方信息文字。 |
PlaceAllContentElement 类
google.maps.places.PlaceAllContentElement
类
配置 Place Details Compact 元素以显示所有可用内容。将此元素作为 PlaceDetailsCompactElement
的子元素附加,以便使用它。
自定义元素:
<gmp-place-all-content></gmp-place-all-content>
此类扩展了 HTMLElement
。
此类实现了 PlaceAllContentElementOptions
。
通过调用 const {PlaceAllContentElement} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
PlaceAllContentElement |
PlaceAllContentElement([options]) 参数:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
|
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
PlaceAllContentElementOptions 接口
google.maps.places.PlaceAllContentElementOptions
接口
PlaceAllContentElement
的选项。
PlaceStandardContentElement 类
google.maps.places.PlaceStandardContentElement
类
配置 Place Details Compact 元素以显示一组标准内容(媒体、评分、类型、价格、无障碍入口图标和“营业中”状态)。将此元素作为 PlaceDetailsCompactElement
的子元素附加,以便使用它。
自定义元素:
<gmp-place-standard-content></gmp-place-standard-content>
此类扩展了 HTMLElement
。
此类实现了 PlaceStandardContentElementOptions
。
通过调用 const {PlaceStandardContentElement} = await google.maps.importLibrary("places")
进行访问。
请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
PlaceStandardContentElement |
PlaceStandardContentElement([options]) 参数:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
|
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
PlaceStandardContentElementOptions 接口
google.maps.places.PlaceStandardContentElementOptions
接口
PlaceStandardContentElement
的选项。
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 |
只读。一个 Place 对象数组,包含当前渲染的地点 ID、位置和视口。 |
selectable |
类型:
boolean 列表项是否可供选择。如果为 true,则列表项将是按钮,点击时会调度
gmp-placeselect 事件。此外,还支持无障碍键盘导航和选择。HTML 属性:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。 |
configureFromSearchByTextRequest |
configureFromSearchByTextRequest(request) 参数:
返回值:
Promise<void> 一种在位置数据加载并呈现后即会解析的 promise。配置微件以呈现来自 Places Text Search API 请求的搜索结果。 |
configureFromSearchNearbyRequest |
configureFromSearchNearbyRequest(request) 参数:
返回值:
Promise<void> 一种在位置数据加载并呈现后即会解析的 promise。配置微件以呈现来自 Places Nearby Search API 请求的搜索结果。 |
|
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 |
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) 参数:
返回值:无
设置成功检索到详情时要在详情响应中包含的地点字段。如需查看字段列表,请参阅 PlaceResult 。 |
setOptions |
setOptions(options) 参数:
返回值:无
|
setTypes |
setTypes(types) 参数:
返回值:无
设置要返回的预测类型。如需了解支持的类型,请参阅 开发者指南。如果未指定任何类型,系统将返回所有类型。 |
继承自:
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'] 。 |
|
类型:
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 要返回的预测类型。如需了解支持的类型,请参阅 开发者指南。如果未指定任何类型,系统将返回所有类型。 |
SearchBox 类
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 要将查询预测结果偏向的区域。预测偏向于(但不限于)以这些边界为目标的查询。 |