组件 API

360° 图库

gwd-360gallery

用于显示正在轮播的某个对象的图库对象。

属性

名称 说明
images:string 图库中使用的一系列图片路径,各路径间以英文逗号分隔。
autoplay:boolean 图库加载后是否自动播放其中的图片。
wrap:boolean 图库是否允许用户在滑动图片时循环浏览,而不在图片序列的首尾帧停下。

事件

名称 说明
firstinteraction 当用户首次与图库互动时发送。
allframesviewed 当图库的所有帧都已至少显示一次时发送。
allframesloaded 当图库的所有帧都已加载完毕时发送。
frameshown 当显示新帧时发送。
frameactivated 当开始启动新帧(即使新帧尚未显示)时发送。
frametap 当用户点按任意帧时发送。

方法

名称 说明
goToFrame(frame:number, opt_animate:string, opt_direction:string) 为指定的帧添加动画效果。
rotateOnce(opt_duration:number, opt_direction:string) 轮播一次图库中的对象。
goForwards() 将图库向前移动一帧。
goBackwards() 将图库向后移动一帧。
添加到日历

gwd-addtocalendar

向日历中添加活动。

属性

名称 说明
event-title:string 将在用户日历中显示的活动名称。
start-date:string 活动的开始日期。
start-time:string 活动的开始时间(24 小时制)。
end-date:string 活动的结束日期。
end-time:string 活动的结束时间(24 小时制)。
timezone:string 活动的时区。设置该属性后,当用户位于其他时区时,系统会调整显示为当地的正确时间。
location:string 活动地点。
description:string 活动说明。
icalendar:boolean 是否使用 iCalendar 文件。
google:boolean 是否使用 Google 日历。
windows-live:boolean 是否使用 Windows Live 日历。
yahoo:boolean 是否使用 Yahoo! 日历。
bg-color:string 表示下拉菜单背景颜色的十六进制值。
font-color:string 表示下拉菜单字体颜色的十六进制值。
font-family:string 下拉菜单字体的名称。
font-size:string 下拉菜单字体的大小。
font-weight:string 下拉菜单字体的粗细。
highlight-color:string 表示下拉菜单突出显示颜色的十六进制值。
音频

gwd-audio

一种组件,用于封装 HTMLAudioElement

属性

名称 说明
autoplay:boolean 音频加载完毕时是否自动播放。
loop:boolean 音频播放完毕时是否循环播放。
muted:boolean 音频在开始播放时是否静音。
controls:boolean 是否启用默认的原生播放器控件。
sources:string 一系列不同格式的音频来源,各来源间以英文逗号分隔。

事件

名称 说明
play 当媒体在之前的暂停事件后又开始播放时发送。
pause 暂停播放时发送。
playing 当媒体开始播放(无论是首次播放、暂停后又开始播放,还是结束播放后又重新开始播放)时发送。
ended 播放完毕时发送。
volumechange 当音量发生变化(包括设置音量和更改静音属性)时发送。
seeked 跳转操作完成时发送。
waiting 当因为有其他操作(如跳转)尚未完成而导致请求的操作(如播放)被延迟时发送。

方法

名称 说明
mute() 切换音频的静音/取消静音状态。
pause() 暂停音频。
play() 播放音频。
replay() 重新播放音频。
seek(time:number) 跳至音频中的指定时间。
轮播式图库

gwd-carouselgallery

一种图库对象,能够以轮播方式显示各个帧。

属性

名称 说明
images:string 图库中使用的一系列图片路径,各路径间以英文逗号分隔。
groups:string 一系列组 ID,各 ID 间以英文逗号分隔。
transition-duration:number 图库动画播放速度(以毫秒为单位)。
start-frame:number 最开始显示的图片的编号。
autoplay:boolean 是否让所有帧都自动播放一次。
has-navigation:boolean 是否自动包含图库导航控件。
navigation-thumbnails:boolean 是否使用缩略图(而非圆点)进行导航。
navigation-highlight:color 在导航中用于突出显示活动帧的 CSS 颜色代码。
scaling:string 如何缩放图片内容以适应帧的大小。
frame-width:number 一个内容面板的宽度。
frame-height:number 一个内容面板的高度。
neighbor-rotation-y:number 让当前居中面板的邻近面板绕 Y 轴旋转的角度,用于使邻近面板倾斜。
neighbor-translation-x:number 让当前居中面板的邻近面板沿 X 轴平移的距离,用于调整邻近面板的位置。
neighbor-translation-y:number 让当前居中面板的邻近面板沿 Y 轴平移的距离。
neighbor-translation-z:number 让当前居中面板的邻近面板沿 Z 轴平移的距离。
exit-urls:string 一系列与图库中的图片对应的退出网址,各网址间以英文逗号分隔。
show-reflection:boolean 是否显示采用 CSS3 实现的反射效果。
pause-front-media:boolean 当前帧发生变化时,是否暂停上一帧中的媒体元素(例如,视频或音频)。
resume-next-media:boolean 当前帧发生变化时,是否在新的当前帧中继续播放媒体元素(例如,视频或音频)。

事件

