JavaScript API

播放器有一个外部 API，因此可以使用 JavaScript 进行控制。

皮肤使用这个确切的 API。由于皮肤文件没有缩小，您可以简单地查看皮肤文件以了解某些事情在内部是如何完成的。

下面的所有示例都使用 pano 作为对象。但是，如果您在皮肤中使用 JavaScript，则必须使用 player 作为对象。

在皮肤编辑器中使用 JavaScript

在皮肤编辑器中使用 JavaScript 有两种方法。代码元素和“转到 URL”作。以前使用文本框，现在是旧方法。

代码元素

代码元素是用于将 Javascript 添加到项目的专用皮肤元素。

了解如何使用 code 元素添加代码。

转到 URL 作

这使您可以通过皮肤中的作触发 JavaScript 代码。例如，将作添加到文本元素，将源设置为鼠标单击 ，将作设置为转到 URL，然后在 URL 字段中添加 javascript: Your JavaScript code... 。

喜欢：

javascript: alert("Button clicked!");

文本框

遗产！使用文本框将 JavaScript 添加到皮肤是一种 LEGACY 方法。请改用代码元素。

您可以将 JavaScript 代码放入 Text Box 皮肤元素的文本字段中：

以 javascript： 开始文本。： 后面的所有内容都将放入文本框的 innerHTML 中。

通常，您会使用它来进行简单的计算。例如，将 javascript：5+5 显示为 10。

但是，您可以滥用它来运行任何 JavaScript 代码：放入 javascript:""; your JavaScript code goes here text 元素中。然后，这将在加载皮肤时执行。例如，您可以将函数注册到某些玩家事件：

javascript: ""; player.on("imagesready", function () {  alert("Panorama loaded!"); });

设置

pano.readConfigUrl(url: String, base: String="") 从 url 读取节点/游览配置。base 参数定义不同的基本路径。

pano.readConfigUrlAsync(url: String, callback: Function, base: String="") 与 readConfigUrl 相同，但异步。

从字符串中 pano.readConfigString(xml: String) 读取节点/游览配置。

pano.readConfigXml(xml: Document) 从 XML 文档对象读取节点/游览配置。

pano.getBasePath（） pano.setBasePath(path: String) 获取/设置基本路径。基本路径将添加到相对文件名和 url 中。如果 HTML 文件的基础与 xml 配置文件不同，这很有用。另请注意，占位符 $（r） 将被玩家的基本路径替换。

为所有外部文件（如配置、图像、图块和嵌入视频） pano.setCrossOrigin(s: String) 设置 crossorigin 属性。默认值为匿名。

观看方向

pano.getPan（） 返回当前平移角度。

pano.getPanN（） 返回归一化的当前平移角度（介于 -180.0 和 +180.0 之间）。

pano.getPanNorth（） 返回当前平移角度，包括节点向北偏移。

pano.setPan(angle_in_degrees: Number) 设置当前平移角度。

pano.setPanNorth(angle_in_degrees: Number) 设置当前平移角度，同时考虑节点的北偏移。

pano.changePan(offset_in_degrees: Number) 更改当前平移角度。

pano.getTilt（） 返回当前倾斜角度。

pano.setTilt(angle_in_degrees: Number) 设置当前倾斜角度。

pano.changeTilt(offset_in_degrees: Number) 更改当前倾斜角度。

pano.getFov（） 返回当前视野 View，具体取决于 FoV 模式。

pano.setFov(angle_in_degrees: Number) 设置当前视野 View，具体取决于 FoV 模式。

pano.changeFov(offset_in_degrees: Number) 更改当前视野 View，具体取决于 FoV 模式。

pano.getVFov（） 返回当前垂直视野。

pano.setVFov(angle_in_degrees: Number) 设置当前垂直视野。

pano.getHFov（） 返回当前水平视野。

pano.getRoll（） 返回当前横滚角度。

pano.setRoll(angle_in_degrees: Number) 设置当前横滚角度。

pano.setPanTilt(pan: Number, tilt: Number), pano.setPanTiltFov(pan: Number, tilt: Number, fov: Number)

便利功能。

pano.setProjection（v： Number）， pano.getProjection（）：Number， pano.changeProjection(v: Number, speed: Number) 获取或设置当前投影。4 – 直线，9 – 立体，12 – 鱼眼。

pano.setDefaultView（） 将视图设置为默认视图。

pano.moveTo(pan: Number, tilt: Number, fov: Number, speed: Number, roll: Number, projection: Number); 将视图移动到某个位置。

pano.moveToDefaultView（） 将视图移动到默认位置。

限制

pano.getViewerLimits():Object, pano.setViewerLimits(limits:Object) 检索或设置播放器的当前查看器限制。limits 对象包含 'pan' 和 'tilt' 的对象。这些对象又具有“min”和“max”的值。如果使用 set 函数，则只需提供要更改的值。

