下载插件

使用npm或yarn下载安装

npm install photo-sphere-viewer

yarn add photo-sphere-viewer

直接上代码，附带注释：

<template>
  <div id="viewer"></div>
</template>
<script>
import { Viewer } from "photo-sphere-viewer";
import MarkersPlugin from "photo-sphere-viewer/dist/plugins/markers"; //Markers插件
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
import "photo-sphere-viewer/dist/plugins/markers.css"; //Markers插件
export default {
  data() {
    return {
      viewer: "",
      imgurl1: require("../assets/10.jpg"),
      imgurl2: require("../assets/2.jpg"),
      imgurl3: require("../assets/3.jpg"),
      imgurl4: require("../assets/4.jpg"),
    };
  },
  mounted() {
    this.viewer = new Viewer({
      container: document.querySelector("#viewer"),
      panorama: this.imgurl1,
      size: {
        width: "100vw",
        height: "100vh",
      },
      autorotateLat:0,//
      autorotateSpeed:0.20943951023931962,//自传速度
      defaultZoomLvl: 0,//默认缩放
      defaultLong:0.0027446609001040845,//经度
      defaultLat:0.015220228499811306,//维度
      autorotateDelay:1,//1毫秒后启动自动旋转
      plugins: [
        [
          MarkersPlugin,
          {
            markers: [
              {
                id: "circle1", //标记的唯一标识符
                tooltip: "circle1", //提示的内容
                circle: 30, //直径
                svgStyle: {
                  fill: "rgba(255,255,0,0.3)",
                  stroke: "#ccc",
                  strokeWidth: "2px", //边框
                },
                visible: true, //标记的初始可见性。默认true
                longitude: -1.5, //位置
                latitude: -0.28, //位置
                anchor: "center right",
                // content: "9999999999", //点击标记后侧边列表框显示的内容
                // image: 'assets/3.jpg',
                // defaultZoomLvl:-30
              },
              {
                id: "circle2", //标记的唯一标识符
                tooltip: "circle2", //提示的内容
                circle: 30, //直径
                svgStyle: {
                  fill: "rgba(255,255,0,0.3)",
                  stroke: "red",
                  strokeWidth: "2px", //边框
                },
                longitude: -1.6, //位置
                latitude: -0.28, //位置
                anchor: "center right",
                visible: false, //标记的初始可见性。默认true
                // image: this.imgurl3,
              },
              {
                id: "circle3",
                tooltip: "circle3", //提示的内容
                longitude: -1.9, //位置
                latitude: -0.28, //位置
                rect: { width: 100, height: 100 }, //矩形宽高
                svgStyle: {
                  fill: "rgba(194,29,18,1)",
                  cursor: "help",
                },
                visible: false,
              },
              {
                id: "circle4",
                tooltip: "circle4", //提示的内容
                x: 2058,
                y: 1069,
                html: "HTML <b>marker</b> &hearts;",
                anchor: "bottom right",
                scale: [0.5, 1.5],
                style: {
                  maxWidth: "100px",
                  color: "white",
                  fontSize: "20px",
                  fontFamily: "Helvetica, sans-serif",
                  textAlign: "center",
                },
                visible: false,
              },
            ],
          },
        ],
      ],
    });
    // 初始化之后，可以使用getPlugin方法获得插件实例，从而允许在插件上调用方法并订阅事件
    const markersPlugin = this.viewer.getPlugin(MarkersPlugin);
    // 点击事件监听
    // this.viewer.on('click', (e, data) => {
    //   console.log(`${data.rightclick ? 'right clicked' : 'clicked'} at longitude: ${data.longitude} latitude: ${data.latitude}`);
    // });
    // 监听放大缩小
    // this.viewer.on('zoom-updated', (e,level) => {
    //   console.log(level);
    // });
    // 启用/禁用自动旋转时触发
    this.viewer.on('autorotate', (e,enabled) => {
      // enabled:false没有旋转   true：旋转
      // console.log(enabled);
      // console.log(999);
      if(!enabled){
        setTimeout(() => {
          this.viewer.toggleAutorotate();//开启自动旋转/不旋转 
        }, 5000);
      }
    });
    // 当所有当前动画停止时触发
    // this.viewer.on('stop-all', (e) => {
      // enabled:false没有旋转   true：旋转
      // console.log(enabled);
      // alert(1)
    // });
    // 当视图经度和/或纬度发生变化时触发。
    this.viewer.on('position-updated', (e, position) => {
      // 可以获取到当前的经纬度，可以用于测试时获取经纬度
      // console.log(`new position is longitude: ${position.longitude} latitude: ${position.latitude}`);
    });
    // 监听点击marker
    markersPlugin.on("select-marker", (e, marker) => {
      console.log(marker.id);
      const markerid = marker.id;

      this.viewer
      // 动画
        .animate({
          longitude: marker.config.longitude,
          latitude: marker.config.latitude,
          zoom: 100,
          speed: "-2rpm",
        })
        // .then(() =>
        //   this.viewer.setPanorama(this.imgurl2).then(
        //     () =>
        //       markersPlugin.updateMarker({
        //         id: marker.id,
        //         longitude: -1.8,
        //         latitude: -0.28,
        //       }),

        //     this.viewer
        //       .animate({
        //         zoom: 50,
        //         speed: "2rpm",
        //       })
        //       .then(
        //         () => (this.imgurl2 = this.imgurl3),
        //         console.log("继续操作")
        //       )
        //   )
        // );

        .then(() => {
          // markersPlugin.clearMarkers()//移除所有markers
          // this.viewer.rotate({x: 1500,y: 600,});//改变摄像机的位置
          markersPlugin.hideMarker(marker.id);//隐藏点击的marker
          // this.viewer.defaultZoomLvl=0
          if (markerid == "circle1") {
            // setPanorama参数：图片地址、下一个场景的初始经纬度、transition 默认（false）
            this.viewer.setPanorama(this.imgurl2,{ longitude: 6.232589417434965, latitude: 0.07016253709436304 }, true).then(() => {
                markersPlugin.showMarker("circle2")//显示你需要显示的marker
              }
            );
              
              console.log(this.viewer.defaultZoomLvl)
          }
          if (markerid == "circle2") {
            this.viewer
              .setPanorama(this.imgurl3,{ longitude: 6.113027338614143, latitude:-2.914362084993627e-9 }, true)
              .then(() => markersPlugin.showMarker("circle3"));
          }
          if (markerid == "circle3") {
            this.viewer
              .setPanorama(this.imgurl4)
              .then(() => markersPlugin.showMarker("circle4"));
          }
          if (markerid == "circle4") {
            this.viewer.setPanorama(this.imgurl1)
            .then(() => markersPlugin.showMarker("circle1"));
          }
          this.viewer.zoom(0)//改变缩放
          // this.viewer.setOption('defaultLong',100);
          // this.viewer.setOption('defaultLat',100);
          // this.viewer.toggleAutorotate();//开启自动旋转/不旋转 
        });
    });
  },
};
// setPanorama(新全景图文件的网址) :加载新的全景文件,参数
// new position is longitude: 6.232589417434965 latitude: 0.07016253709436304
</script>

参考链接：

https://juejin.cn/post/6844903879180615688

https://blog.csdn.net/qq_42783654/article/details/115163735?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242