名称 说明
firstinteraction 当用户首次与图库互动时发送。
allframesviewed 当图库的所有帧都已至少显示一次时发送。
allframesloaded 当图库的所有帧都已加载完毕时发送。
autoplayended 当自动播放因任何原因结束时发送。如果是因达到预期的播放时长而自然结束,那么 event.detail.completed 将为 true,否则为 false。
frameshown 当显示新帧时发送。
frameactivated 当开始启动新帧(即使新帧尚未显示)时发送。
frameautoplayed 当帧已启动以自动播放时发送。此事件的触发频率可能高于 frameshown,这是因为系统会针对同时显示的多个帧中的每个帧单独触发此事件。
frametap 当用户点按任意帧时发送。
reachleftend 当图库达到最左端时发送。
reachrightend 当图库达到最右端时发送。
trackstart 当鼠标拖动/触摸拖动操作开始时发送。
track 组件将记录鼠标拖动/触摸拖动操作的 X 轴和 Y 轴位置数据。
trackend 当鼠标拖动/触摸拖动操作结束时发送。

方法

名称 说明
goToFrame(index:number, opt_animate:string) 转到指定帧。
goForwards(opt_animate:string) 转到下一帧(如果有)。
goBackwards(opt_animate:string) 转到上一帧。
rotateOnce(opt_duration:number, opt_direction:string) 让图库中的每个帧都显示一次。
stopRotation() 停止当前的自动轮播。
广告插入点

gwd-cuepoint

一种组件,附加到视频组件,用于在视频达到特定时间时触发事件。

属性

名称 说明
time:number 触发相应事件的时间,以秒为单位。

事件

名称 说明
cuepoint 当媒体播放已达到广告插入点中定义的时间时发送。

方法

名称 说明
seek() 将视频时间设为广告插入点的时间。
setTime(time:number) 设置广告插入点的时间。
日期交换

gwd-dateswap

日期交换功能将根据当前日期与目标日期范围的比较结果,更改元素的显示/隐藏状态。

属性

名称 说明
from_date:string 一个以 RFC2822ISO 8601 格式表示日期的字符串。
to_date:string 一个以 RFC2822ISO 8601 格式表示日期的字符串。

事件

名称 说明
before 当前日期早于 from_date(不包含此日期)时发送。
during 当前日期介于 from_dateto_date(包含此日期)之间时发送。
after 当前日期晚于 to_date(不包含此日期)时发送。

方法

名称 说明
checkDate() 将当前日期与日期范围进行比较。
图库导航

gwd-gallerynavigation

Google Web Designer 图库组件的导航控件。

属性

名称 说明
for:string 图库中使用的一系列图片路径,各路径间以英文逗号分隔。
highlight:color 在导航中用于突出显示活动帧的 CSS 颜色代码。
use-thumbnails:boolean 是否使用缩略图(而非圆点)进行导航。
常规广告

gwd-genericad

用于实现常规广告容器。

事件

名称 说明
adinitialized 当常规元素马上要呈现广告内容时发送。

方法

名称 说明
initAd() 收到启动器触发的相应事件时启动广告。
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) 转到展开后的广告。如果未指定页面 ID,广告会转到默认页面。
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string) 退出广告并可选择合拢广告。
手势

gwd-gesture

多个手势事件的抽象。

属性

名称 说明
touch-action:string 应如何解读触摸操作。有效值为 autononepan-xpan-y。默认行为与该属性设为 none 时的行为相同。

事件

名称 说明
hover 当鼠标位置/触摸位置进入组件边界时发送。
hoverend 当鼠标位置/触摸位置离开组件边界时发送。
trackstart 当鼠标拖动/触摸拖动操作开始时发送。
track 组件将记录鼠标拖动/触摸拖动操作的 X 轴和 Y 轴位置数据。
trackend 当鼠标拖动/触摸拖动操作结束时发送。
tap 当记录到用户点按/鼠标点击操作时发送。
swipeleft 当用户向左滑动屏幕时发送。
swiperight 当用户向右滑动屏幕时发送。
swipeup 当用户向上滑动屏幕时发送。
swipedown 当用户向下滑动屏幕时发送。
Google 广告

gwd-google-ad

用于实现 Google 广告容器。

属性

名称 说明
polite-load:boolean 相应广告是否必须遵循礼让加载语义。
fullscreen:boolean 相应广告是否尝试展开至全屏。

事件

名称 说明
adinitialized 当元素马上要呈现广告的内容时发送。
expandstart 当启动器触发展开开始事件时发送。
expandfinish 当启动器触发展开结束事件时发送。
collapsestart 当启动器触发合拢开始事件时发送。
collapsefinish 当启动器触发合拢结束事件时发送。
fullscreensupport 支持全屏展开时发送。

方法

名称 说明
initAd() 收到启动器触发的相应事件时启动广告。
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) 转到展开后的广告。如果未指定页面 ID,广告会转到默认页面。
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) 退出广告并可选择合拢广告。
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) 退出广告后转到指定网址(无论在 Studio 中指定的值是什么)。如果 opt_collapseOnExit 为 true,则合拢广告。
incrementCounter(metric:string, opt_isCumulative:boolean) 跟踪计数器事件。
startTimer(timerId:string) 启动事件计时器。
stopTimer(timerId:string) 停止事件计时器。
reportManualClose() 记录浮动广告、弹出式广告、展开式广告、带弹出式内容的页内广告或带浮动内容的页内广告的手动关闭操作。此方法是 Enabler.reportManualClose 的替代方法。
热点

gwd-hotspot

