Photo Sphere Viewer 中标记工具提示的移动端适配方案

Photo Sphere Viewer 是一款功能强大的全景图查看器，其中的 MarkersPlugin 插件允许在全景图上添加交互式标记点。本文将重点探讨如何优化标记点工具提示在移动设备上的交互体验。

工具提示的默认行为

默认情况下，标记点的工具提示是通过鼠标悬停(hover)触发的。这种交互方式在桌面端表现良好，但在移动设备上却无法正常工作，因为移动设备没有鼠标悬停的概念。

解决方案：修改触发方式

通过修改标记点的配置，可以将工具提示的触发方式从悬停改为点击。具体实现方法如下：

tooltip: {
    content: '这里是提示内容',
    trigger: 'click'
}

与 VirtualTourPlugin 的集成

当与 VirtualTourPlugin 配合使用时，需要注意 JSON 配置的格式问题。错误的引号使用会导致配置被解析为字符串而非对象：

// 错误写法（引号使用不当）
tooltip: "{ content: '提示内容', trigger: 'click' }"

// 正确写法
tooltip: { content: '提示内容', trigger: 'click' }

进阶控制方案

如果需要更精细地控制工具提示的显示/隐藏，可以通过事件监听实现：

markers.addEventListener('select-marker', ({ marker }) => {
    if (marker.state.staticTooltip) {
        markers.hideMarkerTooltip(marker.id);
    } else {
        markers.showMarkerTooltip(marker.id);
    }
});

最佳实践建议

1. 对于移动端优先的项目，建议统一使用点击触发方式
2. 在复杂的交互场景中，考虑结合多种触发方式
3. 注意检查JSON配置的格式，避免引号使用错误
4. 测试在不同设备上的表现，确保一致的用户体验

通过以上方法，可以确保标记点的工具提示在各种设备上都能提供良好的用户体验。