使用 JavaScript 调整 Google 地图大小

您遇到了这样的问题：在调整包含 Google 的“mapwrap”div 的大小后，Google 图块会消失地图。本文旨在通过讨论触发 Google 地图调整的适当函数来提供此问题的解决方案。

为什么图块会消失？

当您调整“大小”时mapwrap" div，Google 地图不会自动调整到新尺寸。这会导致地图尺寸与显示区域不匹配，从而导致图块消失。

解决方案

要解决此问题，您需要显式触发调整大小事件在 Google 地图对象上。这会指示地图重新计算其布局并调整为“mapwrap”div 的新尺寸。

对于 Google 地图 v3，请使用此函数：

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

演示

为了阐明这个概念，这里有一个使用 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");
  });
});

此示例确保每当窗口调整大小时，“map-canvas”div 中的 Google 地图都会自动调整到新大小，从而防止图块消失。