Wie kann verhindert werden, dass Google Map-Kacheln verschwinden, nachdem die Größe des Containers geändert wurde?

Größe einer Google-Karte mit JavaScript ändern

Sie sind auf ein Problem gestoßen, bei dem Google-Kacheln verschwinden, nachdem die Größe eines „mapwrap“-Divs geändert wurde, das ein Google enthält Karte. Dieser Artikel soll eine Lösung für dieses Problem bieten, indem er die geeignete Funktion zum Auslösen einer Google Map-Anpassung bespricht.

Warum verschwinden Kacheln?

Wenn Sie die Größe der „ mapwrap" div, die Google-Karte passt sich nicht automatisch an die neue Größe an. Dies führt zu einer Diskrepanz zwischen den Kartenabmessungen und dem Anzeigebereich, was dazu führt, dass Kacheln verschwinden.

Lösung

Um dies zu beheben, müssen Sie das Größenänderungsereignis explizit auslösen auf dem Google Map-Objekt. Dadurch wird die Karte angewiesen, ihr Layout neu zu berechnen und sich an die neuen Abmessungen des „Mapwrap“-Abschnitts anzupassen.

Für Google Maps v3 verwenden Sie diese Funktion:

google.maps.event.trigger(map, "resize");

Demonstration

Um dieses Konzept zu verdeutlichen, finden Sie hier eine Demonstration mit jQuery:

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // Listen for the window resize event and trigger Google Maps to resize
  $(window).resize(function() {
    google.maps.event.trigger(map, "resize");
  });
});

Dieses Beispiel stellt sicher, dass bei jeder Größenänderung des Fensters die Google-Karte innerhalb der „map -canvas“ div passt sich automatisch an die neue Größe an und verhindert so, dass Kacheln verschwinden.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Google Map-Kacheln verschwinden, nachdem die Größe des Containers geändert wurde?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!