步骤
1.安装photo-sphere-viewer
官网 https://photo-sphere-viewer.js.org/
npm install --save photo-sphere-viewer
2.引入
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
import { Viewer } from 'photo-sphere-viewer'
3.主要代码
<div id="viewer720"></div>
showViewer720 () {
let tempUrl = require('../../public/mp4/yjy.jpg') // 加载720图片地址
this.viewer = new Viewer({
container: document.querySelector('#viewer720'),
panorama: tempUrl
})
// 当视图经度和/或纬度改变时触发
this.viewer.on('position-updated', (e, position) => {
console.log(`视图经度和/或纬度改变111: ${position.longitude} latitude: ${position.latitude}`, position.longitude*(Math.PI / 360), position.latitude*(Math.PI / 180))
})
// 当缩放级别改变时触发
this.viewer.on('zoom-updated', (e, level) => {
console.log(`放级别改变 ${level}`, e)
})
}