google-maps - Google map 窗口仅显示部分 map

Question

我过去曾在许多网站上使用过 Google map ，但遇到了以前从未遇到过的问题。 map 窗口正在显示，但它只显示左上角的 map 片段，以及之后的任何内容(即使我在周围导航时)，右侧也不会加载任何内容。就好像导航的窗口有一个内部偏移，将其推离视口(viewport)的一侧。有谁知道是什么原因造成的？

编辑

我刚刚发现，当调整窗口大小时， map 会刷新，布局也会固定。

map 包含在通过 javascript 显示的选项卡中(并通过 display:none 隐藏)。 tab容器通过ajax加载，加载时调用loadMap函数。我尝试通过将 loadMap 函数包含在 setTimeout 函数中来推迟 loadMap 函数，该函数将 map 的创建延迟 1 秒，但它仍然执行相同的操作(需要调整窗口大小来修复它)

Answer 1

这是当您创建 map 时 map 容器被隐藏或尺寸为零时您会遇到的典型问题。

通常的解决方案是执行以下操作之一:

• 推迟创建 map ，直到容器元素可见且大小正确，或者

• 在 map 可见或调整大小后调用 google.maps.event.trigger( map, 'resize' )。此事件通知 Maps API 重新调整其对 map 中可见内容的计算。

听起来您已经通过使用第一个选项解决了这个问题，这绝对是两个选项中更好的选择。您的页面加载速度会更快，因为您无需花时间创建不可见的 map 。如果您确实遇到 map 大小可能发生变化的情况(例如，可调整大小的窗口)，那么您可以在发生这种情况时触发调整大小事件。