PhotoSphereViewer：<a href="…“>在触摸屏上不工作

Question

我用"PhotoSphereViewer“库做了一个简单的页面，我想用”标记插件“添加几个链接。

http://klappfon.info/xxxemanuel/2/

它在firefox和safari上就像一个护身符，但不幸的是，在触摸屏/手机浏览器上根本不是这样。

这些链接似乎是“可点击的”(变为活动状态，红色)，但无法打开...我的理论是，它与球体的导航有关，因为当"PhotoSphereViewer“设置为”TwoFingerMode“时，链接确实会打开……

有什么办法解决这个问题吗？

谢谢！

plugins:    [PhotoSphereViewer.GyroscopePlugin, 
            [PhotoSphereViewer.MarkersPlugin,{markers:[{
                    id: '1',
                    className: 'link',
                    longitude: 0.7,
                    latitude: 0,
                    html: '<a href="http://google.com">1234</a>',
                    anchor: 'bottom right',
                    scale: [0.5, 1.5],
                    style: {
                      maxWidth: '200px',
                      color: 'white',
                      fontSize: '30px',
                      fontFamily: 'Helvetica, sans-serif',
                      textAlign: 'center',

                      },
                    }, 
                  ]
                }]
              ]

Answer 1

您无法将链接添加到html标记，因为单击已被截获。相反，您应该将自定义data附加到标记并使用select-marker事件。

https://photo-sphere-viewer.js.org/plugins/plugin-markers.html#select-marker-marker-data

const viewer = new PhotoSphereViewer({
   plugins: [PhotoSphereViewer.GyroscopePlugin, 
            [PhotoSphereViewer.MarkersPlugin,{markers:[{
                    id: '1',
                    className: 'link',
                    longitude: 0.7,
                    latitude: 0,
                    html: '1234',
                    anchor: 'bottom right',
                    scale: [0.5, 1.5],
                    style: {
                      maxWidth: '200px',
                      color: 'white',
                      fontSize: '30px',
                      fontFamily: 'Helvetica, sans-serif',
                      textAlign: 'center',

                      },
                    },
                    data: { href: 'http://google.com' },
                  ]
                }]
              ]
});

const markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin);

markersPlugin.on('select-marker', (e, marker) => {
  window.location.href = marker.data.href;
});