Установка максимального уровня масштабирования с помощью jquery gmap3 и autoFit

Question

Я использую 'autoFit' для плагина gmap3, поэтому он приближается к лучшему уровню для объектов на карте. Проблема в том, что когда есть только 1 объект, он приближается к максимальному уровню, который находится слишком далеко. Как я могу сделать это не дальше, чем уровень масштабирования 14?

Спасибо.

Answer 1

Вы можете использовать maxZoom, но это устанавливает максимальный масштаб карты, а не функции автоподбора.Это означает, что пользователь не сможет увеличить масштаб на карте, если захочет.

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

Вместо этого я добавил скрытый круг или радиус в каждую точку с размером, который сделает картууменьшить масштаб до уровня, который я бы хотел.Таким образом, пользователь все еще может увеличить масштаб, если он захочет.

$('#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'
);

Answer 2

Вы можете добавить свойство maxzoom к свойству map плагина gmap3:

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

Answer 3

Мне кажется, это работает в gmap3 версии 5.1.1. Просто используйте autofit: {maxZoom: 14}. Это говорит карте, что при автоподборке можно увеличивать изображение только до уровня 14, и позволяет пользователю увеличивать или уменьшать масштаб с помощью мыши или элемента управления масштабированием.

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