Vue使用photo-sphere-viewer360°×180°全景图全网最新(二)

依赖:npm install photo-sphere-viewer --save-dev

代码：

<template>
  <div class="demo-container">
    <!-- 测试 -->
    <div id="viewer"></div>
  </div>
</template>

<script>
import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";

export default {
  data() {
    return {
      viewer: "",
      img: "https://img0.baidu.com/it/u=2063349374,2152739293&fm=253&fmt=auto&app=138&f=JPEG?w=843&h=500",
    };
  },
  mounted() {
    this.getViewer();
  },
  methods: {
    getViewer() {
      this.viewer = new Viewer({
        container: document.getElementById("viewer"),
        panorama: this.img,
        size: {
          width: "886px",
          height: "554px",
        },
        // size: {
        //   width: screen.availWidth,
        //   height: screen.availHeight, //  自动全屏 可设置高度 上面注释掉了
        // },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

效果图如下:

如果想要有场景切换和自定义标注这个功能点击下方:

Vue使用photo-sphere-viewer360°×180°全景插件模拟VR看房、房间切换和自定义标注(有源码)

感觉文章好的话记得点个赞关注收藏，一键三连,有错的地方麻烦指正一下，多谢！！！