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

Question

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

我不确定大家是否明白我的意思所以我找到了一个link在那里你可以看到我试图实现的动画效果。请注意，网站上包含 google 地球。我想使用 google 贴图制作此效果：

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

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

这是我试过的方法。模式打开，标记在 google 地图卡片上可见，仅此而已。自动缩放效果不可见，因此我的解决方案不起作用。

<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 - 自动平滑放大标记

Google Maps v3 API - Automated smooth zoomIn to marker

google-maps

zooming

google-maps-api-3