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

Question

I have the following code that should limit the zooming within my map. The Zoom is limited when I manually click the zoom in and zoom out buttons (plus and minus) of the map controls. This is somehow not happening when I'm using a scroll-wheel to zoom. How can I limit the zoom level that my scroll-wheel is applying? I don't want to deactivate the zoom via scroll-wheel.

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

You can do that in a much easier way, by using the map minZoom and maxZoom properties.

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

If you need these values to change at any point, simply use the map setOptions() method:

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

Working snippet:

 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>