以下是设置查看器限制以及将查看器重置为无限制的示例调用：

pano.setViewerLimits({  pan: { min: -100, max: 100 },  tilt: { min: -30, max: 70 }, }); pano.setViewerLimits({  pan: { min: 0, max: 360 },  tilt: { min: -90, max: 90 }, });

自动旋转和动画

pano.setAutorotate(speed: Number, delay: Number, rth: Number) 设置自动旋转参数。

pano.startAutorotate(speed: Number, delay: Number, rth: Number) 启动（并启用）自动旋转。

pano.toggleAutorotate(speed: Number, delay: Number, rth: Number) 切换自动旋转。

pano.stop 自动旋转（） 停止（并禁用）自动旋转。

pano.pauseAutorotate（） 暂停自动旋转。如果自动旋转当前处于活动状态，这将停止自动旋转。它不会禁用自动旋转，因此在超时后它将重新启动。

pano.resumeAutorotate（） 恢复自动旋转。如果当前已启用，这将启动自动旋转。它不会影响“启用”状态。

pano.setAutorotateNodeFilter(tag: String) 此标签指定在自动旋转自动切换节点时将考虑哪些节点。

pano.getIsAutorotating（） 如果自动旋转当前正在运行。

pano.startAnimation(animsequence: String) 播放给定的动画序列。始终从序列的开头开始。

pano.resumeAnimation(animsequence: String) 播放给定的动画序列。如果动画序列之前正在播放并被用户中断，则它将从中断点继续。

媒体元素

pano.playSound（id：字符串） 使用此媒体 ID 启动声音。

pano.pauseSound（id：字符串） 使用此媒体 ID 暂停声音。

使用此媒体 ID 在播放和暂停声音之间 pano.playPauseSound(id: String, loop: Number) 切换。

使用此媒体 ID 在播放和停止声音之间 pano.playStopSound(id: String, loop: Number) 切换。

pano.soundGetTime(id: String):Number ， pano.soundSetTime(id: String, time: Number) 获取/设置当前播放声音的位置。

pano.activateSound(id: String, state: Number) 弹出带有 id 的图像或视频。状态：0 – 隐藏，1 – 显示，2 – 切换。

pano.stopSound（id：字符串） 使用此媒体 ID 停止声音。

pano.isPlaying(id: String):Boolean 检查此媒体元素当前是否正在播放。

pano.setVolume(id: String, volume: Number) 将此元素的体积（介于 0.0 和 1.0 之间）设置为固定值。id _ main 更改全局卷。

pano.changeVolume(id: String, volume: Number) 更改此元素的音量。id _ main 更改全局卷。

pano.disableSoundLoading（） 防止加载声音元素。

pano.setMediaVisibility(id: String) 更改固定图像或视频的可见性。0 – 隐藏，1 – 显示，2 – 切换。

pano.getMediaObject(id: String) 返回特定固定媒体元素的源对象。

pano.changeLensflares(v: Number) 设置镜头光晕的可见性。0 – 显示，1 – 隐藏，2 – 切换。

热点

pano.addHotspot(id: String, pan: Number, tilt: Number, div: DomElement) 将 DomElement 作为热点添加到全景图中。

pano.updateHotspot(id: String, pan: Number, tilt: Number) 更新热点位置。

pano.removeHotspot(id: String) 删除单个热点。

pano.removeHotspots（） 删除所有热点。

pano.getPointHotspotIds():Array<String> 将所有热点 ID 获取为字符串数组。

pano.getCurrentPointHotspots():Array<DomElement> 返回所有点热点 div 的数组。

pano.getHotspot(id: String):Object 将热点的所有信息作为对象获取。

示例代码：

var element = document.createElement("img"); element.setAttribute("src", "hsimage.png"); element.onclick = function () {  pano.openNext("{node10}"); }; pano.addHotspot("myid", 0, 90, element); console.log(pano.getPointHotspotIds()); pano.updateHotspot("myid", 0, -90); console.log(pano.getHotspot("myid")); pano.removeHotspot("myid"); console.log(pano.getPointHotspotIds());

pano.getPolygonMode():Number, pano.setPolygonMode(v: Number, toggle: Number) 获取或设置当前多边形模式。如果 toggle 为 1，则在 Off 和模式 v 之间切换。

pano.showOnePolyHotspot(id: String) ， pano.hideOnePolyHotspot(id: String) ， pano.toggleOnePolyHotspot(id: String) 显示/隐藏特定多边形热点。

pano.changePolyHotspotColor(id: String, bgColor: Number, bgAlpha: Number, borderColor: Number, borderAlpha: Number) 设置特定多边形热点的背景和边框颜色。您可以对 id 使用空字符串来定位所有多边形热点。

