2015-02-07 92 views
-2

我的代码当前是响应式的,但我想知道如何让地图自动旋转?谢谢。如何让Google的室内地图视图自动旋转?

例子:http://virali.se/photo/spin/embed/00c79439f35e4833d4b3c350f6af0043.html#embed

<style> 
.google-maps { 
    position: relative; 
    padding-bottom: 75%; // This is the aspect ratio 
    height: 0; 
    overflow: hidden; 
} 
.google-maps iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100% !important; 
    height: 100% !important; 
} 
</style> 
<div class="google-maps"> 
<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2sca!4v1417361836017!6m8!1m7!1sD80WPU9LQ3oAAAALCpZfjw!2m2!1d45.71770335915593!2d11.47028447620278!3f17!4f0!5f1.4199149422479231" width="1700" height="550" frameborder="0" style="border:0"></iframe> 
</div> 
+0

你是什么意思的“自动旋转” ? – geocodezip 2015-02-07 17:20:16

+0

请参阅:http://nap360.com/ – Diana 2015-02-10 02:35:28

回答

1

当您通过iframe嵌入全景这不能做。

你需要创建通过JavaScript的API的全景,并开始增加了全景的标题间隔:

function initialize() { 
 
    panorama = new google.maps.StreetViewPanorama(
 
    document.getElementById('map-canvas'), 
 
    {pano:'D80WPU9LQ3oAAAALCpZfjw', 
 
    pov:{heading:0,pitch:0}, 
 
    disableDefaultUI:true} 
 
); 
 
    panorama.setZoom(0); 
 
    setInterval(function(){ 
 
    var pov=panorama.getPov(); 
 
    pov.heading=(pov.heading+.1)%360; 
 
    panorama.setPov(pov); 
 
    },10); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas { 
 
     height: 100%; 
 
     margin: 0px; 
 
     padding: 0px; 
 
}
<script src="https://maps.googleapis.com/maps/api/js?v=3&.js"></script> 
 
<div id="map-canvas"></div>

+0

我将整个代码放在LayerSlider中,它只显示以下内容并将其余部分截断:function initialize(){ panorama = new google.maps.StreetViewPanorama( document。 getElementById('map-canvas'), {pano:'D80WPU9LQ3oAAAALCpZfjw', pov:{heading:0,pitch:0}, disableD – Diana 2015-02-10 02:39:07

+0

我将代码放在SO-snippet-editor中,当我点击“运行代码片断按钮“上方,我看到一个旋转的街道ViewPanorama – 2015-02-10 07:02:14

+0

嗯,你是对的。问题是我把它放入一个Wordpress插件(LayerSlider),我想我错过了一个关键的代码段让它运行。 – Diana 2015-02-26 01:00:32