slo*_*zen 2 javascript embed iframe
<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>
所以有嵌入代码.我想知道如何强制结果内容自动旋转？我可以用JS吗？
iframe不,您将无法iframe从Javascript 访问内容.
Javascript安全策略不允许跨域访问嵌入式(i)框架的文档.
它被称为相同的Orgin政策.
在计算中,相同的源策略是许多浏览器端编程语言(如JavaScript)的重要安全概念.该策略允许在源自同一站点的页面上运行的脚本 - 方案,主机名和端口号[1]的组合 - 访问彼此的方法和属性,没有特定限制,但阻止访问跨页面的大多数方法和属性不同的网站.[1] 同源策略也适用于XMLHttpRequest和robots.txt.[2]
解决方案是使用可以将您的应用程序与其服务相连接的Google API(在本例中为街景视图).
我想你需要panControl.
A
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>
此外,如果你想停止旋转,使用jQuery函数为for mouseenter和mouseleavefor 添加处理程序.#panoon()
请参阅JSFIDDLE