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

问题描述 投票：-1回答：1

我有简单的网络应用程序，我正在使用谷歌地图与JavaScript。我在地图中设置了最小和最大缩放级别，如下所示：this.map.setOptions({ minZoom:3,maxZoom: 17 });我观察的是滚动后即放大或缩小并达到最大或最小缩放级别，地图稍微移动/滑动而不是停止进一步放大或缩放出。以前它工作正常。为什么发生这种变化？有没有办法在达到最大或最小缩放级别后停止地图移动？这就是我如何将地图加载到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
        });

我的代码中没有处理缩放事件。设置最小和最大缩放级别之后，可以在鼠标滚动上重现问题。我昨天才发现这个问题。

javascript google-maps
1个回答
1
投票

我建议您更新代码，以便将来可以避免这些问题。使用最新的对象名称将帮助您避免因弃用而导致errors and/or warnings （如这些）。正如@Xomena建议的那样，您可以使用experimental和release版本here保持最新。

但是，我建议通过更新代码调用的Google MapOptions对象属性名称来超越曲线。查看下面的代码示例，您将看到在Maps JS API documentation中，使用了google.maps样式属性选项的前缀Map Type control;请注意，这不是gmaps.MapTypeControlStyle。像这样的小更新可以帮助您保持领先于未来的版本。

“地图类型”控件可能出现在以下某个样式选项中：

google.maps.MapTypeControlStyle.HORIZONTAL_BAR将控件数组显示为水平栏中的按钮，如Google地图上所示。 google.maps.MapTypeControlStyle.DROPDOWN_MENU显示单个按钮控件，允许您通过下拉菜单选择地图类型。 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.