例如，对于具有纯绿色边框的红色半透明多边形： player.changePolyHotspotColor("Poly01", 0xff0000, 0.5, 0x00ff00, 1);

使用十六进制数作为颜色，前缀为 0x。alpha 值是介于 0 和 1 之间的数字。

pano.setPolyHotspotHandcursor(id: String, enable: Boolean) 切换特定多边形热点的手形光标。您可以对 id 使用空字符串来定位所有多边形热点。

pano.getHotspotPropValue(nodeId: String, hsId: String, varname: String) 检索在项目中定义的自定义热点属性的值。

pano.setHotspotPropValue(nodeId: String, hsId: String, varname: String, value: Any) 设置在项目中定义的自定义热点属性的值。

虚拟导览

pano.getIsTour（） 如果项目是游览，或者只是一张全景图。

pano.getNodeIds():Array<String> 获取所有节点 ID 的列表。

pano.getNodeUserdata(id: String):Object 获取节点 ID 的用户数据。如果 id 为空，则返回当前节点数据。

检索 Pano2VR 中定义的自定义用户数据属性的值 player.getNodeUserdataPropValue(id: String, varname: String) 。

player.setNodeUserdataPropValue(id: String, varname: String, value: String) 设置自定义用户数据属性的值，在 Pano2VR 中定义。

pano.getNodeLatLng(id: String):Object 获取节点 ID 的 GPS 数据。如果 id 为空，则返回当前节点数据。

pano.getNodeDistance(fromId: String, toId: String):Number 获取 2 个节点之间的距离（以米为单位），前提是两个节点都有 GPS 数据。

pano.getNodeTitle(id: String):String 获取节点 id 的节点标题。如果 id 为空，则返回当前节点数据。

pano.getCurrentNode（）：字符串获取当前节点的节点 ID。

pano.getNextNode（） 获取游览列表中下一个节点的节点 ID。如果当前节点是最后一个节点，则返回第一个节点 ID。

pano.getPrevNode（） 获取游览列表中上一个节点的节点 ID。如果当前节点是第一个节点，则返回最后一个节点 ID。

pano.getNodesWithTag(tag:String)::Array<String> 获取用户数据中具有特定标记的节点数组。

pano.nodeVisited(id:String):Boolean 如果已访问该节点，则返回 true。对于当前节点，第一次访问时返回 false。

pano.openNext(url:String,parameter:String) 打开下一个全景图，如果 url 位于 {nodeid} 的 from 中，它将更改游览中的节点。

pano.getLastVisitedNode():String 返回上次访问的节点的 ID。

pano.setTransition（v：对象） 设置在全景图之间移动时的过渡参数：

类型 ：切割、 交叉溶解等。
before：before 效果（0 – 无;2 – 放大）
之后 ：后效（0 – 无;2 – 放大;3 – 缩小;4 – 飞入）
TransitionTime：过渡时间
waitfortransition： – 如果后效应该等待过渡完成
ZoomedFOV：选择“放大”时要缩放的 FOV
缩放速度 ：选择“放大”时使用的速度
dipcolor：如果选择 diptocolor 类型，则要使用的颜色
softedge：如果是 soft edge 用于过渡类型

pano.getZoomCenterCursor（）， pano.setZoomCenterCursor(value:Boolean) 获取/设置光标处的缩放值。

要在皮肤的文本框中显示缩放值，请添加带有“设置值”作的“鼠标单击”，并将以下值作为值： javascript: player.getZoomCenterCursor() 。

全屏

方法名称不言自明。

pano.setFullscreen(flag:Boolean)

pano.enterFullscreen()

pano.exitFullscreen()

pano.toggleFullscreen()

pano.getIsFullscreen()

视频全景

pano.videoPanoPlay（）、pano.videoPanoStop（）、pano.videoPanoPause（） 播放/停止/暂停视频全景图。

pano.getVideoPanoTime():Number ， pano.setVideoPanoTime(t:Number) 获取/设置视频全景图播放头的当前时间。

pano.getVideoPanoObject():DomVideoElement 获取对 DOM 视频元素的引用。

pano.setVideoPanoSource（v） 设置视频全景图的源对象。

虚拟现实

pano.enterVR（）：布尔值进入 VR 模式。

pano.exitVR（）：布尔值退出 VR 模式。

pano.toggleVR（）：布尔值切换 VR 模式。

pano.isInVR（）：布尔值如果玩家当前处于 VR 模式，则返回 true。

pano.hasVR（）：布尔值如果设备支持 VR 模式，则返回 true。

杂项

pano.getIsLoading（） 检查全景图是否仍在加载中。

pano.getIsLoaded（） 检查全景图是否已完全加载。

加载 pano.getPercentLoaded():Number 了多少全景图（介于 0.0 和 1.0 之间的数字）。

