滚动最大缩放或最小缩放级别后，谷歌地图略微移动

Question

I have simple web application where I'm using google maps with javascript.我有一个简单的网络应用程序，我在其中使用带有 javascript 的谷歌地图。 I have set min and max zoom level in map like this: this.map.setOptions({ minZoom:3,maxZoom: 17 });我在地图中设置了最小和最大缩放级别，如下所示： this.map.setOptions({ minZoom:3,maxZoom: 17 }); What I'm observing is after scroll ie either zoom in or zoom out and reaching max or min zoom level ,map slightly moves/slides instead of stopping further zoom in or zoom out.我观察的是滚动后，即放大或缩小并达到最大或最小缩放级别，地图稍微移动/滑动而不是停止进一步放大或缩小。 Previously it was working fine.Why this change occurred ?以前它工作正常。为什么会发生这种变化？ Is there any way to stop map movement after reaching max or min zoom level?有没有办法在达到最大或最小缩放级别后停止地图移动？ this is how i'm loading map to div.这就是我将地图加载到 div 的方式。

 self.map = new gmaps.Map(document.getElementById('map'), {         mapTypeControlOptions: {
                position: gmaps.ControlPosition.TOP_RIGHT,
                style: gmaps.MapTypeControlStyle.HORIZONTAL_BAR
            },
            fullscreenControl: false,
            backgroundColor: '#F7F7F7',
            clickableIcons: false,
            streetViewControl: false
        });

Zoom events are not handled in my code.After setting min and max zoom level then ,issue can be reproduced on mouse scroll.我的代码中没有处理缩放事件。设置最小和最大缩放级别后，可以在鼠标滚动时重现问题。 I observed this issue yesterday only.我昨天才观察到这个问题。

Answer 1

I would suggest updating your code so that you can avoid issues like these in the future.我建议更新您的代码，以便将来避免此类问题。 Using the latest object names will help you avoid errors and/or warnings (like these) due to deprecation.使用最新的对象名称将帮助您避免由于弃用而导致的错误和/或警告（类似这些）。 As suggested by @Xomena, you may stay up-to-date with the experimental and release versions here .正如@Xomena 所建议的，您可以在此处了解最新的experimental和release版。

However, I suggest getting ahead of the curve by updating the Google MapOptions object property names being called on by your code.但是，我建议通过更新代码调用的Google MapOptions对象属性名称来领先于曲线。 Review the code sample below, you'll see that in Maps JS API documentation , the prefix google.maps for the Map Type control style property options is used;查看下面的代码示例，您将看到在Maps JS API 文档中，使用了Map Type control样式属性选项的前缀google.maps ； note that is is NOT gmaps.MapTypeControlStyle .请注意，这不是gmaps.MapTypeControlStyle 。 Little updates like these help you stay ahead of future release versions.像这样的小更新可帮助您保持领先于未来的发布版本。

The Map Type control may appear in one of the following style options:地图类型控件可能会出现在以下样式选项之一中：

google.maps.MapTypeControlStyle.HORIZONTAL_BAR displays the array of controls as buttons in a horizontal bar as is shown on Google Maps. google.maps.MapTypeControlStyle.HORIZONTAL_BAR将控件数组显示为水平栏中的按钮，如谷歌地图所示。 google.maps.MapTypeControlStyle.DROPDOWN_MENU displays a single button control allowing you to select the map type via a dropdown menu. google.maps.MapTypeControlStyle.DROPDOWN_MENU显示单个按钮控件，允许您通过下拉菜单选择地图类型。 google.maps.MapTypeControlStyle.DEFAULT displays the default behavior, which depends on screen size and may change in future versions of the API. google.maps.MapTypeControlStyle.DEFAULT显示默认行为，这取决于屏幕大小，并且可能会在 API 的未来版本中发生变化。

<body>
<div id="map"></div>
<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: {lat: -28.643387, lng: 153.612224},
      mapTypeControl: true,
      mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
          position: google.maps.ControlPosition.TOP_CENTER
      },
      zoomControl: true,
      zoomControlOptions: {
          position: google.maps.ControlPosition.LEFT_CENTER
      },
      scaleControl: true,
      streetViewControl: true,
      streetViewControlOptions: {
          position: google.maps.ControlPosition.LEFT_TOP
      },
      fullscreenControl: true
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>

滚动最大缩放或最小缩放级别后，谷歌地图略微移动

问题描述

1 个解决方案

解决方案1
1 2018-02-21 00:52:47

滚动最大缩放或最小缩放级别后，谷歌地图略微移动

问题描述

1 个解决方案

解决方案1 1 2018-02-21 00:52:47

解决方案1
1 2018-02-21 00:52:47