一种组件,在视频的特定时间显示和隐藏热点。

属性

名称 说明
show-time:number 热点开始显示的时间,以秒为单位。
hide-time:number 热点停止显示的时间,以秒为单位。
left:string 视频前方热点的左侧位置(以相对于视频帧宽度的位置值表示,例如 5%)。
top:string 视频前方热点的顶部位置(以相对于视频帧高度的位置值表示,例如 5%)。
width:string 视频前方热点的宽度(以相对于视频帧宽度的位置值表示)。
height:string 视频前方热点的高度(以相对于视频帧高度的位置值表示)。

事件

名称 说明
hotspotshown 当热点变为可见时发送。
hotspothidden 当热点被隐藏时发送。

方法

名称 说明
show(showHide:boolean) 更改热点显示/隐藏状态。如果 showHide 为 true,则显示热点;如果 showHide 为 false,则隐藏热点。
seek(showHide:boolean) 将视频时间设为热点的显示时间或隐藏时间。如果 showHide 为 true,则使用显示时间;如果 showHide 为 false,则使用隐藏时间。
setTimes(showTime:number, hideTime:number) 设置热点的显示时间和隐藏时间。
iframe

gwd-iframe

一种组件,用于封装 HTMLIframeElement

属性

名称 说明
source:string iframe 的来源。此来源将替换原生图片元素中的 src 属性。
scrolling:string iframe 是否显示滚动条。

事件

名称 说明
iframeload 当 iframe 加载完毕时发送。

方法

名称 说明
setUrl(url:string) 更改 iframe 的网址并立即加载 iframe。
图片

gwd-image

一种组件,用于封装 HTMLImageElement 以支持延迟加载图片来源。

属性

名称 说明
source:file 图片的来源。此来源将替换原生图片元素中的 src 属性。
alt:string 图片的替代文字。
scaling:string 定义图片在适应帧尺寸时采用的缩放方式。
alignment:string 图片在观看区域内的对齐方式。
图片按钮

gwd-imagebutton

一种图片按钮,支持以下状态:鼠标未按下/鼠标悬停其上/鼠标按下。

属性

名称 说明
up-image:file 按钮处于未按下状态时所用图片的网址。
over-image:file 按钮处于鼠标悬停其上状态时所用图片的网址。
down-image:file 按钮处于按下状态时所用图片的网址。
bgcolor:string 按钮的背景颜色。
alignment:string 图片在观看区域内的对齐方式。
scaling:string 图片在父级容器中的尺寸调整方式。
disabled:boolean 是否停用按钮。

事件

名称 说明
imagebuttonloaded 当所有图片都已加载完毕时发送。

方法

名称 说明
toggleEnable() 在已启用/已停用之间切换。
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string) 为所有按钮状态设置图片来源。
地图

gwd-map

用于扩展 HTMLElement 以封装 Google Maps API 调用

属性

名称 说明
api-key:string Google API 密钥。请访问 https://developers.google.com/maps/documentation/javascript/get-api-key
query:string 用于从 Google Places API 返回位置信息的搜索查询的名称。如果没有数据融合表 ID,则必须提供该名称。
start-latitude:decimal 起始中心纬度坐标。值必须介于 -90 到 90(度)之间。
start-longitude:decimal 起始中心经度坐标。值必须介于 -180 到 180(度)之间。
request-user-location:boolean 是否必须要求提供用户位置信息。如果设为 true,系统将提示用户分享其位置信息。
fusion-table-id:string 公开 Google 数据融合表 ID。
client-id:string Google Maps Premier 客户端 ID。(已弃用)
search-radius:number 位置搜索范围的最小半径(以米为单位)。
result-limit:number 单个查询中可返回的结果数量上限。
start-zoom:number 起始缩放级别(采用 Google Maps API 所使用的单位)。默认级别为 16,即邻域级别。
marker-src:string 地标图片文件名(作为包含关闭、开启和阴影组件的子画面)。
gps-src:string GPS 定位蓝点图片文件名。
msg-start-position-prompt:string 对话框中提示选择起始位置的文字的本地化字符串。
msg-gps-button-label:string 用于从 Geolocation API 检索用户位置信息的按钮所用标签的本地化字符串。
msg-manual-position-button-label:string 用于显示位置搜索字段的按钮所用标签的本地化字符串。
msg-manual-position-prompt:string 对话框中提示搜索起始地图位置的文字的本地化字符串。
msg-manual-position-placeholder:string 用于查找起始地图位置的搜索框所用占位文字的本地化字符串。
msg-geocode-failure:string 当使用 Geolocation API 的尝试失败时显示的对话框提示文字的本地化字符串。
msg-no-results-found:string 在所选位置未找到任何地图结果时显示的对话框提示文字的本地化字符串。

事件

名称 说明
pinclick 当用户在地图上选择图钉时。

方法

名称 说明
setCenter(latitude:number, longitude:number, opt_accuracy:number) 将根据纬度/经度指定的位置设为地图中心。
页面

gwd-page

一个页面表示页面组中的单个卡片。

属性

名称 说明
expanded:boolean 相应页面是否被视为展开后页面(广告专用)。
centered:boolean 相应页面的内容是否居中放置。
alt-orientation-page:string 适合以其他屏幕方向呈现内容的页面对应的页面 ID。

事件

