JVectorMap Set Scale Below 1

Question

Ich erstelle eine Webseite, die eine Karte in voller Größe erfordert, für die ich JVectorMap verwende. Die Karte hat eine Breite und Höhe von 100%. Dies führt jedoch dazu, dass die Karte bis zum äußersten Rand der Seite reicht, wenn sie vollständig herausgezoomt ist, was unerwünscht ist. Im Idealfall würde es einen Rand um die Karte geben, wenn sie vollständig herausgezoomt wäre, aber wenn die Karte gezoomt wäre, würde sie sich immer noch bis zum Rand der Seite erstrecken. Im Wesentlichen möchte ich damit beginnen, dass die Karte größer herausgezoomt ist, als es zulässt.

In diesem Fall können HTML-Rahmen und -Polster nicht verwendet werden, da sie zwar den gewünschten Effekt beim Laden der Seite erzeugen, der Rahmen aber beim Vergrößern der Karte bestehen bleibt. Die einzige Idee war, den ' scale‘Variable nahe dem Ende des folgenden Codes auf einen Wert unter Null:

<script> 
    $(function(){ 
     $('#map').vectorMap({ 
      map: 'world_mill', 
      focusOn: { 
       x: 0.5, 
       y: 0.5, 
       scale: 0.8 
      } 
     }); 
    }); 
</script> 

Dies hatte keine Wirkung, da jeder Wert für‚scale‘unter 1 um ignoriert zu werden scheint. Ich habe Screenshots zur Veranschaulichung des Problems eingefügt.

Aktuelle Seite (Karte erstreckt sich auf Kante)

Ideal Seite (Karte hat Grenze

Jede Hilfe wäre sehr willkommen!

Answer 1

Ich werde die Antwort auf schreiben meine eigene Frage, nur für den Fall, dass jemand in Zukunft darüber stolpert .. Es scheint, dass setScale den Zoom nur auf Werte zwischen den Parametern zoomMin und zoomMax einstellen kann, also durch Absenkung von zoomMin zu 0.9 Ich konnte erfolgreich setScale verwenden, um den Zoom auf 0,9 zu reduzieren.

Daher ist der endgültige Code Am Ende hatte ich war:

$(function(){ 
    $('#map').vectorMap({ 
     map: 'world_mill', 
     zoomMin: 0.9, 
     focusOn: { 
      x: 0.5, 
      y: 0.5, 
      scale: 0.9 
     }, 
    }); 
});