Question

我的代码目前有响应，但我想知道如何让地图自动旋转？谢谢。

示例：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>

Answer 1

当您通过iframe嵌入全景图时，无法完成此操作。

您需要通过javascript-API创建全景图并开始增加全景图标题的间隔：

＆＃13;

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);

＆＃13;

html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?v=3&.js"></script>
<div id="map-canvas"></div>

＆＃13;

如何让Google的室内地图视图自动旋转？

1 个答案: