Question

我有以下代码应限制地图中的缩放。当我手动单击地图控件的放大和缩小按钮（加号和减号）时，缩放受到限制。当我使用滚轮进行缩放时，这不会以某种方式发生。如何限制滚轮应用的缩放级别？我不想通过滚轮禁用缩放。

resolve(AuthState)

Answer 1

通过使用地图的minZoom和maxZoom属性，您可以以一种更加简单的方式来实现此目的。

var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 12,
    center: {lat: 52.520008, lng: 13.404954},
    minZoom: 10,
    maxZoom: 14
});

如果您需要随时更改这些值，只需使用map setOptions()方法：

map.setOptions({
  minZoom: 8,
  maxZoom: 15
});

工作片段：

var map;

function initialize() {

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 12,
    center: {
      lat: 52.520008,
      lng: 13.404954
    },
    minZoom: 10,
    maxZoom: 14,
  });

  google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {

    map.setOptions({
      minZoom: 5,
      maxZoom: 15
    });
  })
}

initialize();

#map-canvas {
  height: 150px;
}

#btn {
  margin-top: 10px;
  line-height: 30px;
  background: yellow;
  cursor: pointer;
}

<div id="map-canvas"></div>
<button id="btn">Change limits to min: 5 and max: 15</button>

<script src="https://maps.googleapis.com/maps/api/js"></script>

限制Google Maps上的滚轮缩放级别

1 个答案: