最近项目中要求vr功能，可以进行图片的全景查看，在此，用到了vue里的一个实现全景预览的插件：photo-sphere-viewer。移动端和PC端都可以使用：下面给大家介绍一下使用步骤及方法。
1、安装 photo-sphere-viewer依赖

 npm install  photo-sphere-viewer --save-dev

2、引入：在你需要使用的页面引入插件

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

3、接下来就可以正常使用

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

  import {getBizSectionVrList} from "../../../api/api";//调用接口import {Toast} from "vant";//消息提示import {baseUrlMobile} from '../../../api/http'//调用后台接口export default {data(){return{profileName:'',profileId:'',viewer:'',imageList:[]}},mounted(){this.getProfileVRInfoList()// this.initPhotoSphere(this.imageList)},beforeMount() {this.profileName=this.$route.query.profileNamethis.profileId=this.$route.query.profileId},methods:{initPhotoSphere(imageList){let _this=thislet i=0_this.viewer = new Viewer({container:document.querySelector('#viewer'),panorama:baseUrlMobile+imageList[i].filePath,caption: _this.profileName,navbar:true,size: {width: '100%',height: _this.isMobile()? screen.availHeight : '100%'},navbar: ['autorotate','zoom','markers','caption','fullscreen'],plugins: [[MarkersPlugin, {markers: [{id:'circle',image:require('../../../../static/icon/location.png'),width:42,height:42,longitude: 20,latitude:-0.15,anchor:'bottom center',className:'markers',tooltip:{content : '欢迎进入下一场景',position: 'bottom left'},visible:true}],}],],});const markersPlugin = _this.viewer.getPlugin(MarkersPlugin);markersPlugin.on('select-marker', (e, marker) => {this.viewer.animate({longitude: marker.config.longitude,latitude: marker.config.latitude,zoom: 100,speed: '-2rpm',}).then(() =>{i=i+1 ===baseUrlMobile+imageList.length?0:i+1;this.viewer.setPanorama(baseUrlMobile+imageList[i].filePath).then(() =>{markersPlugin.updateMarker({id: marker.id,longitude: -1.8,latitude: -0.28,}),this.viewer.animate({zoom: 50,speed: '2rpm',}).then(() =>{imageList[i].filePath = baseUrlMobile+imageList[i].filePath;})})})});},isMobile() {let ua = navigator.userAgent;let ipad = ua.match(/(iPad).*OS\s([\d_]+)/),isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),isAndroid = ua.match(/(Android)\s+([\d.]+)/),isMobile = isIphone || isAndroid;return isMobile;},onClickLeft(){this.$router.push({path: '/Navigation',query:{profileId:this.profileId,profileName:this.profileName}})},getProfileVRInfoList(){getBizSectionVrList(this.profileId).then((res) => {if (res.code == 200) {this.imageList = res.rows;if (res.rows.length == 0) {this.isData = false;} else {this.isData = true;this.$nextTick(() => {this.initPhotoSphere(this.imageList);});}} else {Toast.fail(res.msg);}});}},}