在React/Next JS中使用带有照片球形查看器的标记
在React/Next JS中使用带有照片球形查看器的标记
提问于 2022-01-21 06:00:28
我很难在我的下一个JS应用程序中找到如何使用标记。
我有一个基本的全景图和这个代码..。
import React, { useEffect } from "react";
import Head from "next/head";
import { Viewer } from "photo-sphere-viewer";
export default function Home() {
const sphereElementRef = React.createRef();
useEffect(() => {
const shperePlayerInstance = new Viewer({
container: sphereElementRef.current,
panorama: "/images/pano2.jpg",
});
// unmount component instructions
return () => {
shperePlayerInstance.destroy();
};
}, []);
return (
<div>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"
/>
</Head>
<main>
<div ref={sphereElementRef}></div>
</main>
</div>
);
}所以这一切都很好，但我不知道标记是怎么进来的。我试过和文档中的标记完全一样
plugins: [
[PhotoSphereViewer.MarkersPlugin, {
markers: [
{
id: 'new-marker',
longitude: '45deg',
latitude: '0deg',
image: 'assets/pin-red.png',
},
],
}], ],
但是去找PSVError: Un undefined value was given for plugins.
而且也只是用
markers: [
{
id: 'image',
longitude: 0.2,
latitude: -0.13770,
....
},但我只得到了PSVError: Unknown option markers
任何想法都会有很大帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-24 05:55:14
这是我的全部观众，在我想出如何做每件事之后
import { Viewer } from "photo-sphere-viewer";
import { MarkersPlugin } from "photo-sphere-viewer/dist/plugins/markers";
import "photo-sphere-viewer/dist/plugins/markers.css";
import { GyroscopePlugin } from "photo-sphere-viewer/dist/plugins/gyroscope";
import { VisibleRangePlugin } from "photo-sphere-viewer/dist/plugins/visible-range";
import StereoPlugin from "photo-sphere-viewer/dist/plugins/stereo";
export default function Home() {
const sphereElementRef = React.createRef();
useEffect(() => {
const shperePlayerInstance = new Viewer({
container: sphereElementRef.current,
panorama: "/images/pano2.jpg",
plugins: [
[
VisibleRangePlugin,
{
longitudeRange: [null],
latitudeRange: [-Math.PI / 2, Math.PI / 4], //Restrict range so you can't see the top of the pano
},
],
[GyroscopePlugin, StereoPlugin],
[
MarkersPlugin,
{
markers: [
{
id: "image",
longitude: 0.32,
latitude: 0.11,
image: "/images/pin-red.png",
width: 50,
height: 50,
anchor: "bottom center",
tooltip: "A image marker.",
},
],
},
],
],
});
const gyroPlugin = shperePlayerInstance.getPlugin(GyroscopePlugin);
const markersPlugin = shperePlayerInstance.getPlugin(MarkersPlugin);
markersPlugin.on("select-marker", (e, marker) => {
markersPlugin.updateMarker({
id: marker.id,
});
});
if (gyroPlugin && typeof gyroPlugin.isEnabled !== "function") {
console.log("plugin issue");
}
if (gyroPlugin.isEnabled()) {
gyroPlugin.stop();
} else {
gyroPlugin
.start()
.then(() => {
const { latitude } = shperePlayerInstance.getPosition();
const { heading } = getCompassHeadingExtra();
shperePlayerInstance.rotate({
longitude: heading * (Math.PI / 180),
latitude,
});
})
.catch(handleGyroEnableError);
}
// unmount component instructions
return () => {
shperePlayerInstance.destroy();
};
}, []); // will only be called when the src prop gets updated页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70797016
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号