名称 说明
attached 当页面附加到 DOM 后立即发送。
detached 当页面从 DOM 中移除后立即发送。
pageactivated 当页面可以开始显示时发送。
pagedeactivated 当页面不再显示时发送。
pageload 当页面内容成功加载后发送。
pagepresenting 当页面马上要开始其简介动画时发送。
shake 当检测到设备摇晃手势时发送。
tilt 当检测到设备倾斜时发送。
rotatetoportrait 当设备旋转为纵向时发送。
rotatetolandscape 当设备旋转为横向时发送。
页面组

gwd-pagedeck

页面组是包含多个页面的容器。页面组一次展示一个页面,并且各个不同的页面可以按任何指定顺序、并采用任意受支持的页面转换方式循环展示。

属性

名称 说明
default-page:string 默认页面的 ID。

事件

名称 说明
pagetransitionstart 在页面转换开始前发送。
pagetransitionend 在页面转换完成后发送。

方法

名称 说明
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) 前往页面组中的下一页。
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) 前往页面组中的上一页。
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) 前往页面组中的指定页。
getCurrentPage() 返回当前页面;如果未显示任何页面,则返回 null。
getDefaultPage() 如果已指定默认页面,则返回默认页面,否则返回第一个页面。
getPage(pageId:string) 返回具有指定 ID 的页面。
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean) 返回该属性的值等于指定值的页面元素;如果未找到任何页面,则返回 -1。
getOrientationSpecificPage(orientation:string, pageId:string) 返回对应指定屏幕方向的页面。
getElementById(id:string) 在此页面组中的所有页面中找到指定 ID 对应的元素。由于 gwd-pagedeck 仅保留 DOM 中的活动页面,因此标准的 document.getElementById(id) 将不会返回非活动页面中的元素。引用非活动页面中的元素是一种很常见的情况(尤其是在动态广告中)。在这些情况下,可以使用此方法按元素 ID 取消对相应元素的引用。

示例

暂停 2 秒后转到广告中的下一个页面

此代码示例假定您的广告中至少有 2 个页面。然后,您便可仿照以下示例创建一个事件,以使系统每 2 秒就更改一次页面:

  • 目标 - 选择相应的页面。第一个页面为 page1
  • 事件 - 依次选择页面 > 可以呈现页面了
  • 操作 - 依次选择自定义 > 添加自定义操作

在“自定义代码”对话框中,为您的函数命名。在此示例中,您可以指定一个诸如 turnpage 之类的名称。然后,粘贴以下代码:

setTimeout(nextPage, 2000);
function nextPage() {
   document.getElementById('pagedeck').goToNextPage();
}

接下来,使用相同的自定义操作,分别向各个页面添加同一事件。

视差

gwd-parallax

视差组件。

属性

名称 说明
images:string 占位符属性,可供“属性”面板显示视差 assetList 控件。
yscroll:decimal 在场景中呈现视差动画时使用的滚动系数。

事件

名称 说明
ready 当视差组件中的所有素材资源都已加载完毕时发送。
粒子效果

gwd-particleeffects

一种组件,可显示由粒子系统生成的动画。组件中的每种粒子效果也都有自己的一组属性。

属性

名称 说明
autoplay:boolean 组件加载完毕后是否自动播放动画。
time-limit:number 动画时间限制。值 -1 表示没有时间限制。默认值为 29 秒。
各种效果的属性

gwd-particles

属性

名称 说明
acceleration-x:number 水平加速度。每帧的水平速度变化速率,该速率会与粒子的当前水平速度相加。
acceleration-y:number 垂直加速度。每帧的垂直速度变化速率,该速率会与粒子的当前垂直速度相加。
angle-max:number 粒子移动初始方向的最大角度,介于 -360 到 360 之间。
angle-min:number 粒子移动初始方向的最小角度,介于 -360 到 360 之间。
autoplay:boolean 在父粒子效果组件开始播放时是否自动播放动画。
color1:color 第一种颜色。
color2:color 第二种颜色。
emit-interval:number 新生成的每个粒子之间的帧数。
emit-x-max:string 粒子原始区域的最大 x 坐标。
emit-x-min:string 粒子原始区域的最小 x 坐标。
emit-y-max:string 粒子原始区域的最大 y 坐标。
emit-y-min:string 粒子原始区域的最小 y 坐标。
loop:boolean 是否循环播放动画。
number:number 未停止或未循环播放该效果的动画时生成的粒子总数。
opacity-min:number 粒子的最小初始不透明度。
opacity-max:number 粒子的最大初始不透明度。
opacity-rate:number 每帧的不透明度变化速率,该速率会与粒子的当前不透明度相加。
random-colors:boolean 是否以介于 color1color2 之间的随机颜色生成粒子。如果为 false,则所有粒子都初始化为 color1
shape:string 粒子的形状。
  • square
  • circle
  • line
  • teardrop
  • image
size-max:number 粒子的最大尺寸(以像素为单位)。
size-min:number 粒子的最小尺寸(以像素为单位)。
size-rate:number 每帧的尺寸变化速率,该速率会与粒子的当前尺寸相加。
skip-forward:number 动画的起点,以占所生成的粒子总数的百分比表示。
speed-max:number 每帧的粒子最大速度(以像素为单位)。
speed-min:number 每帧的粒子最小速度(以像素为单位)。
sprite-image-src:file 粒子形状的图片来源。
turbulence-frequency:number 湍流的频率。值越高,动画中的不规则变化就越频繁。它应该是一个正数。
turbulence-rate:number 强度随时间变化的速率。
turbulence-strength:number 对粒子施加的湍流强度。它应该是一个正数。
turbulence-trail:number 要渲染粒子的多少个先前状态和当前状态。

