Google anzeigen + jQuery: rendering bug

Wenn er eine google-Karte in einem jquery-ui-Registerkarte die Karte nicht richtig angezeigt, unter bestimmten Umständen. Zum reproduzieren:

  1. Gehen hier
  2. Klicken Sie auf die "list" - link
  3. Die Größe des browser-Fensters
  4. Klicken Sie auf den 'anzeigen' - link

Beachten Sie, dass einige der Ortsname überlagerungen zeichnen richtig, andere aber nicht. Ich habe sogar entfernt alle jquery-ui-Sachen zu beschränken, den Umfang des Problems, und es wird nur die Anwendung von display:hide/display:block, der das problem verursacht.

UPDATE

Der Fehler tritt auch auf, gelegentlich nur, wenn der Wechsel zwischen display:none/block - z.B. keine Skalierung erfolgt. Dies scheint zu sein, am häufigsten im IE(8).

  • Ist dies für Google Maps API v2 oder v3? Ich arbeite mit v3 und habe mit ähnlichen Problemen, aber noch nicht in der Lage, diese gelöst 100%.
  • Ich löste dieses problem, lassen Sie uns einen Blick auf stackoverflow.com/a/13380866/1823525
InformationsquelleAutor Bobby Jack | 2009-07-19
  1. 3

    Versuchen Sie anrufen map.onResize() nachdem Sie die Karte jedes mal.

    Kann es nicht funktionieren, wenn es aufgerufen wird, wenn die map ausgeblendet mit display:none, da hätte es null Höhe und Breite.

    • Yup, der display: none ist definitiv das problem.
    InformationsquelleAutor Chetan Sastry
  2. 3

    Aus der online-docs:

    Nutzung der off-left-Technik zum verstecken
    inaktive Registerkarte-panels. E. g. in Ihrem
    Stylesheet ersetzen Sie die Regel für die
    class-Selektor ".ui-tabs .ui-tabs-hide" mit 

    .ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}
    InformationsquelleAutor Bobby Jack
  3. 3

    Mithilfe der jQuery Google Maps plugin ist hatte das gleiche Problem mit jQuery UI tabs.

    Die Karte wird wie folgt erstellt:

    $("#google-map").googlemap({
    controls: false,
    labels: true,
    zoom: 9,
    latitude: 51.5,
    longitude: 0,
    debug: false
});

    War es sehr leicht gelöst (aber nicht schnell) durch den Aufruf

    $("#google-map").googlemap().getMap().checkResize();

    Nachdem die Karte div angezeigt wird. Ich habe getestet auf FF und Safari, zusätzlich 

    resizeTo(screen.width, screen.height);

    Funktioniert im FF aber nicht IE oder Safari.

    InformationsquelleAutor rjstelling
  4. 0

    versuchen Sie dies:

      if (window.attachEvent) { 
    window.attachEvent("onresize", function() {this.map.onResize()} );
  } else {
    window.addEventListener("resize", function() {this.map.onResize()} , false);
  }

    nach 

    map_initialize();

    weil Sie sagen, die anzeigen, dass die Seite angepasst wird, vielleicht ist das das problem, das Sie haben, nicht ein jquery-eine

    BEARBEITEN

    Ok
    entfernen Sie die

    if (window.attachEvent) { 
            window.attachEvent("onresize", function() {map.onResize()} );
        } else {
            window.addEventListener("resize", function() {map.onResize()} , false);
        }

    und ersetzen Sie Ihre 

    $('#map').show();

    mit:

     $("#map").show(1, function () {
          resizeMap();
        });

    resizeMap() wird der Aufruf Google-Maps'
    checkResize() auf der jeweiligen Karte.

    Quelle: http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

    • Klingt in der Theorie schön, aber nicht für mich arbeiten in der Praxis 🙁 (Beispiel wird noch aktualisiert)
    • Ihr aktualisiertes Beispiel haben nicht das problem mehr für mich, ich bin mit firefox 3.5 was sind Sie?
    • Firefox 3.5.1, ich werde versuchen in ein paar andere Browser - Frage mich, ob ich habe einige caching-Probleme. Ich poste ein paar screenshots, falls das problem weiterhin besteht, nur um zu bestätigen, was es ist. Cheers.
    • Ich aktualisiert auf 3.5.1 und ich sehe nicht das problem, poste bitte die screenshots
    • Ich habe tatsächlich einen Fehler mit dieser Zeile im IE8: Fenster.attachEvent("onresize", function() {map.onResize()} ); (sollte das WIRKLICH 'onResize'?)
    • screenshots bis jetzt: fiveminuteargument.com/html/map-bug.html
    • überprüfen Sie die neue Ausgabe der Antwort bitte
    • Das hat nicht funktioniert (wo ist der resizeMap Funktion eigentlich definiert??) aber die andere info. auf dieser Seite geholfen - vielen Dank!
    • resizeMap definiert ist, innerhalb der google maps api

    InformationsquelleAutor Bassel Safadi
Schreibe einen Kommentar