本地化的谷歌地图无法呈现

Question

我很难理解Google地图为何无法自动呈现给用户所在位置。

工作测试网址http://showcaseimagery.com/testing/skel/eton/home.php

当鼠标悬停在主面板上时，默认视图当前显示为......

不是渲染默认的美国地区，也不是像这样渲染用户的当前位置......

当我加载地图（通过下拉列表或邮政编码区域手动）时，我发现渲染的地图不完整。 正如您在第二张图片中看到的那样，地图的底部和地图控件都没有完全加载。

总结：

• 我不知道为什么地图没有正确加载。
• 渲染的地图不完整。

感谢您对此事的想法和评论。

Answer 1

问题很可能是因为在div不可见的情况下实例化地图。尝试强制调整大小如下：

google.maps.event.trigger(map, "resize");
map.setZoom(map.getZoom()); // trigger a property change

首次实际显示地图时。

修改

实际上问题是因为您添加了CSS动画，特别是这个：

.overlay-slide-in-up:hover img {
    transform: translateY(-80%);
    transition-delay: 0.1s;
}

app.css第308行。这实质上使谷歌地图div内的所有图像向上移动了80％。为了避免这种情况，请在上面的声明之后添加以下CSS ：

#mapArea img {
  transform: none;
}

这将允许地图div中的所有图像从特定动画中排除。