事件

名称 说明
timelimitreached 当动画播放达到指定的时间限制时发送。

方法

名称 说明
play() 播放动画。
pause() 暂停动画。
stop() 停止动画。
雪碧图

gwd-spritesheet

显示“雪碧图”中的一个关键帧或动画。

属性

名称 说明
imagesource:file “雪碧图”文件的网址。
offsetx:number

“雪碧图”的左边缘距离以下任一边缘的偏移量(以像素为单位):

  • 要使用的“雪碧图”文件中特定图片的左边缘
  • 制作动画时使用的首张子图的左边缘
offsety:number

“雪碧图”的上边缘距离以下任一边缘的偏移量(以像素为单位):

  • 要使用的“雪碧图”文件中特定图片的上边缘
  • 制作动画时使用的首张子图的上边缘
clipwidth:number

以下任一图片的宽度(以像素为单位):

  • 要使用的“雪碧图”文件中的特定图片
  • 制作动画时使用的首张子图
clipheight:number

以下任一图片的高度(以像素为单位):

  • 要使用的“雪碧图”文件中的特定图片
  • 制作动画时使用的首张子图
alignment:string 确定图片在容器内的位置。
scaling:string 确定各种尺寸的图片在组件内的显示方式。
totalframecount:number 动画包含的帧数。
duration:number 每一帧的时长(以毫秒为单位)。
loopcount:number 动画重复播放的次数。如果设为 0,则为不限次数重复播放。
autoplay:boolean 动画是否自动播放。
endonstartframe:boolean 动画是否在初始帧结束播放。
reverseplay:boolean 动画是否反向播放。

事件

名称 说明
animationend 当动画结束时发送。
animationpause 当动画暂停播放时发送。
animationplay 当动画开始播放时发送。
animationrestart 当动画暂停播放后又重新开始播放时发送。

方法

名称 说明
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean) 定义新动画。
play() 播放动画。
pause() 暂停动画。
togglePlay() 在播放和暂停播放动画之间切换。
restart() 重放动画。
previousFrame() 显示上一帧。
nextFrame() 显示下一帧。
goToFrame(id:number) 通过帧号显示特定帧。
星级

gwd-starratings

一个用于呈现一行星形(供评分使用)的组件。

属性

名称 说明
ratingvalue:decimal 评分值。
iconsize:number 星形图标大小。
isemptyshown:boolean 是否显示空星形图标。
isemptycolored:boolean 空星形图标是否有颜色。
colorprimary:color 主要填充颜色。
colorsecondary:color 辅助渐变颜色。
gradienttype:string 渐变类型。
ratingmax:number 最高星级。
ratingmin:number 最低星级。

事件

名称 说明
complete 创建了星级图标时发送。
validationerror 星级评分值低于最低评分时发送。
街景

gwd-streetview

“Google 街景”组件

属性

名称 说明
key:string 您的 Google Maps Platform API 密钥。若想了解如何为您的应用获取一个唯一密钥,请访问:https://developers.google.com/maps/documentation/javascript/get-api-key
latitude:decimal 相应位置的纬度值。
longitude:decimal 相应位置的经度值。
interaction:boolean 视图是否可以平移/旋转。
heading:decimal 指明相机的罗盘方向。可接受的值介于 0 到 360 之间(0 和 360 这两个值均表示“北”,值 90 表示“东”,值 180 表示“南”)。如果您没有指定罗盘方向,则系统会计算出一个值,将相机从进行最近距离的拍摄时所处的那个点指向指定的位置。
pitch:decimal 用于指定相机相对于街景拍摄车的向上或向下倾斜角度。这通常会是(但并非总是)水平角度。正值表示相机向上倾斜(90 度表示相机垂直向上);负值表示相机向下倾斜(-90 度表示相机垂直向下)。
zoom:number 指定相机相对于街景拍摄车的缩放比例。
手滑式图库

gwd-swipegallery

在可滑动浏览的内容条中显示各个帧的图库对象。

属性

名称 说明
images:string 图库中使用的一系列图片路径,各路径间以英文逗号分隔。
groups:string 一系列组 ID,各 ID 间以英文逗号分隔。
transition-duration:number 图库动画播放速度(以毫秒为单位)。
start-frame:number 指定从哪一帧开始播放(帧号是从 1 计起的)。
num-frames-to-display:number 一次显示的帧数。
frame-snap-interval:number 每滑动一下后前进的帧数。
autoplay:boolean 是否让图库自动轮播一次。
has-navigation:boolean 是否包含图库导航控件。
navigation-thumbnails:boolean 是否使用缩略图(而非圆点)进行导航。
navigation-highlight:color 在导航中用于突出显示活动帧的 CSS 颜色代码。
scaling:string 如何缩放图片内容以适应帧的大小。
swipe-axis:string 系统在该轴上检测到了滑动。
offset:number 相邻内容帧之间的空白区域的大小。
frame-width:number 一个内容帧的宽度。优先级高于 num-frames-to-display
frame-height:number 一个内容帧的高度。
autoplay-duration:number 自动播放帧的总时长。
autoplay-step-interval:number 自动播放期间各帧之间的时间间隔。
exit-urls:string 一系列与图库中的图片对应的退出网址,各网址间以英文逗号分隔。
disable-gesture:boolean 隐藏/停用可为图库启用触摸导航的“手势”组件。
pause-front-media:boolean 当前帧发生变化时,是否暂停上一帧中的媒体元素(例如,视频或音频)。
resume-next-media:boolean 当前帧发生变化时,是否在新的当前帧中继续播放媒体元素(例如,视频或音频)。

