Question

我在网站的模态中使用Google Maps v3，我在寻找以下功能：如果访问者单击按钮，则会出现模态。模态内有带有标记的google地图。到目前为止，一切都很好。出现模态后，谷歌地图应开始从2级缩放到15级的平滑自动缩放。

我不确定是否每个人都能理解我的意思，因此我找到了一个链接，您可以在其中看到我想要实现的动画效果。请注意，网站上包含google Earth。我想使用Google地图实现这种效果：

https://earthengine.google.com/timelapse/?location=saudi-arabia

我在StackOverflow和Google上都发现了很多帖子，但是大多数主题描述了如何使用Google Maps v2实现我的目标。

这是我尝试过的。模态打开，标记在google maps卡上可见，仅此而已。无法看到自动缩放效果，因此我的解决方案无法正常工作。

<script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 48.2092762, lng: 16.3737249},
            zoom: 15
        });

        // example marker:
        var marker = new google.maps.Marker({
            map: map,
            targetZoom: 22,
            position: new google.maps.LatLng(48.2092762,16.3737249)
        });

        // example marker:
        var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(48.2092762,16.3737249)
        });

        // the smooth zoom function
        function animateMapZoomTo(map, targetZoom) {
            var currentZoom = arguments[2] || map.getZoom();
            if (currentZoom != targetZoom) {
                google.maps.event.addListenerOnce(map, 'zoom_changed', function (event) {
                    animateMapZoomTo(map, targetZoom, currentZoom + (targetZoom > currentZoom ? 1 : -1));
                });
                setTimeout(function(){ map.setZoom(currentZoom) }, 80);
            }
        }

    }
</script>


<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap"></script>

Answer 1

您似乎缺少了animateMapZoomTo方法中的第三个参数：

// the smooth zoom function
function animateMapZoomTo(map, targetZoom, commandedZoom) {
  var currentZoom = commandedZoom || map.getZoom();
  if (currentZoom != targetZoom) {
    google.maps.event.addListenerOnce(map, 'zoom_changed', function(event) {
      animateMapZoomTo(map, targetZoom, currentZoom + (targetZoom > currentZoom ? 1 : -1));
    });
    setTimeout(function() {
      map.setZoom(currentZoom + (targetZoom > currentZoom ? 1 : -1))
    }, 250);
  }
}

proof of concept fiddle

代码段：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 48.2092762,
      lng: 16.3737249
    },
    zoom: 2
  });

  // example marker:
  var marker = new google.maps.Marker({
    map: map,
    targetZoom: 22,
    position: new google.maps.LatLng(48.2092762, 16.3737249)
  });

  // the smooth zoom function
  function animateMapZoomTo(map, targetZoom, commandedZoom) {
    var currentZoom = commandedZoom || map.getZoom();
    if (currentZoom != targetZoom) {
      google.maps.event.addListenerOnce(map, 'zoom_changed', function(event) {
        animateMapZoomTo(map, targetZoom, currentZoom + (targetZoom > currentZoom ? 1 : -1));
      });
      setTimeout(function() {
        map.setZoom(currentZoom + (targetZoom > currentZoom ? 1 : -1))
      }, 250);
    }
  }
  google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
    console.log(map.getZoom());
    if (map.getZoom() < 3)
      animateMapZoomTo(map, 15);
    else if (map.getZoom() > 13)
      animateMapZoomTo(map, 2);
  })

}

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

<input id="btn" value="click" type="button" />
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap" async defer></script>

Google Maps v3 API-自动平滑放大到标记

1 个答案: