vue photo-sphere-viewer 实现var 360度看房

最新推荐文章于 2024-07-04 11:00:03 发布

ㅤX. ㅤ

最新推荐文章于 2024-07-04 11:00:03 发布

阅读量325

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46591275/article/details/128266123

版权

首先下载依赖我这里用到的版本是 "photo-sphere-viewer": "^4.8.0",

npm install photo-sphere-viewer --save  //下载依赖

在页面引入

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

在配置完成之后开始进行编写

<template>
<div id="viewer" ></div>
</template>



import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
export default {
  data() {
    return {
      imgurl1: require("../../../../assets/img/2.png"),
      viewer: "",
    };
  },
  mounted() {
    this.initPhotoSphere(); //初始化
  },
  methods: {
    initPhotoSphere() {
      this.viewer = new Viewer({
        // autorotateDelay:100,
        container: document.querySelector("#viewer"),
        panorama: this.imgurl1,
        size: {
          width: "100%",
          height: "100%",
        },
//自定义导航栏
        navbar: [
					'caption', //显示上面caption参数按钮
					'fullscreen'//全屏按钮
				],
      });
    },
}
}