谷歌地图用循环改变缩放答案

【问题标题】：google maps change zoom with loop谷歌地图用循环改变缩放
【发布时间】：2017-03-05 01:20:02
【问题描述】：

我正在使用 google maps 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);
    }

【问题讨论】：

标签： javascript google-maps loops for-loop

【解决方案1】：

您可以使用 map.setZoom 从 javascript 更改地图缩放级别：

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

proof of concept fiddle

代码 sn-p：

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>

【讨论】：