it-swarm.com.de

Google Map wird auf der Registerkarte Bootstrap nicht richtig geladen

Ich verwende iProperty, um Registerkarten mit Inhalten für verschiedene Eigentümer zu erstellen.

Ich habe die Kerndateien häufig gehackt, damit die Site so aussieht und funktioniert, wie ich es möchte, aber ich habe ein Problem mit den Karten in den Registerkarten.

Wenn Sie sich die folgende Seite ansehen und dann auf die Registerkarte Standort klicken, wird das Problem angezeigt, dass nur ein kleiner Teil der Karte geladen wird. Im Übrigen verschwindet das Problem, wenn Sie die Größe des Browsers ändern, während die Kartenregisterkarte aktiv ist. Ich glaube, dass beim ersten Laden der Karte ein Problem vorliegt.

http://red-ferndevelopment.co.uk/OfficeExperts/index.php?option=com_iproperty&view=property&id=90&Itemid=318

Wenn jemand helfen könnte, wäre ich mehr als dankbar.

Vielen Dank, Austin

2
Austin

Der Grund für die Größenänderung ist zunächst, dass die Karte überprüft, ob bei der Größenänderung des Browsers alles "korrekt" ist. Da die Registerkarte standardmäßig ausgeblendet ist, ist die Größe der Karte kleiner, bis die Registerkarte geöffnet wird. Es wird jedoch kein Ereignis an die Karte gesendet, um über die Änderung zu benachrichtigen. Ich habe ähnliche Probleme mit Google Maps gesehen und es ist nicht wirklich ein Problem, nur etwas, das leicht übersehen werden kann.

Hierfür gibt es einige Korrekturen. Die erste besteht darin, map.checkResize() aufzurufen, wenn die Registerkarte geöffnet wird. Obwohl es sich um eine Komponente von Drittanbietern handelt, die möglicherweise nicht einfach ist, ist dies möglicherweise kein Problem, wenn bereits Kernmodifikationen vorgenommen wurden. Ersetzen Sie map durch die tatsächliche Variable für die Karte.

Der zweite, einfachere Weg, es zu "tricksen", ohne es tatsächlich zu berühren, besteht darin, einfach so etwas zu tun:

jQuery('a[href="#propmap"]').on('click',function(){
   jQuery(window).trigger('resize');
});

Sie können das überall platzieren (solange es geladen ist, nachdem das DOM geladen wurde) und es sollte es reparieren. Es löst automatisch ein Größenänderungsereignis aus, wenn auf die Registerkarte geklickt wird, damit die Karte ohne manuelle Größenänderung funktioniert.

Der erste Vorschlag ist der beste, da es keine Art von "Hack" ist, aber der zweite sollte funktionieren, egal was passiert.

5
Jordan Ramstad

Auf Bootstrap-Registerkarten (sowie auf Karussells und Modals) wird zunächst keine angezeigt, bis sie aktiv werden. Das übergeordnete Element Ihrer Karte hat also die Höhe/Breite 0.

Die beste Möglichkeit, dies zu beheben, besteht darin, Ihr Kartenskript aufzurufen, nachdem die Registerkarte angezeigt wurde, die nicht für das Dokument bereit ist. Wenn das Dokument bereit ist, kann Ihre Karte für den Browser nicht geladen werden.

Bootstrap bietet hierfür eine Methode mit dem Ereignis shown.bs.tab http://getbootstrap.com/javascript/#tabs

Also brauchen Sie einfach so etwas, das die Karte instanziiert , nachdem die Anzeige der Registerkarte beendet hat:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // Your Google map code here
});
2
Seth Warburton

Seth Warburton schrieb: Bootstrap ================================================================================= (= (= (= (= dass dass dass dass dass dass dass dass dass dass dass dass dass dass dass dass dass dass dass dass dass dass dass dass dass dass dass von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von von.

Ich hatte das gleiche Problem mit Bootstrap3 wie Sie. Endlich habe ich die einfache CSS-Lösung gefunden.

.tab-content.tab-pane,
.tab-pane {
    /* display: none; */
    display: block;
    visibility: hidden;
    position: absolute;
}

.tab-content.active,
.tab-content .tab-pane.active,
.tab-pane.active {
    /* display: block; */
    visibility: visible;
    position: static;
}
1
ND_

Sie können diese CSS-Deklaration hinzufügen, um Konflikte mit Bootstrap/Google Map zu vermeiden (wenn die ID Ihrer Karte #map lautet). In einigen Fällen wird das Problem behoben:

#map img {
    max-width: none;
}

Möglicherweise müssen Sie das Kartenskript jedoch nur laden, wenn die Registerkarte angezeigt wird.

$('a[href="#propmap"]').on('shown', function() {
    // When tab is displayed... will run google map code
    // Your Google map code here
}

Hoffe das kann helfen!

0
Cyril