Setting a max zoom level using jquery gmap3 & autoFit

问题

I am using 'autoFit' on the gmap3 plugin so it zooms to the best level for the objects on the map. The problem is when there is only 1 object it zooms in to the maximum level which is too far. How can i make it go no futher than zoom level 14?

Thanks.

回答1:

You can use maxZoom, but that sets the max zoom of the map and not of the autofit function. That means that the user will not be able to zoom further in on the map if they would want to.

map:{
      center: true,
      zoom: 10,
      maxZoom: 18
    }

Instead I added a hidden circle or radius to every point with a size that would make the map zoom out to the zoom level I would want it to be. This way the user can still zoom further in if they would want to.

$('#test').gmap3(
    { 
        action: 'addMarker',
        latLng: "your data input for markers",
        map:{
            center: true,
            zoom: 10
        }
    },
    { 
        action: 'addCircle',
        latLng: "your data input for markers",
        options: {
            radius : 75,
            strokeOpacity: 0,
            fillOpacity: 0,
        }
    },
    'autofit'
);

回答2:

You can add the maxzoom property to the map property of the gmap3 plugin:

$('#test1').gmap3(
      {
        action: 'addInfoWindow',
        address: "some place name",
        map:{
          center: true,
          zoom: 5,
          maxZoom: 10
        },...

回答3:

This seems to work for me in the gmap3 version 5.1.1. Just use autofit:{maxZoom:14}. This tells the map to only zoom into level 14 on autofit and allows the user to zoom in or out with their mouse or the zoom control.

    $(function(){

    $("#test").gmap3();

    $('#test-ok').click(function(){
      var addr = $('#test-address').val();
      if ( !addr || !addr.length ) return;
      $("#test").gmap3({
        getlatlng:{
          address:  addr,
          callback: function(results){
            if ( !results ) return;
            $(this).gmap3({
              marker:{

                latLng:results[0].geometry.location,
                map:{

                  center: true,

                },

              },
              autofit:{maxZoom: 14},

            });

          }
        }
      });
    });

    $('#test-address').keypress(function(e){
      if (e.keyCode == 13){
        $('#test-ok').click();
      }
    });
  });

来源：https://stackoverflow.com/questions/7066031/setting-a-max-zoom-level-using-jquery-gmap3-autofit