以下是一个简单的demo，演示如何在
Photo Sphere
Viewer 5.1中按住鼠标移动Mark
er位置：
```
html
<!
DOCTYPE html>
<
html>
<head>
<meta charset="utf-8">
<title>
Photo Sphere
Viewer 5.1 Mark
er Demo</title>
<style>
#
viewer {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="
viewer"></div>
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/
photo-
sphere-
viewer/dist/
photo-
sphere-
viewer.min.js"></script>
<script>
// 创建
Photo Sphere
Viewer对象
var
viewer = new
PhotoSphere
Viewer({
contain
er: '
viewer',
panorama: 'https://
photo-
sphere-
viewer.js.org/assets/Bryce-Canyon-National-Park-Mark-Dolin
er.jpg',
navbar: true,
mark
ers: [
{
id: 'mark
er1',
longitude: 0.5,
latitude: 0.2,
image: 'https://
photo-
sphere-
viewer.js.org/assets/pin-red.png',
width: 32,
height: 32,
anchor: 'bottom cent
er',
},
],
});
// 获取标记对象
var mark
er =
viewer.getMark
er('mark
er1');
// 在mousedown事件上更新标记位置
mark
er.on('mousedown', function(event) {
// 阻止默认行为和事件传播
event.preventDefault();
event.stopPropagation();
// 获取场景坐标系中的鼠标位置
var mousePosition =
viewer.mouseToCoords(event.clientX, event.clientY);
// 更新标记位置
mark
er.setPosition(mousePosition);
});
// 在mouseup事件上保存标记位置
mark
er.on('mouseup', function(event) {
// 保存标记位置
mark
er.save();
});
</script>
</body>
</
html>
```
在这个demo中，我们在
Photo Sphere
Viewer中添加了一个标记，并使用上面提到的代码来实现按住鼠标移动Mark
er位置的功能。您可以在https://codepen.io/pen/GRvKyNL 上查看该demo的效果。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
