Einstellung einer maximalen Zoomstufe mit jquery gmap3 & autoFit

Question

Ich verwende 'autoFit' auf dem gmap3-Plugin, damit es auf die beste Ebene für die Objekte auf der Karte zoomen kann. Das Problem ist, wenn es nur 1 Objekt gibt, zoomt es auf die maximale Ebene, die zu weit ist. Wie kann ich erreichen, dass es nicht weiter als bis zur Zoomstufe 14 geht?

Danke.

Answer 1

Sie können maxZoom verwenden, aber das setzt den maximalen Zoom der Karte und nicht der Autofit-Funktion. Das bedeutet, dass der Benutzer nicht in der Lage ist, die Karte weiter zu vergrößern, wenn er das möchte.

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

Stattdessen fügte ich jedem Punkt einen versteckten Kreis oder Radius mit einer Größe hinzu, mit der die Karte auf die gewünschte Zoomstufe vergrößert werden konnte. Auf diese Weise kann der Benutzer immer noch weiter hineinzoomen, wenn er das möchte.

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

Sie können die Eigenschaft maxzoom zur Eigenschaft map des Plugins gmap3 hinzufügen:

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

Answer 3

Dies scheint bei mir in der gmap3-Version 5.1.1 zu funktionieren. Verwenden Sie einfach autofit:{maxZoom:14}. Dadurch wird die Karte angewiesen, bei der automatischen Anpassung nur bis zur Stufe 14 zu zoomen, und der Benutzer kann mit der Maus oder dem Zoomregler hinein- oder herauszoomen.

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