PlaceContentConfigElement 类
class
google.maps.places.PlaceContentConfigElement
extends HTMLElement
implements PlaceContentConfigElementOptions
library "places"
配置 PlaceDetailsCompactElement、PlaceDetailsElement 或 PlaceSearchElement 以显示一组自定义内容。将此元素附加为子元素即可使用。
对于 PlaceDetailsCompactElement、PlaceDetailsElement 或 PlaceSearchElement,请将以下任一元素附加到 ,以显示相应内容:PlaceContentConfigElement
PlaceAddressElement、PlaceAccessibleEntranceIconElement、PlaceAttributionElement PlaceMediaElement、PlaceOpenNowStatusElement、PlacePriceElement、PlaceRatingElement、PlaceTypeElement。
针对 PlaceDetailsElement,您还可以附加以下任一元素:
PlaceFeatureListElement PlaceOpeningHoursElement、PlacePhoneNumberElement、PlacePlusCodeElement、PlaceReviewSummaryElement、PlaceReviewsElement、PlaceSummaryElement、PlaceTypeSpecificHighlightsElement、PlaceWebsiteElement。
子元素的顺序无关紧要;该元素会按标准顺序呈现内容,此顺序无法自定义。示例:
<gmp-place-details>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
<gmp-place-address></gmp-place-address>
</gmp-place-content-config>
</gmp-place-details> <gmp-place-content-config></gmp-place-content-config>
const {PlaceContentConfigElement} = await google.maps.importLibrary("places");
构造函数 | |
|---|---|
PlaceContentConfigElement |
PlaceContentConfigElement([options])参数:
|
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceContentConfigElementOptions 接口
接口
google.maps.places.PlaceContentConfigElementOptions
由 实现
PlaceContentConfigElement
“PlaceContentConfigElement”的选项。
PlaceAllContentElement 类
class
google.maps.places.PlaceAllContentElement
extends HTMLElement
implements PlaceAllContentElementOptions
library "places"
配置 PlaceDetailsCompactElement、PlaceDetailsElement 或 PlaceSearchElement,以显示所有可用内容。将此元素附加为子元素即可使用。例如:
<gmp-place-details>
<gmp-place-all-content></gmp-place-all-content>
</gmp-place-details>
<gmp-place-all-content></gmp-place-all-content>
const {PlaceAllContentElement} = await google.maps.importLibrary("places");
构造函数 | |
|---|---|
PlaceAllContentElement |
PlaceAllContentElement([options])参数:
|
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceAllContentElementOptions 接口
接口
google.maps.places.PlaceAllContentElementOptions
由 PlaceAllContentElement 实现
“PlaceAllContentElement”的选项。
PlaceStandardContentElement 类
class
google.maps.places.PlaceStandardContentElement
extends HTMLElement
implements PlaceStandardContentElementOptions
library "places"
配置 PlaceDetailsCompactElement、PlaceDetailsElement 或 PlaceSearchElement 以显示一组标准内容。将此元素附加为子元素即可使用。
对于 PlaceDetailsElement,标准内容包括:
- 媒体
- 地址
- 评分
- 类型
- 价格
- 无障碍入口图标
- 网站
- 电话号码
- 营业时间
- 摘要
- 类型特定亮点
- 评价
- 功能列表
对于
PlaceDetailsCompactElement,标准内容包括:- 媒体
- 评分
- 类型
- 价格
- 无障碍入口图标
- 营业中状态
对于
PlaceSearchElement,标准内容包括:- 媒体
- 评分
- 类型
- 价格
- 无障碍入口图标
例如:
<gmp-place-details>
<gmp-place-standard-content></gmp-place-standard-content>
</gmp-place-details>
<gmp-place-standard-content></gmp-place-standard-content>
const {PlaceStandardContentElement} = await google.maps.importLibrary("places");
构造函数 | |
|---|---|
PlaceStandardContentElement |
PlaceStandardContentElement([options])参数:
|
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceStandardContentElementOptions 接口
接口
google.maps.places.PlaceStandardContentElementOptions
由 PlaceStandardContentElement 实现
“PlaceStandardContentElement”的选项。
PlaceMediaElement 类
class
google.maps.places.PlaceMediaElement
extends HTMLElement
implements PlaceMediaElementOptions
library "places"
配置 PlaceDetailsCompactElement、PlaceDetailsElement 或 PlaceSearchElement,以显示地点的媒体内容(例如照片)。将此元素附加为 的子元素即可使用。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
<gmp-place-media lightbox-preferred preferred-size="value-name"> </gmp-place-media>
const {PlaceMediaElement} = await google.maps.importLibrary("places");
构造函数 | |
|---|---|
PlaceMediaElement |
PlaceMediaElement([options])参数:
|
属性 | |
|---|---|
lightboxPreferred
attr: lightbox-preferred |
输入类型:
boolean optional输出类型: boolean默认值:
false在同时支持这两种选项的情况下,是否启用或停用媒体灯箱。
HTML 属性: lightbox-preferred |
preferredSize
attr: preferred-size |
默认值:
nullHTML 属性: preferred-size="value-name" |
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceMediaElementOptions 接口
接口
google.maps.places.PlaceMediaElementOptions
由 PlaceMediaElement 实现
“PlaceMediaElement”的选项。
属性 | |
|---|---|
lightboxPreferred
可选 |
类型:
boolean optional |
preferredSize
可选 |
类型:
MediaSize optional |
MediaSize 常量
常量
google.maps.places.MediaSize
库 "places"
支持多种尺寸时的首选媒体尺寸,例如垂直 PlaceSearchElement。
这些常量也可以用作字符串。在 TypeScript 中,字符串字面量由 MediaSizeString 类型定义。
const {MediaSize} = await google.maps.importLibrary("places");
常量 | |
|---|---|
LARGE |
媒体文件过大。 |
MEDIUM |
中等媒体大小。 |
SMALL |
媒体尺寸较小。 |
PlaceAddressElement 类
class
google.maps.places.PlaceAddressElement
extends HTMLElement
implements PlaceAddressElementOptions
library "places"
配置 PlaceDetailsCompactElement、PlaceDetailsElement 或 PlaceSearchElement 以显示地点的地址。将此元素附加为 的子元素即可使用。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-address></gmp-place-address>
</gmp-place-content-config>
<gmp-place-address></gmp-place-address>
const {PlaceAddressElement} = await google.maps.importLibrary("places");
构造函数 | |
|---|---|
PlaceAddressElement |
PlaceAddressElement([options])参数:
|
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceAddressElementOptions 接口
接口
google.maps.places.PlaceAddressElementOptions
由 PlaceAddressElement 实现
“PlaceAddressElement”的选项。
PlaceRatingElement 类
class
google.maps.places.PlaceRatingElement
extends HTMLElement
implements PlaceRatingElementOptions
library "places"
配置 PlaceDetailsCompactElement、PlaceDetailsElement 或 PlaceSearchElement 以显示地点的评分。将此元素附加为 的子元素即可使用。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-rating></gmp-place-rating>
</gmp-place-content-config>
<gmp-place-rating></gmp-place-rating>
const {PlaceRatingElement} = await google.maps.importLibrary("places");
构造函数 | |
|---|---|
PlaceRatingElement |
PlaceRatingElement([options])参数:
|
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceRatingElementOptions 接口
接口
google.maps.places.PlaceRatingElementOptions
由 PlaceRatingElement 实现
“PlaceRatingElement”的选项。
PlaceTypeElement 类
class
google.maps.places.PlaceTypeElement
extends HTMLElement
implements PlaceTypeElementOptions
library "places"
配置 PlaceDetailsCompactElement、PlaceDetailsElement 或 PlaceSearchElement 以显示地点类型。将此元素附加为 的子元素即可使用。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-type></gmp-place-type>
</gmp-place-content-config>
<gmp-place-type></gmp-place-type>
const {PlaceTypeElement} = await google.maps.importLibrary("places");
构造函数 | |
|---|---|
PlaceTypeElement |
PlaceTypeElement([options])参数:
|
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceTypeElementOptions 接口
接口
google.maps.places.PlaceTypeElementOptions
由 PlaceTypeElement 实现
“PlaceTypeElement”的选项。
PlacePriceElement 类
class
google.maps.places.PlacePriceElement
extends HTMLElement
implements PlacePriceElementOptions
library "places"
配置 PlaceDetailsCompactElement、PlaceDetailsElement 或 PlaceSearchElement,以显示地点的价格水平或价格范围。将此元素附加为 的子元素即可使用。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-price></gmp-place-price>
</gmp-place-content-config>
<gmp-place-price></gmp-place-price>
const {PlacePriceElement} = await google.maps.importLibrary("places");
构造函数 | |
|---|---|
PlacePriceElement |
PlacePriceElement([options])参数:
|
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlacePriceElementOptions 接口
接口
google.maps.places.PlacePriceElementOptions
由 PlacePriceElement 实现
“PlacePriceElement”的选项。
PlaceAccessibleEntranceIconElement 类
class
google.maps.places.PlaceAccessibleEntranceIconElement
extends HTMLElement
implements PlaceAccessibleEntranceIconElementOptions
library "places"
配置 PlaceDetailsCompactElement、PlaceDetailsElement 或 PlaceSearchElement,以便在地点有无障碍入口时显示轮椅图标。将此元素附加为 的子元素即可使用。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
</gmp-place-content-config>
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
const {PlaceAccessibleEntranceIconElement} = await google.maps.importLibrary("places");
构造函数 | |
|---|---|
PlaceAccessibleEntranceIconElement |
PlaceAccessibleEntranceIconElement([options])参数:
|
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceAccessibleEntranceIconElementOptions 接口
接口
google.maps.places.PlaceAccessibleEntranceIconElementOptions
由 PlaceAccessibleEntranceIconElement 实现
“PlaceAccessibleEntranceIconElement”的选项。
PlaceOpenNowStatusElement 类
class
google.maps.places.PlaceOpenNowStatusElement
extends HTMLElement
implements PlaceOpenNowStatusElementOptions
library "places"
配置 PlaceDetailsCompactElement、PlaceDetailsElement 或 PlaceSearchElement,以显示地点当前的营业或停业状态。将此元素附加为 的子元素即可使用。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-open-now-status></gmp-place-open-now-status>
</gmp-place-content-config>
<gmp-place-open-now-status></gmp-place-open-now-status>
const {PlaceOpenNowStatusElement} = await google.maps.importLibrary("places");
构造函数 | |
|---|---|
PlaceOpenNowStatusElement |
PlaceOpenNowStatusElement([options])参数:
|
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceOpenNowStatusElementOptions 接口
接口
google.maps.places.PlaceOpenNowStatusElementOptions
由 PlaceOpenNowStatusElement 实现
“PlaceOpenNowStatusElement”的选项。
PlaceReviewSummaryElement 类
class
google.maps.places.PlaceReviewSummaryElement
extends HTMLElement
implements PlaceReviewSummaryElementOptions
library "places"
配置 PlaceDetailsElement 以显示地点的评价摘要。将此元素附加为 的子元素即可使用。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-review-summary></gmp-place-review-summary>
</gmp-place-content-config>
<gmp-place-review-summary></gmp-place-review-summary>
const {PlaceReviewSummaryElement} = await google.maps.importLibrary("places");
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceReviewSummaryElementOptions 接口
接口
google.maps.places.PlaceReviewSummaryElementOptions
由 PlaceReviewSummaryElement 实现
“PlaceReviewSummaryElement”的选项。
PlaceReviewsElement 类
class
google.maps.places.PlaceReviewsElement
extends HTMLElement
implements PlaceReviewsElementOptions
library "places"
配置 PlaceDetailsElement 以显示地点的评价。将此元素附加为 的子元素即可使用。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-reviews></gmp-place-reviews>
</gmp-place-content-config>
<gmp-place-reviews></gmp-place-reviews>
const {PlaceReviewsElement} = await google.maps.importLibrary("places");
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceReviewsElementOptions 接口
接口
google.maps.places.PlaceReviewsElementOptions
由 PlaceReviewsElement 实现
“PlaceReviewsElement”的选项。
PlaceSummaryElement 类
class
google.maps.places.PlaceSummaryElement
extends HTMLElement
implements PlaceSummaryElementOptions
library "places"
配置 PlaceDetailsElement 以显示地点的摘要。将此元素附加为 的子元素即可使用。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-summary></gmp-place-summary>
</gmp-place-content-config>
<gmp-place-summary></gmp-place-summary>
const {PlaceSummaryElement} = await google.maps.importLibrary("places");
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceSummaryElementOptions 接口
接口
google.maps.places.PlaceSummaryElementOptions
由 PlaceSummaryElement 实现
“PlaceSummaryElement”的选项。
PlaceFeatureListElement 类
class
google.maps.places.PlaceFeatureListElement
extends HTMLElement
implements PlaceFeatureListElementOptions
library "places"
配置 PlaceDetailsElement,以便在“关于”标签页中显示地点的地图项列表。功能列表可以包括无障碍选项、便利设施、接受的付款方式等。将此元素附加为 的子元素即可使用。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-feature-list></gmp-place-feature-list>
</gmp-place-content-config>
<gmp-place-feature-list></gmp-place-feature-list>
const {PlaceFeatureListElement} = await google.maps.importLibrary("places");
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceFeatureListElementOptions 接口
接口
google.maps.places.PlaceFeatureListElementOptions
由 PlaceFeatureListElement 实现
“PlaceFeatureListElement”的选项。
PlaceOpeningHoursElement 类
class
google.maps.places.PlaceOpeningHoursElement
extends HTMLElement
implements PlaceOpeningHoursElementOptions
library "places"
配置 PlaceDetailsElement 以显示地点的营业时间。将此元素附加为 的子元素即可使用。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-opening-hours></gmp-place-opening-hours>
</gmp-place-content-config>
<gmp-place-opening-hours></gmp-place-opening-hours>
const {PlaceOpeningHoursElement} = await google.maps.importLibrary("places");
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceOpeningHoursElementOptions 接口
接口
google.maps.places.PlaceOpeningHoursElementOptions
由 PlaceOpeningHoursElement 实现
“PlaceOpeningHoursElement”的选项。
PlacePhoneNumberElement 类
class
google.maps.places.PlacePhoneNumberElement
extends HTMLElement
implements PlacePhoneNumberElementOptions
library "places"
配置 PlaceDetailsElement 以显示地点的电话号码。将此元素附加为 的子元素即可使用。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-phone-number></gmp-place-phone-number>
</gmp-place-content-config>
<gmp-place-phone-number></gmp-place-phone-number>
const {PlacePhoneNumberElement} = await google.maps.importLibrary("places");
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlacePhoneNumberElementOptions 接口
接口
google.maps.places.PlacePhoneNumberElementOptions
由 PlacePhoneNumberElement 实现
“PlacePhoneNumberElement”的选项。
PlacePlusCodeElement 类
class
google.maps.places.PlacePlusCodeElement
extends HTMLElement
implements PlacePlusCodeElementOptions
library "places"
配置 PlaceDetailsElement 以显示地点的 Plus Code。将此元素附加为 的子元素即可使用。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-plus-code></gmp-place-plus-code>
</gmp-place-content-config>
<gmp-place-plus-code></gmp-place-plus-code>
const {PlacePlusCodeElement} = await google.maps.importLibrary("places");
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlacePlusCodeElementOptions 接口
接口
google.maps.places.PlacePlusCodeElementOptions
由 PlacePlusCodeElement 实现
“PlacePlusCodeElement”的选项。
PlaceTypeSpecificHighlightsElement 类
class
google.maps.places.PlaceTypeSpecificHighlightsElement
extends HTMLElement
implements PlaceTypeSpecificHighlightsElementOptions
library "places"
配置 PlaceDetailsElement,以显示特定地点类型的亮点信息,例如油价和充电桩可用性。将此元素附加为 的子元素即可使用。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
</gmp-place-content-config>
<gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
const {PlaceTypeSpecificHighlightsElement} = await google.maps.importLibrary("places");
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceTypeSpecificHighlightsElementOptions 接口
接口
google.maps.places.PlaceTypeSpecificHighlightsElementOptions
由 PlaceTypeSpecificHighlightsElement 实现
“PlaceTypeSpecificHighlightsElement”的选项。
PlaceWebsiteElement 类
class
google.maps.places.PlaceWebsiteElement
extends HTMLElement
implements PlaceWebsiteElementOptions
library "places"
配置 PlaceDetailsElement 以显示地点的网站。将此元素附加为 的子元素即可使用。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-website></gmp-place-website>
</gmp-place-content-config>
<gmp-place-website></gmp-place-website>
const {PlaceWebsiteElement} = await google.maps.importLibrary("places");
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceWebsiteElementOptions 接口
接口
google.maps.places.PlaceWebsiteElementOptions
由 PlaceWebsiteElement 实现
“PlaceWebsiteElement”的选项。
PlaceAttributionElement 类
class
google.maps.places.PlaceAttributionElement
extends HTMLElement
implements PlaceAttributionElementOptions
library "places"
允许在 PlaceDetailsCompactElement、PlaceDetailsElement 或 PlaceSearchElement 中自定义 Google 地图提供方文字。将此元素附加为 的子元素即可使用。如果省略此元素,归属信息仍会以默认颜色显示。例如:PlaceContentConfigElement
<gmp-place-content-config>
<gmp-place-attribution
light-scheme-color="black"
dark-scheme-color="white"
></gmp-place-attribution>
</gmp-place-content-config>
<gmp-place-attribution dark-scheme-color="value-name" light-scheme-color="value-name"> </gmp-place-attribution>
const {PlaceAttributionElement} = await google.maps.importLibrary("places");
构造函数 | |
|---|---|
PlaceAttributionElement |
PlaceAttributionElement([options])参数:
|
属性 | |
|---|---|
darkSchemeColor
attr: dark-scheme-color |
默认值:
AttributionColor.WHITE深色模式下 Google 地图提供方信息的颜色。
HTML 属性: dark-scheme-color="value-name" |
lightSchemeColor
attr: light-scheme-color |
默认值:
AttributionColor.GRAY浅色模式下 Google 地图归因信息的颜色。
HTML 属性: light-scheme-color="value-name" |
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceAttributionElementOptions 接口
接口
google.maps.places.PlaceAttributionElementOptions
由 PlaceAttributionElement 实现
“PlaceAttributionElement”的选项。
属性 | |
|---|---|
darkSchemeColor
可选 |
类型:
AttributionColor optional |
lightSchemeColor
可选 |
类型:
AttributionColor optional |
AttributionColor 常量
常量
google.maps.places.AttributionColor
库 "places"
Google 地图提供方文字的颜色选项。您可以自定义提供方信息,以使用其中任何一种颜色。
这些常量也可以用作字符串。在 TypeScript 中,字符串字面量由 AttributionColorString 类型定义。
const {AttributionColor} = await google.maps.importLibrary("places");
常量 | |
|---|---|
BLACK |
黑色提供方文字。 |
GRAY |
灰色提供方文字。 |
WHITE |
白色提供方文字。 |
PlaceButtonElement 类
class
google.maps.places.PlaceButtonElement
extends HTMLElement
implements PlaceButtonElementOptions
library "places"
显示插入到 action-main 槽位或 action-corner 槽位中的按钮。PlaceButtonElement 没有默认行为。将事件监听器附加到元素,以定义其行为。默认情况下,该按钮将显示在 action-main 槽位中。
<gmp-place-button action-aria-label="string" label="string"> </gmp-place-button>
const {PlaceButtonElement} = await google.maps.importLibrary("places");
属性 | |
|---|---|
actionAriaLabel
attr: action-aria-label |
类型:
string optional默认值:
undefined内部控件的 ARIA 标签。仅图标控件应始终具有 aria-label,以描述其用途和行为。在角落中呈现的控件不会显示标签,因此建议使用 aria-label,而不是角落控件的标签。
HTML 属性: action-aria-label="string" |
label
attr: label |
类型:
string optional默认值:
undefined要在控件中显示的标签。对于具有预定义操作类型的链接,系统会忽略此属性。在操作角槽中呈现的链接和按钮不会显示标签。建议改用
action-aria-label 属性来控制圆角。HTML 属性: label="string" |
槽数 | |
|---|---|
icon-start |
一个槽,用于放置在标签之前开始的图标内容。此属性同时用于主操作控件和角落操作控件。当控件收起至角落状态时,此槽中的内容会呈现。 |
零件 | |
|---|---|
button |
一个 css 部分,用于定位内部控件元素。 |
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
事件 | |
|---|---|
gmp-click |
function(event)参数:
在点击控件时触发。 |
PlaceButtonElementOptions 接口
接口
google.maps.places.PlaceButtonElementOptions
由 PlaceButtonElement 实现
“PlaceButtonElement”的选项。
属性 | |
|---|---|
actionAriaLabel
可选 |
类型:
string optional内部控件的 ARIA 标签。仅图标控件应始终具有 aria-label,以描述其用途和行为。在角落中呈现的控件不会显示标签,因此建议使用 aria-label,而不是角落控件的标签。 |
label
可选 |
类型:
string optional要在控件中显示的标签。对于具有预定义操作类型的链接,系统会忽略此属性。在操作角槽中呈现的链接和按钮不会显示标签。建议改用 action-aria-label 属性来控制圆角。 |
PlaceLinkElement 类
class
google.maps.places.PlaceLinkElement
extends HTMLElement
implements PlaceLinkElementOptions
library "places"
显示插入到 action-main 插槽或 action-corner 插槽中的链接。默认情况下,该链接会显示在 action-main 槽位中。使用 action 属性指定链接的行为。ActionLinkType 中列出了多种可供使用的操作类型。对于自定义链接,请指定 custom 操作类型,并设置 href 和 label 属性。
<gmp-place-link action="value-name" action-aria-label="string" default-icon-hidden href="string" label="string" target="string"> </gmp-place-link>
const {PlaceLinkElement} = await google.maps.importLibrary("places");
属性 | |
|---|---|
action
attr: action |
类型:
ActionLinkType optional点击链接时要执行的操作类型。确定链接的默认标签、图标和目标 href。使用
custom 类型并指定 href 属性,以手动设置目的地。HTML 属性: action="value-name" |
actionAriaLabel
attr: action-aria-label |
类型:
string optional默认值:
undefined内部控件的 ARIA 标签。仅图标控件应始终具有 aria-label,以描述其用途和行为。在角落中呈现的控件不会显示标签,因此建议使用 aria-label,而不是角落控件的标签。
HTML 属性: action-aria-label="string" |
defaultIconHidden
attr: default-icon-hidden |
输入类型:
boolean optional输出类型: boolean默认值:
false是否为除自定义类型以外的所有链接类型隐藏默认图标。
HTML 属性: default-icon-hidden |
href
attr: href |
类型:
string optional默认值:
undefined点击链接时要打开的网址。仅当
action 属性设置为 custom 时,才会使用此属性。HTML 属性: href="string" |
label
attr: label |
类型:
string optional默认值:
undefined要在控件中显示的标签。对于具有预定义操作类型的链接,系统会忽略此属性。在操作角槽中呈现的链接和按钮不会显示标签。建议改用
action-aria-label 属性来控制圆角。HTML 属性: label="string" |
target
attr: target |
类型:
string optional默认值:
undefinedHTML 属性: target="string" |
槽数 | |
|---|---|
icon-start |
一个槽,用于放置在标签之前开始的图标内容。此属性同时用于主操作控件和角落操作控件。当控件收起至角落状态时,此槽中的内容会呈现。 |
零件 | |
|---|---|
button |
一个 css 部分,用于定位内部控件元素。 |
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
事件 | |
|---|---|
gmp-click |
function(event)参数:
在点击控件时触发。 |
PlaceLinkElementOptions 接口
接口
google.maps.places.PlaceLinkElementOptions
由 PlaceLinkElement 实现
“PlaceLinkElement”的选项。
属性 | |
|---|---|
action
可选 |
类型:
ActionLinkType optional |
actionAriaLabel
可选 |
类型:
string optional内部控件的 ARIA 标签。仅图标控件应始终具有 aria-label,以描述其用途和行为。在角落中呈现的控件不会显示标签,因此建议使用 aria-label,而不是角落控件的标签。 |
href
可选 |
类型:
string optional |
label
可选 |
类型:
string optional要在控件中显示的标签。对于具有预定义操作类型的链接,系统会忽略此属性。在操作角槽中呈现的链接和按钮不会显示标签。建议改用 action-aria-label 属性来控制圆角。 |
target
可选 |
类型:
string optional |
ActionLinkType 常量
常量
google.maps.places.ActionLinkType
库 "places"
PlaceLinkElement在被点击时执行的操作。确定图标、标签和 href 目标。
这些常量也可以用作字符串。在 TypeScript 中,字符串字面量由 ActionLinkTypeString 类型定义。
const {ActionLinkType} = await google.maps.importLibrary("places");
常量 | |
|---|---|
CALL |
触发 tel: 链接以致电该地点。具体行为取决于操作系统。 |
CUSTOM |
请将此操作类型用于自定义链接。使用此操作类型时,必须在 PlaceLinkElement 上设置 href 属性。 |
OPEN_DIRECTIONS |
打开前往 PlaceLinkElement.target 指定位置处的地点的路线。 |
OPEN_MAP |
在 PlaceLinkElement.target 指定的位置打开地图。 |
OPEN_WEBSITE |
在 PlaceLinkElement.target 指定的位置打开地点的网站。 |
ActionButtonPosition 常量
常量
google.maps.places.ActionButtonPosition
库 "places"
控件在地点详情 widget 中的插槽位置。
这些常量也可以用作字符串。在 TypeScript 中,字符串字面量由 ActionButtonPositionString 类型定义。
const {ActionButtonPosition} = await google.maps.importLibrary("places");
常量 | |
|---|---|
ACTION_CORNER |
该控件会呈现在 widget 的角落。角落控件仅呈现一个图标。 |
ACTION_MAIN |
该控件在 widget 的主要内容区域中呈现。标签和图标会呈现。 |
PlaceActionEvent 类
class
google.maps.places.PlaceActionEvent
extends Event
library "places"
点击操作按钮时触发的事件。
const {PlaceActionEvent} = await google.maps.importLibrary("places");
属性 | |
|---|---|
place
readonly |
类型:
Place被点击的地点。 |
PlaceNameElement 类
class
google.maps.places.PlaceNameElement
extends HTMLElement
implements PlaceNameElementOptions
library "places"
在地点详情元素中显示地点的名称。
<gmp-place-name></gmp-place-name>
const {PlaceNameElement} = await google.maps.importLibrary("places");
方法 | |
|---|---|
继承的方法:
addEventListener、removeEventListener
|
PlaceNameElementOptions 接口
接口
google.maps.places.PlaceNameElementOptions
由 PlaceNameElement 实现
“PlaceNameElement”的选项。