某些地图图块未在移动布局中呈现

Question

我使用V3 maps api在页面中呈现了Google地图。一切都很好，但由于某种原因，初始视图中的地图图块不会在移动视图中呈现。它在580px断点处断开，但我在我的CSS中找不到任何似乎会导致问题的东西。我确实从固定尺寸到地图容器上的百分比，但我一直尝试使用固定尺寸，但不能解决问题。页面在这里：https://www.edenrift.com/Taste。

请注意，如果平移地图以查看初始视图左侧的区域，则可以看到图块正在渲染，而不是初始视图中的图块。另请注意变焦按钮如何在同一个断点处混乱。

Answer 1

在此处提问时，系统会要求您提供重现问题的所有必要代码。不是指向您的实时代码的链接，因为一旦您的代码更改或网址无效，这对其他读者无用。

尽管如此，以下规则导致了您的问题：

@media screen and (max-width: 580px) img {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: none;
    max-width: 100% !important;
    height: auto;
}

更具体地说是max-width: 100% !important;

很明显它是一个CSS问题，因为即使是地图控件也搞砸了。