我正在使用Photo Sphere Viewer，现在我想在不重新加载页面的情况下将全景图像替换为新的图像

Question

谁能告诉我怎样才能在没有页面重新加载的情况下点击按钮将全景图像转换为新的图像？

我正在使用的照片球体查看器是https://photo-sphere-viewer.js.org

var PSVUtils = PhotoSphereViewer.Utils,
      fov = 70,
      PSV = new PhotoSphereViewer({
        panorama: 'images/vr-min.jpg', //want to change this image
        container: 'photo360',
        navbar: 'autorotate zoom download fullscreen',
        caption: 'vr',
        mousewheel: false,
        size: 800,
        time_anim: false,
        gyroscope: true,
        // webgl: PSVUtils.isWebGLSupported(),
        move_speed: 3,
        default_fov: fov + .01,
        min_fov: fov,
        max_fov: fov + .01,
        markers: [
          {
            // html marker with custom style
            id: 'text',
            longitude: -1.4,
            latitude: 0.12,
            html: '<a href="#" style="color:#fff;" onclick="myFunction()"><img id="myimg" src="https://png.icons8.com/color/260/circled-play.png" width="30" height="30" /></a>',
            anchor: 'bottom right',
            style: {
              maxWidth: '20px',
              color: 'white',
              fontSize: '20px',
              fontFamily: 'Helvetica, sans-serif',
              textAlign: 'center'
            },
            tooltip: {
              content: 'Watch this video for more details',
              position: 'right',
    height: '500px'
            }
          }
        ]
      });

我不知道我能做些什么来替换这张图片。提前谢谢。

Answer 1

PSV.setPanorama('new-pano.jpg', null, true);

会帮你完成这项工作。

假设你有一个id为"goto-pano“的标记，然后，

PSV.on('select-marker', (marker) => {
  if (marker.id === 'goto-pano') {
    PSV.setPanorama('new-pano.jpg', null, true);
  }
});

或者，您可以在任何其他按钮单击事件中执行此操作。