事件

名称 说明
firstinteraction 当用户首次与图库互动时发送。
allframesviewed 当图库的所有帧都已至少显示一次时发送。
allframesloaded 当图库的所有帧都已加载完毕时发送。
autoplayended 当自动播放因任何原因结束时发送。如果是因达到预期的播放时长而自然结束,那么 event.detail.completed 将为 true,否则为 false。
frameshown 当所有必要的动画播放完毕后显示新帧时发送。
frameactivated 当开始启动新帧(即使新帧尚未显示)时发送。
frameautoplayed 当帧已启动以自动播放时发送。此事件的触发频率可能高于 frameshown,这是因为系统会针对同时显示的多个帧中的每个帧单独触发此事件。
frametap 当用户点按任意帧时发送。
reachleftend 当图库达到最左端时发送。
reachrightend 当图库达到最右端时发送。
framemouseover 当用户将鼠标移到帧上时发送。
framemouseout 当用户将鼠标从帧上移开时发送。
trackstart 当鼠标拖动/触摸拖动操作开始时发送。
track 组件将记录鼠标拖动/触摸拖动操作的 X 轴和 Y 轴位置数据。
trackend 当鼠标拖动/触摸拖动操作结束时发送。

方法

名称 说明
goToFrame(frame:number, opt_animate:string) 转到指定帧。
rotateOnce(opt_duration:number, opt_direction:string) 让图库中的每个帧都显示一次。
stopRotation() 停止当前的自动轮播。
goForwards() 将图库向前移动一帧。
goBackwards() 将图库向后移动一帧。

示例

为手滑式图库中的每一帧显示图片说明

此代码示例展示了如何为手滑式图库中的每张图片创建图片说明,其中假设您已在场景中放置了一个 ID 为 gwd-swipegallery_1(默认 ID)的手滑式图库组件,并向此组件添加了图片。

对于图片说明,您还需创建一个 Div 元素,并为其指定 ID caption-div。然后,仿照以下示例创建一个事件:

  • 目标 - 选择 ID 应为 gwd-swipegallery_1 的手滑式图库
  • 事件 - 依次选择手滑式图库 > 已显示帧
  • 操作 - 依次选择自定义 > 添加自定义操作

在“自定义代码”对话框中,为您的函数命名。在此示例中,您可以指定一个诸如 showcaption 之类的名称。然后,粘贴以下代码:

var gallery = document.getElementById('gwd-swipegallery_1');
var div = document.getElementById('caption-div');
var text = {
  1: "The text for frame 1",
  2: "The text for frame 2",
  3: "The text for frame 3"
};
div.textContent = text[gallery.currentIndex];
点按区域

gwd-taparea

点击/点按事件的抽象。

属性

名称 说明
exit-override-url:string 点按“点按区域”后退出的网址。

事件

名称 说明
action 当用户触摸(在移动设备上)或点击(在桌面设备上)按钮时发送。
点按通话/发短信

gwd-taptocall

一种组件,用于在用户点击或触摸后向指定的电话号码打电话或发短信。

属性

名称 说明
number:string 指定向哪个电话号码打电话或发短信。
action:string 选择是发短信还是打电话。

事件

名称 说明
action 当用户触摸(在移动设备上)或点击(在桌面设备上)按钮时发送。
taptocall 在打电话或发短信时发送。

方法

名称 说明
dial() 向指定的电话号码打电话或发短信。
过渡效果图库

gwd-transitiongallery

一种组件,可按顺序显示一系列图片,各张图片之间都带有动画效果。您可以在下面查找特定的过渡类型,以查看属性列表。

特定过渡类型的属性

过渡类型:百叶窗

gwd-blinds

过渡效果图库的百叶窗效果类型,新图片像从百叶窗后面露出来一样显示。

属性

名称 说明
direction:string 效果的方向。默认值为从左到右。
  • lefttoright - 从左到右。
  • righttoleft - 从右到左。
  • toptobottom - 从上到下。
  • bottomtotop - 从下到上。
blinds:number 帘叶的数量(1 至 20)。默认值为 5。
transparentbackground:boolean 是否在渲染新图片的百叶窗之前显示透明背景。如果为 false,则百叶窗会覆盖旧图片。

 

过渡类型:门式抹擦

gwd-door-wipe

过渡效果图库的一种抹擦效果变化形式,新图片像双扇门打开或关闭一样显示。

属性

名称 说明
orientation:string 动画效果的方向。
  • horizontal - 水平。
  • vertical - 垂直。
direction:string 效果的方向。
  • opening - 打开。
  • closing - 关闭。

 

过渡类型:光圈抹擦

gwd-iris-wipe

