让 Google Virtual Tour 嵌入自动旋转？答案

【问题标题】：Make Google Viritual Tour embeds automatically rotate?让 Google Virtual Tour 嵌入自动旋转？
【发布时间】：2013-05-11 15:57:31
【问题描述】：

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"       src="https://maps.google.com/maps?hl=en&amp;sll=37.936424,-107.814144&amp;layer=c&amp;cid=12115290478932730695&amp;panoid=YY_tNFWmbOaOJDV_zlAZ0A&amp;cbp=13,40.7,,0,5.57&amp;gl=US&amp;t=m&amp;cbll=37.936374,-107.814213&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;ll=37.935914,-107.813505&amp;spn=0.004595,0.010568&amp;source=embed&amp;output=svembed"></iframe><br /><small><a href="https://maps.google.com/maps?hl=en&amp;sll=37.936424,-107.814144&amp;layer=c&amp;cid=12115290478932730695&amp;panoid=YY_tNFWmbOaOJDV _zlAZ0A&amp;cbp=13,40.7,,0,5.57&amp;gl=US&amp;t=m&amp;cbll=37.936374,-107.814213&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;ll=37.935914,-107.813505&amp;spn=0.004595,0.010568&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

所以有嵌入代码。我想知道如何强制生成的内容自动旋转？可以用JS吗？

【问题讨论】：

标签： javascript iframe embed

【解决方案1】：

从`iframe` 访问组件

不，您将无法通过 Javascript 访问来自 iframe 的内容。

Javascript 安全策略不允许跨域访问嵌入 (i) 框架的文档。

它被称为Same Orgin Policy。

在计算领域，同源策略是许多浏览器端编程语言（例如 JavaScript）的重要安全概念。该策略允许在源自同一站点的页面上运行的脚本（方案、主机名和端口号的组合[1]）不受特定限制地访问彼此的方法和属性，但禁止跨页面访问大多数方法和属性不同的网站。[1]同源策略也适用于 XMLHttpRequest 和 robots.txt。[2]

使用谷歌 API

解决方案是使用Google API，它可以将您的应用程序与其服务（在本例中为街景）连接起来。

我认为你需要panControl。

panControl 提供了一种旋转全景图的方法。默认情况下，此控件显示为标准的集成罗盘和平移控件。您可以通过在 panControlOptions 字段中提供 PanControlOptions 来更改控件的位置。

（在API 中搜索“街景控件”）

示例

即使这不是最好的解决方案，我认为这会对您有所帮助。这将更新全景图的heading。

<DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Street View service</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var panorama;

        function initialize() {
            var fenway = new google.maps.LatLng(42.345573,-71.098326);
            var panoramaOptions = {
                position: fenway,
                pov: {
                heading: 4,
                    pitch: 10
                }
            };
            panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);

            var i = 0;
            window.setInterval(function () {
                panorama.setPov({
                    heading: i,
                    pitch: 10,
                    zoom: 1
                });
                i += 0.1;
            }, 10);
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas" style="width: 400px; height: 300px"></div>
    <div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
  </body>
</html>

此外，如果您想停止旋转，请使用on() jQuery 函数为mouseenter 和mouseleave 添加处理程序。

见JSFIDDLE

【讨论】：

这是一个在 Facebook 应用程序中工作的示例，知道他们是如何实现的吗？ facebook.com/WinnipegGoogleTrustedPhotographer/…
你是对的。我认为他们使用 Google API。查看更新的答案。
约翰——这有点过头了。如何使用 panControl 字段？我可以将它添加到我的嵌入链接吗？感谢您的帮助。
约翰，这确实有帮助。非常感谢。
约翰，你太棒了。这对我有帮助，我学到了很多。最后，我通过该 facebook 链接的代码进行挖掘，发现 .js 负责效果......长话短说，我找到了这个工具：virali.se/photo/spin 它......完美。哈哈。不过，感谢您的所有工作，您是圣人。

【解决方案2】：

小心，如果我使用病毒化程序，我会从莫斯科到我的服务器得到一些奇怪的连接。所以我把它从我的页面上删除了。

【讨论】：

从iframe 访问组件

使用谷歌 API

示例

从`iframe` 访问组件