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

安装依赖:npm install photo-sphere-viewer--save

代码:

<template>
  <div class="demo-container">
    测试
    <div id="viewer"></div>
    <ul class="item-container">
      <li
        v-for="(item, index) in itemArr"
        :key="index"
        @click="setViewer(item.img)"
      >
        {
  
   
   { `全景图${index + 1}` }}
      </li>
    </ul>
  </div>
</template>

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

import { MarkersPlugin } from "photo-sphere-viewer/dist/plugins/markers";
import "photo-sphere-viewer/dist/plugins/markers.css";

export default {
  name: "demo",
  data() {
    return {
      viewer: "",
      markersPlugin: "",