赞
踩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/markers.css"/> <style> /* the viewer container must have a defined size */ #viewer { width: 100vw; height: 50vh; } </style> </head> <body> <div id="viewer"> </div> </body> <script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"> </script><script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/markers.js"></script> <script> (function(){ const goMarkerStyle = { fill: "rgba(255,255,0,0.3)", stroke: "#ccc", strokeWidth: "2px", //边框 }; const tipMarkerStyle = { fill: "rgba(255,0,0,0.3)", stroke: "#ccc", strokeWidth: "2px", //边框 } var viewer = new PhotoSphereViewer.Viewer({ container: document.querySelector('#viewer'), // container: 'viewer', panorama: './imgs/1.jpg', caption: '我的第一个全景项目', minFov: 30, maxFov: 90, defaultZoomLvl: 50, panoData: { fullWidth: 11300, fullHeight: 5650, croppedWidth: 12432, croppedHeight: 3504, croppedX: 0, croppedY: 1356, poseHeading: 0, // 0 to 360 posePitch: 0, // -90 to 90 poseRoll: 0, // -180 to 180 }, navbar: [ 'autorotate', 'zoom', 'caption', 'fullscreen' ], plugins: [ [PhotoSphereViewer.MarkersPlugin, { markers: [ { id: "go1", //标记的唯一标识符 tooltip: "去1501", //提示的内容 circle: 30, //直径 svgStyle: goMarkerStyle, visible: true, //标记的初始可见性。默认true longitude: -1.5, //位置 latitude: -0.28, //位置 anchor: "center right" }, { id: "tip1", tooltip: "讲解1", circle: 10, svgStyle: tipMarkerStyle, visible: true, longitude: -1, latitude: -0.28, anchor: "center right", content: "这里是1501前台", //点击标记后侧边列表框显示的内容 }, { id: "go2", tooltip: "去1502", circle: 30, svgStyle: goMarkerStyle, longitude: -1.6, latitude: -0.28, anchor: "center right", visible: false, }, { id: "tip2", tooltip: "讲解2", circle: 10, svgStyle: tipMarkerStyle, visible: false, longitude: -1, latitude: -0.28, anchor: "center right", content: "这里是1502", }, { id: "go3", tooltip: "去1502前台", circle: 30, svgStyle: goMarkerStyle, longitude: -1.6, latitude: -0.28, anchor: "center right", visible: false, }, ], }], ], }); const markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin); markersPlugin.on('select-marker', (e, marker) => { const markerid = marker.id; console.log(markerid); if (markerid == 'go1') { markersPlugin.hideMarker(markerid);//隐藏点击的marker markersPlugin.hideMarker('tip1');//隐藏点击的marker go1501(); } if (markerid == 'go2') { markersPlugin.hideMarker(markerid);//隐藏点击的marker markersPlugin.hideMarker('tip2');//隐藏点击的marker go1502() } if (markerid == 'go3') { markersPlugin.hideMarker(markerid);//隐藏点击的marker goFirst(); } }); function go1501(){ viewer.setPanorama('./imgs/2.jpg',{ panoData: { fullWidth: 10800, fullHeight: 5650, croppedWidth: 12432, croppedHeight: 3504, croppedX: 0, croppedY: 1356, poseHeading: 0, // 0 to 360 posePitch: 0, // -90 to 90 poseRoll: 0, // -180 to 180 }, }).then(() => { markersPlugin.showMarker("go2")//显示你需要显示的marker markersPlugin.showMarker("tip2")//显示你需要显示的marker }) } function go1502(){ viewer.setPanorama('./imgs/3.jpg',{ panoData: { fullWidth: 12100, fullHeight: 5650, croppedWidth: 12432, croppedHeight: 3504, croppedX: 0, croppedY: 1356, poseHeading: 0, // 0 to 360 posePitch: 0, // -90 to 90 poseRoll: 0, // -180 to 180 }, }).then(() => { markersPlugin.showMarker("go3")//显示你需要显示的marker }) } function goFirst(){ viewer.setPanorama('./imgs/1.jpg',{ panoData: { fullWidth: 11300, fullHeight: 5650, croppedWidth: 12432, croppedHeight: 3504, croppedX: 0, croppedY: 1356, poseHeading: 0, // 0 to 360 posePitch: 0, // -90 to 90 poseRoll: 0, // -180 to 180 }, }).then(() => { markersPlugin.showMarker("go1")//显示你需要显示的marker markersPlugin.showMarker("tip1")//显示你需要显示的marker }) } })() </script> </html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。