开发者

Setting a max zoom level using jquery gmap3 & autoFit

I am using 'autoFit' on the gmap3 plugin so it zooms to t开发者_运维百科he 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.


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


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
        },...


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