Question

我正在使用谷歌地图api来生成地图。是否有可能制作一个javascript循环，将改变地图在5秒后缩放1直到变焦达到10？

地图不是静态地图所以我认为只有更改缩放的方法是刷新页面，但这会重置循环。

var map = null;
     function initialize() {
        var myOptions = {
            center: {
              lat: 34.052234, 
              lng: -118.243685
            },
          zoom: 1,
          scale: 2,
          disableDefaultUI: true,
          // mapTypeId: 'roadmap'
          mapTypeId: google.maps.MapTypeId.SATELLITE
          };

          map = new google.maps.Map(document.getElementById("map"),myOptions);
    }

Answer 1

您可以使用map.setZoom

从javascript更改地图缩放级别

var timer = setInterval(function() {
  map.setZoom(map.getZoom() + 1);
  if (map.getZoom() == 10)
    clearInterval(timer);
}, 5000)

proof of concept fiddle

代码段

var map = null;

function initialize() {
  var myOptions = {
    center: {
      lat: 34.052234,
      lng: -118.243685
    },
    zoom: 1,
    scale: 2,
    disableDefaultUI: true,
    // mapTypeId: 'roadmap'
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  map = new google.maps.Map(document.getElementById("map"), myOptions);
  var timer = setInterval(function() {
    map.setZoom(map.getZoom() + 1);
    if (map.getZoom() == 10)
      clearInterval(timer);
  }, 5000)
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

谷歌地图用循环改变缩放

1 个答案: