谷歌通过plusone.js api ,可以很容易地将安卓手机中的360度全景照片(称为"PhotoSpheres")直接嵌入到您自己的网站上
一个非常基本的例子是:
<html>
<head>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</head>
<body>
<g:panoembed imageurl="https://lh5.googleusercontent.com/-kr97Eucg6sM/UKGEuvo_eBI/AAAAAAAAi0s/adq8uqyhm_k/photo.jpg" fullsize="4096,2048" croppedsize="4096,1380" offset="0,480" displaysize="600,400"/>
<script>
gapi.panoembed.go();
</script>
</body>
</html>
然而,这似乎只适用于在imageurl中传递的图像托管在Google+中的情况。有没有一种方法可以在不首先将图像提供给谷歌的情况下使用这些图像?我在安卓手机上拍摄全景,可以在我的设备上毫无问题地观看360度魔术。我从设备上复制图像并上传到网络服务器,但如果我链接到自己的图像副本,"神奇的谷歌东西"就不会发生。如果我把图片上传到Google+,然后查看并获得URL并粘贴……那么它就完美地工作了。我当然想跳过Google+的步骤,只使用我的图像,而不把它们交给谷歌。
你知道如何在非谷歌托管的图像上实现这一点吗?
github上的这个项目可能是您想要的:Photosphere-Github
如果您使用AngularJs,我在这里开发了一个小指令:https://github.com/Gullfaxi171/angular-photosphere-directive
你只需要输入:
<photosphere src="path/img.jpg"></photosphere>
在HTML 中