photo-sphere-viewer5.1 marker按住鼠标移动位置demo
时间: 2023-07-19 09:56:09 浏览: 92
以下是一个简单的demo,演示如何在Photo Sphere Viewer 5.1中按住鼠标移动Marker位置:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Photo Sphere Viewer 5.1 Marker 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 PhotoSphereViewer({
container: 'viewer',
panorama: 'https://photo-sphere-viewer.js.org/assets/Bryce-Canyon-National-Park-Mark-Doliner.jpg',
navbar: true,
markers: [
{
id: 'marker1',
longitude: 0.5,
latitude: 0.2,
image: 'https://photo-sphere-viewer.js.org/assets/pin-red.png',
width: 32,
height: 32,
anchor: 'bottom center',
},
],
});
// 获取标记对象
var marker = viewer.getMarker('marker1');
// 在mousedown事件上更新标记位置
marker.on('mousedown', function(event) {
// 阻止默认行为和事件传播
event.preventDefault();
event.stopPropagation();
// 获取场景坐标系中的鼠标位置
var mousePosition = viewer.mouseToCoords(event.clientX, event.clientY);
// 更新标记位置
marker.setPosition(mousePosition);
});
// 在mouseup事件上保存标记位置
marker.on('mouseup', function(event) {
// 保存标记位置
marker.save();
});
</script>
</body>
</html>
```
在这个demo中,我们在Photo Sphere Viewer中添加了一个标记,并使用上面提到的代码来实现按住鼠标移动Marker位置的功能。您可以在https://codepen.io/pen/GRvKyNL 上查看该demo的效果。