Jvectormap sehr klein auf div ändern

Ich habe zwei Divs, eins mit der Weltkarte und eins mit der US-Karte. Wenn die USA auf die Weltkarte geklickt wird, möchte ich dieses div verbergen und die US-Karte in Sicht bringen.Jvectormap sehr klein auf div ändern

Dies funktioniert, aber die Karte ist winzig, obwohl die Position der Zoom-Tasten die Größe des Div angibt, wie es sein sollte.

enter image description here

Irgendwelche Ideen?

Wenn ich beide divs von Anfang an auf "Block" gesetzt habe, haben sie beide die richtige Größe, es ist nur beim Aufruf von Code, um das div zu wechseln, dass es fehlschlägt.

Quelle

2013-02-19 Dan James Palmer

Dieses Problem wird durch die Tatsache verursacht, dass Sie Karte auf dem ausgeblendeten Element initialisieren, dessen Größe zu diesem Zeitpunkt nicht richtig berechnet werden kann. Versuchen Sie, Ihre Logik so zu ändern, dass jVectorMap initialisiert wird, nachdem das Element sichtbar wird.

Quelle

2013-02-20 15:32:55 bjornd

Dank, werde ich, dass ein geben gehen –

Danke - das ein Problem gelöst, wo die Karte zu weit nach rechts, bis der Browser verkleinert wurde. Verzögerung der Initialisierung hat es behoben. – Michael

Sie können nach dem Anzeigen auch eine Größenänderung() für den Container dieser Karte auslösen.

ich ein Beispiel in diesem Beitrag gemacht: Switch maps in Jvectormap?

Quelle

2013-03-03 18:49:40 silenzium

Vielen Dank! Das hat funktioniert. – Flov

Ich war mit jVectorMap Display Sizing das gleiche Problem hat und einen Weg gefunden, um sie richtig zu bekommen anzuzeigen.

Das Problem ist, wenn Sie Ihr Kartenobjekt erstellen. Damit es ordnungsgemäß angezeigt wird, muss das vectorMap-Objekt beim Erstellen sichtbar sein. Das heißt, wenn Sie sie in Tabs setzen, sollten Sie:

Klicken Sie auf die erste Registerkarte.
Erstellen Sie die erste Karte.
Klicken Sie auf die Registerkarte "Second".
Erstellen Sie die zweite Karte .. ..
Sie können schließlich klicken Sie auf die erste Registerkarte erneut, so ist es die aktive auf der Seite laden.

Hoffe, das hilft jedem, der das gleiche Problem hat.

Quelle

2013-05-24 20:47:03 user2418915

Sie können Ihrem Code auch Logik hinzufügen, wenn der Container Ihrer Karte erscheint, führt Code eine Methode namens updateSize aus. Insbesondere die wie folgt aussieht:

$('$world-map').vectorMap('get','mapObject').updateSize();

Quelle

2015-05-05 03:34:54 bootoffav

Das Problem ist, dass der div mit der US-Karte versteckt ist, kann daher nicht die Kartengröße (Breite) korrekt berechnen. Stattdessen können Sie das div, um die Höhe haben: 0.

Ich habe dieses Problem mit Highcharts, das gleiche für jvectormap. Im Folgenden Code, um das Problem (mit Bootstrap) behoben:

/* bootstrap hack: fix content width inside hidden tabs */ 
.tab-content > .tab-pane:not(.active), 
.pill-content > .pill-pane:not(.active) { 
    display: block; 
    height: 0; 
    overflow-y: hidden; 
} 
/* bootstrap hack end */

Quelle

2016-11-08 11:59:55 fraktal12

Antwort

Verwandte Themen