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 的標準內容包括:
- 媒體
- 地址
- rating
- 類型
- 價格
- 無障礙入口圖示
- 網站
- 電話號碼
- 營業時間
- 摘要
- 特定類型的重點
- 評論
- 功能清單
PlaceDetailsCompactElement 的標準內容包括:- 媒體
- rating
- 類型
- 價格
- 無障礙入口圖示
- 營業中狀態
PlaceSearchElement 的標準內容包括:- 媒體
- rating
- 類型
- 價格
- 無障礙入口圖示
例如:
<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詳情請參閱《 PlaceMediaElement.preferredSize》。 |
MediaSize 常數
constants
google.maps.places.MediaSize
library "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 常數
constants
google.maps.places.AttributionColor
library "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預設值:
undefined決定連結開啟的位置。詳情請參閱 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target。
HTML 屬性: target="string" |
運算單元 | |
|---|---|
icon-start |
圖示內容的版位,位於標籤前方。這項設定會同時套用至主要和角落動作控制項。當控制項收合至角落狀態時,這個版位中的內容就會顯示。 |
零件 | |
|---|---|
button |
指定內部控制項元素的 CSS 部分。 |
方法 | |
|---|---|
繼承:
addEventListener、removeEventListener |
事件 | |
|---|---|
gmp-click |
function(event)引數:
使用者點選控制項時觸發。 |
PlaceLinkElementOptions 介面
介面
google.maps.places.PlaceLinkElementOptions
由 PlaceLinkElement 實作
「PlaceLinkElement」的選項。
屬性 | |
|---|---|
action
選填 |
類型:
ActionLinkType optional詳情請參閱《 PlaceLinkElement.action》。 |
actionAriaLabel
選填 |
類型:
string optional內部控制項的 ARIA 標籤。僅含圖示的控制項一律應有 aria-label,說明其用途和行為。角落顯示的控制項不會顯示標籤,因此建議使用 aria-label,而非角落控制項的標籤。 |
href
選填 |
類型:
string optional詳情請參閱《 PlaceLinkElement.href》。 |
label
選填 |
類型:
string optional控制項中顯示的標籤。如果連結具有預先定義的動作類型,系統會忽略這個屬性。在動作角落版位中顯示的連結和按鈕不會顯示標籤。建議改用 action-aria-label 屬性控制圓角。 |
target
選填 |
類型:
string optional詳情請參閱《 PlaceLinkElement.target》。 |
ActionLinkType 常數
constants
google.maps.places.ActionLinkType
library "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 常數
constants
google.maps.places.ActionButtonPosition
library "places"
Place Details 小工具中控制項的插槽位置。
這些常數也可以做為字串使用。在 TypeScript 中,字串常值是由 ActionButtonPositionString 類型定義。
const {ActionButtonPosition} = await google.maps.importLibrary("places");
常數 | |
|---|---|
ACTION_CORNER |
控制項會顯示在小工具的角落。角落控制項只會顯示圖示。 |
ACTION_MAIN |
控制項會顯示在小工具的主要內容區域中。系統會顯示標籤和圖示。 |
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"
顯示 Place Details 元素中的地點名稱。
<gmp-place-name></gmp-place-name>
const {PlaceNameElement} = await google.maps.importLibrary("places");
方法 | |
|---|---|
繼承:
addEventListener、removeEventListener |
PlaceNameElementOptions 介面
介面
google.maps.places.PlaceNameElementOptions
由 PlaceNameElement 實作
「PlaceNameElement」的選項。