2015-02-07 93 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