pano.getIsTileLoading（） 检查当前是否正在加载多分辨率磁贴。

pano.setLocked(value: Boolean) 禁用与全景图的所有交互。

pano.setLockedMouse(value: Boolean) 禁用鼠标与全景图的交互。

pano.setLockedKeyboard(value: Boolean) 禁用键盘与全景图的交互。

pano.setLockedWheel(value: Boolean) 禁用鼠标滚轮与全景图的交互。

pano.getPositionAngles(x: Number, y: Number):Object 返回一个对象，其中包含给定屏幕位置的平移和倾斜值。

pano.getPositionRawAngles(x: Number, y: Number):Object 与 getPositionAngles 相同，但忽略了全景图的当前位置，因此角度就像 pan=0 和 tilt=0 一样。

pano.setMargins(l: Number, t: Number, r: Number, b: Number) 允许你定义通常在皮肤编辑器中定义的播放器周围的边距。

pano.setMargins(params:Object) 还允许您在播放器周围设置边距，就像上面的函数一样，但为您提供了更多选项。params 对象可以包含（但不必包含全部）：

left、top、right、bottom：每个对象，包含值和单位 ，其中单位应为 px 或 %。
transition：包含持续时间和延迟 （以毫秒为单位）以及 timingfunction 的对象。timingfunction 支持的值为：linear、ease、ease-in、ease-out、ease-in、step-end。

例：

pano.setMargins({  left: { value: 30, unit: "%" },  transition: { duration: 500, timingfunction: "ease" }, });

pano.getViewerSize（）：对象返回一个包含全景播放器的“宽度”和“高度”的对象。

pano.getViewMode():Number, pano.changeViewMode(v: Number) 获取或设置当前视图模式。0 – 连续模式，1 – 拖动模式，2 – 切换。

pano.update 全景（） 重新绘制全景图。

pano.isTouching（） 如果全景播放器当前正在移动设备上触摸。

pano.getIsMobile（） 如果播放器当前在移动浏览器上运行。

pano.getGyroAvailable():Boolean 如果陀螺仪在当前设备上可用。

pano.getUseGyro（）， pano.setUseGyro(v:Boolean, useRoll:Boolean) 如果陀螺仪在移动设备上使用。

pano.getOS（）：数字播放器当前运行的作系统。0 – 未知，1 – Windows，2 – Mac，3 – Linux，4 – iOS，5 – Android

pano.getBrowser（）：数字播放器当前运行的浏览器。0 – 未知，1 – Chrome，2 – Firefox，3 – Safari，4 – Edge，5 – IE，6 – Meta Quest 浏览器

pano.getBrowserTheme（）：数字播放器当前运行的浏览器的主题。0 – 浅色主题，1 – 深色主题

皮肤变量

pano.getVariableValue(varName: String):Any ， pano.setVariableValue(varName: String, varValue: Any) 访问皮肤变量。

pano.setVariableOptions(varName: String, options: Object):Boolean 在选项对象中，您可以设置：

keep：当设置为 true 时，该变量存储在浏览器 cookie 中，并在稍后再次打开项目时从那里更新
cookiePath：cookie 路径
cookieExpireDays：一个数字，指定距离 cookie 过期还有多少天

如果成功，则返回 true。

pano.setSuperCookie(superCookieName: String, options: Object) 在选项对象中，您可以设置：

cookiePath：cookie 路径
cookieExpireDays：一个数字，指定距离 cookie 过期还有多少天

一旦定义了超级 cookie，并且您稍后将变量设置为存储在 cookie 中（使用 setVariableOptions（） 函数），该变量将不会存储在单独的 cookie 中，但所有此类变量将被收集并存储在一个超级 cookie 中。这允许您省略每个域 50 个 cookie 的限制。

地图和平面图

pano.getMapsContainingNode(id: String):Array<String> 返回给定节点所在的地图 ID（平面图）列表。

pano.getMapIDs():Array<String> 返回项目中所有地图 ID（地图和平面图）的列表。

pano.getFloorplanIDs():Array<String> 返回项目中所有平面图 ID 的列表。

pano.hasMap（）：布尔值如果项目至少有一个映射，则返回 true。

pano.hasFloorplan（）：布尔值如果项目至少有一个平面图，则返回 true。

pano.getFirstMap（）：字符串返回项目中第一个地图的 ID。

pano.getFirstFloorplan():String 返回项目中第一个平面图的 ID。

翻译

pano.getLanguage（）：字符串返回播放器当前使用的语言的代码（如“en”或“en-US”）。

pano.setLanguage(langCode:String) 告诉玩家使用哪种语言。

玩家活动

播放器提供了一个事件系统，其中事件在某些点触发。您还可以将自己的函数注册到这些事件中。

pano.addListener(eventName:String, listener:Function)

pano.on(eventName:String, listener:Function)