过渡效果图库的一种抹擦效果变化形式,在不断扩大的圆圈内显示新图片。

属性

名称 说明
originpercentx:number 不断扩大的圆圈在 x 轴上的起点,以占帧宽度的百分比表示(从 0 到 100)。默认值为 50。
originpercenty:number 不断扩大的圆圈在 y 轴上的起点,以占帧高度的百分比表示(从 0 到 100)。默认值为 50。

 

过渡类型:推入

gwd-push

过渡效果图库的推入效果类型,新图片滑入视图,同时将旧图片推出视图。

属性

名称 说明
direction:string 效果的方向。默认值为从左到右。
  • lefttoright - 从左到右。
  • righttoleft - 从右到左。
  • toptobottom - 从上到下。
  • bottomtotop - 从下到上。

 

过渡类型:径向抹擦

gwd-radial-wipe

过渡效果图库的一种抹擦效果变化形式,通过绕指定点以半径的形式抹擦(像时钟指针一样)来显示新图片。

属性

名称 说明
direction:string 效果的方向。默认值为顺时针。
  • clockwise - 顺时针。
  • counterclockwise - 逆时针。
originpercentx:number 抹擦半径在 x 轴上的起点,以占帧宽度的百分比表示(从 0 到 100)。默认值为 50。
originpercenty:number 抹擦半径在 y 轴上的起点,以占帧高度的百分比表示(从 0 到 100)。默认值为 50。

 

过渡类型:旋转

gwd-rotate

过渡效果图库的旋转效果类型,旧图片一边旋转一边放大,然后在完成旋转的同时向回缩小并显示新图片。

属性

名称 说明
direction:string 效果的方向。默认值为顺时针。
  • clockwise - 顺时针。
  • counterclockwise - 逆时针。

 

过渡类型:切片

gwd-slice

过渡效果图库的切片效果类型,新图片以切片或条形逐一滑入视图的形式显示。

属性

名称 说明
direction:string 效果的方向。默认值为从左到右。
  • lefttoright - 从左到右。
  • righttoleft - 从右到左。
  • toptobottom - 从上到下。
  • bottomtotop - 从下到上。
slices:number 切片的数量(1 至 20)。默认值为 5。
transparentbackground:boolean 是否在新图片切入之前显示透明背景。如果为 false,则切片会覆盖旧图片。

 

过渡类型:拆分推入

gwd-split-push

过渡效果图库的一种推入效果变化形式,旧图片在垂直或水平方向上拆分为两部分。新图片的相应拆分部分将旧图片的各个部分沿相反的方向推出视图。

属性

名称 说明
orientation:string 动画效果的方向。
  • horizontal - 水平。
  • vertical - 垂直。

 

过渡类型:条纹抹擦

gwd-stripe-wipe

过渡效果图库的一种抹擦效果变化形式,交替颜色的纯色条纹会同时在屏幕上扩大以覆盖旧图片。然后,这些条纹会缩小以显示新图片。

属性

名称 说明
direction:string 效果的方向。
  • lefttoright - 从左到右。
  • righttoleft - 从右到左。
  • toptobottom - 从上到下。
  • bottomtotop - 从下到上。
  • bottomlefttotopright - 从左下角到右上角。
  • toplefttobottomright - 从左上角到右下角。
  • bottomrighttotopleft - 从右下角到左上角。
  • toprighttobottomleft - 从右上角到左下角。
stripes:number 每种颜色的条纹的数量(1 至 10)。默认值为 2。
color1:string 两种交替条纹颜色中的一种,以十六进制颜色代码表示。默认值为 #FFFFFF。
color2:string 另一种交替条纹颜色,以十六进制颜色代码表示。默认值为 #FFA500。

 

过渡类型:威尼斯百叶窗

gwd-venetian-blinds

过渡效果图库的一种百叶窗效果变化形式,新图片像从威尼斯百叶窗后面露出来一样显示。

属性

名称 说明
orientation:string 动画效果的方向。默认值为垂直。
  • vertical - 垂直。
  • horizontal - 水平。
blinds:number 帘叶的数量(1 至 20)。默认值为 5。
staggered:boolean 窗叶是否逐一过渡。如果为 false,则所有窗叶同时过渡。

 

过渡类型:抹擦

gwd-wipe

过渡效果图库的抹擦效果类型,新图片会沿着一条从一边向另一边抹擦的线条逐渐替换旧图片。

属性

名称 说明
direction:string 效果的方向。默认值为垂直。
  • lefttoright - 从左到右。
  • righttoleft - 从右到左。
  • toptobottom - 从上到下。
  • bottomtotop - 从下到上。
angle:number 抹擦线的角度(以度为单位,范围为 -89 度至 89 度)。默认值为 0。

 

过渡类型:Z 字形

gwd-zigzag

过渡效果图库的 Z 字形效果类型,新图片以蛇形网格图案的形式逐渐显示,以交替方向在连续行或列中显示新图片的图块。

属性

名称 说明
orientation:string 效果的方向。
  • horizontal - 水平。
  • vertical - 垂直。
rows:number 使用 Z 字形效果的图块的行数(范围从 1 到 20)。默认值为 5。
columns:number 使用 Z 字形效果的图块的列数(范围从 1 到 20)。默认值为 5。

 

事件

