限制谷歌地图上的滚轮缩放级别

Question

我有以下代码应该限制地图内的缩放。当我手动单击地图控件的放大和缩小按钮(加号和减号(时，缩放受到限制。当我使用滚轮缩放时，这在某种程度上不会发生。如何限制滚轮应用的缩放级别？我不想通过滚轮停用缩放。

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 52.520008, lng: 13.404954},
});
var old_zoom_level = 12;
map.data.loadGeoJson('data/1000_berlin_buildings.json');
//map.data.loadGeoJson('google.json');
map.data.setStyle(styleFeature);
map.data.addListener('mouseover', mouseInToRegion);
map.data.addListener('mouseout', mouseOutOfRegion);
map.addListener('bounds_changed', function(){
//console.log("bounds changed");
});
google.maps.event.addListener(map, 'zoom_changed', function () {
// if (map.getZoom() < 9) map.setZoom(9);
var new_zoom_level = map.getZoom();
console.log("zoom Changed from "+ old_zoom_level +" to "+new_zoom_level);
if (new_zoom_level < __min_zoom_level) {
new_zoom_level = __min_zoom_level;
map.setZoom(__min_zoom_level);
}
if (new_zoom_level > __max_zoom_level) {
new_zoom_level = __max_zoom_level;
map.setZoom(__max_zoom_level);
}
old_zoom_level = new_zoom_level;
});
}

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
});

如果需要在任何时候更改这些值，只需使用 mapsetOptions()方法：

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>