使Google Viritual Tour嵌入自动旋转？
[英]Make Google Viritual Tour embeds automatically rotate?
问题描述
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?hl=en&sll=37.936424,-107.814144&layer=c&cid=12115290478932730695&panoid=YY_tNFWmbOaOJDV_zlAZ0A&cbp=13,40.7,,0,5.57&gl=US&t=m&cbll=37.936374,-107.814213&ie=UTF8&hq=&hnear=&ll=37.935914,-107.813505&spn=0.004595,0.010568&source=embed&output=svembed"></iframe><br /><small><a href="https://maps.google.com/maps?hl=en&sll=37.936424,-107.814144&layer=c&cid=12115290478932730695&panoid=YY_tNFWmbOaOJDV _zlAZ0A&cbp=13,40.7,,0,5.57&gl=US&t=m&cbll=37.936374,-107.814213&ie=UTF8&hq=&hnear=&ll=37.935914,-107.813505&spn=0.004595,0.010568&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
So there's the embed code. 
这就是嵌入代码。 I was wondering how one might force the resultant content to automatically rotate? 我想知道如何迫使结果内容自动旋转？ Could I use JS? 我可以使用JS吗？
2 个解决方案
解决方案1
5 已采纳 2013-05-16 16:46:29
Acessing the components from iframe 从iframe访问组件
No, you will can't access the content from iframe from Javascript. 不，您将无法从Javascript访问iframe的内容。
The Javascript safety policies do not allow crossdomain access to the document of an embedded (i)frame. Javascript安全策略不允许跨域访问嵌入式（i）框架的文档。
It is called the Same Orgin Policy . 这被称为“ 相同原始策略” 。
In computing, the same origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript.
Using Google API 使用Google API
The solution is using Google API that can connect your application with their service (Street View, in this case). 该解决方案使用的是Google API ，可以将您的应用程序与其服务（在这种情况下为街景视图）连接起来。
I think that you need panControl . 我认为您需要panControl 。
A
panControlprovides a way to rotate the panorama.panControl提供了一种旋转全景图的方法。 This control appears by default as a standard integrated compass and pan control.
(search for "Street View Controls" in the API ) （在API中搜索“街景控件”）
Sample 样品
Even it's not the best solution I think that this will help you. 即使这也不是最好的解决方案，我认为这会对您有所帮助。 This will update the heading of panorama. 这将更新全景图的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>
Also if you want to stop the rotating, add handlers for mouseenter and mouseleave for #pano , using on() jQuery function. 此外，如果你想停止旋转，添加处理程序mouseenter和mouseleave了#pano ，使用on() jQuery的功能。
解决方案2
0 2014-12-13 11:22:34
Be carefull, i get some strange connections from moscow to my server if i use the viralizer. 请注意，如果我使用病毒消除器，我会从莫斯科到我的服务器获得一些奇怪的连接。 So I removed it from my page. 所以我从页面上删除了它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.