名称 说明
autoplayended 当自动播放因任何原因结束时发送。如果是因达到预期的循环次数而自然结束,那么 event.detail.completed 将为 true,否则为 false
frameactivated 当开始启动新帧(即使新帧尚未显示)时发送。
frameshown 当显示新帧时发送。
frametap 当用户点按任意帧时发送。
rotateonceended 当轮播因任何原因结束时发送。如果是自然结束,那么 event.detail.completed 将为 true,否则为 false
reachleftend 当图库达到最左端时发送。
reachrightend 当图库达到最右端时发送。

方法

名称 说明
goToFrame(frame:number, with_animation:boolean) 转到指定帧。
rotateOnce(startFromCurrentFrame:boolean) 显示图库中的每个帧,如果 startFromCurrentFramefalse 或未指定,则从开始帧开始显示,否则从当前帧开始。轮播在达到开始帧之前即停止。
startAutoplay(startFromCurrentFrame:boolean) 如果 startFromCurrentFramefalse 或未指定,则从开始帧开始自动播放图库,否则从当前帧开始。自动播放在达到循环次数时即停止。
stop() 取消任何正在播放的动画。
goForwards() 将图库向前移动一帧。
goBackwards() 将图库向后移动一帧。
视频

gwd-video

一种组件,用于封装 HTMLVideoElement

属性

名称 说明
autoplay:boolean 视频加载完毕后是否自动播放。
loop:boolean 视频播放完毕后是否循环播放。
muted:boolean 视频在开始播放时是否静音。
controls:boolean 是否启用默认的原生播放器控件。
sources:file 一系列不同格式的视频,各视频间以英文逗号分隔。
poster:string 指示海报帧在用户开始播放或跳转之前一直显示的网址。

事件

名称 说明
play 当媒体在暂停后又开始播放时发送,也就是在之前的暂停事件后又恢复播放时发送。
pause 暂停播放时发送。
playing 当媒体开始播放(无论是首次播放、暂停后又开始播放,还是结束后又重新开始播放)时发送。
ended 播放完毕时发送。
volumechange 当音量发生变化(包括设置音量和更改静音属性)时发送。
seeked 跳转操作完成时发送。
waiting 当因为有其他操作(如跳转)尚未完成而导致请求的操作(如播放)被延迟时发送。

方法

名称 说明
mute() 在将视频静音/取消静音之间切换。
pause() 暂停视频。
play() 播放视频。
replay() 重放视频。
seek(time:number) 跳至视频中的指定时间。
setVolume(volume:number) 设置视频音量。
setSources(sources:string) 设置视频来源。

示例

让视频在每次播放时都取消静音

要让视频在每次播放时都取消静音,请仿照以下示例创建一个事件:

  • 目标 - 选择要控制的视频。如果您只有 1 个视频,则默认 ID 为 gwd-video_1
  • 事件 - 依次选择视频 > 暂停后播放
  • 操作 - 依次选择自定义 > 添加自定义操作

在“自定义代码”对话框中,为您的函数命名。在此示例中,您可以指定一个诸如 mutebtn 之类的名称。然后,粘贴以下代码:

if (document.getElementById('gwd-video_1').muted) {
  document.getElementById('gwd-video_1').mute();
}
YouTube

gwd-youtube

用于扩展 HTMLElement 以封装 YouTube API 调用。

属性

名称 说明
video-url:string 视频的 YouTube 网址。
autoplay:string 在受支持的环境下,YouTube 视频将在加载时自动播放。
preview-duration:number 设置预览的时长。仅在自动播放属性设为 preview 时使用。
controls:string 显示视频控件(noneautohide)。
color:string 播放器进度条的颜色主题(红色或白色)。
muted:boolean 视频在开始播放时是否静音。
annotations:boolean 显示视频的注释。
related:boolean 视频播放完毕后显示相关视频。
loop:boolean 视频播放完毕后是否循环播放。
pause-on-end:boolean 剩余 1 秒时暂停视频。
start-position:number 在指定时间(秒)启动视频。
allowfullscreen:boolean 允许在桌面设备上全屏显示。
extra-player-args:string https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters 中所述的其他 YouTube 播放器参数。

事件

名称 说明
buffering YouTube 播放器正在缓冲。
ended YouTube 视频已播放完毕。
paused YouTube 视频已暂停。
playing YouTube 视频开始播放。
replayed YouTube 视频已重放。
viewed0percent 视频播放了 0% 时发送。
viewed25percent 视频播放了 25% 时发送。
viewed50percent 视频播放了 50% 时发送。
viewed75percent 视频播放了 75% 时发送。
viewed100percent 视频播放了 100% 时发送。
previewed0percent 预览开始播放时发送。
previewed25percent 预览播放了 25% 时发送。
previewed50percent 预览播放了 50% 时发送。
previewed75percent 预览播放了 75% 时发送。
previewed100percent 预览播放了 100% 时发送。

方法

名称 说明
toggleMute() 在将视频静音/取消静音之间切换。
pause() 暂停视频。
play() 播放视频。
replay() 重放视频。
seek(time:number) 跳至视频中的指定时间。
setYouTubeId(id:string, opt_cueOnly:boolean) 将 YouTube 视频的来源更改为指定 ID。
该内容对您有帮助吗?
您有什么改进建议?

需要更多帮助?

登录可获取更多支持选项,以便快速解决您的问题