Question

我使用谷歌地图API遇到了奇怪的情况。这就是我想要完成的事情：

用户可以将照片上传到我的网站。这些可能有他们EXIF的Geo标签信息，我读过。如果他们拥有它，我想在图像的一侧显示一个小的嵌入式地图。

问题在于，当我将地图canvas元素直接放在body下面时，我可以显示地图，但不能显示在其他任何地方。以下是地图工作的示例：

这是我的开发环境的临时URL。不要介意破损的页面布局，这只是一个技术测试，以证明我正在使用的地图代码是有用的，它甚至考虑了实际的坐标。

因此，在该URL中，地图canvas元素位于<body>：

的正下方

<body>
<div id="map_canvas" style="width: 50%; height: 50%"></div>

正如你所看到的那样有效。但这不是我希望嵌入式地图出现的地方，它应该在DOM中：

<html>-><body>-><div id="wrapper">-><div id="content"><aside>->map canvas here

基本上，我希望它在侧边栏中。但是，当我在那里移动画布div元素时，没有任何显示。我已经尝试了一些放在DOM中的东西，它似乎对嵌套canvas元素的位置非常敏感。

不确定它是否有帮助，但我的布局方法实现了“粘性”页脚。

更新：我发现当我将地图canvas div放在我的#wrapper div中的任何位置时，它不起作用，但它确实可以在它之外工作。它还没有解决我的问题，因为我需要那个包装div，我也无法弄清楚它为什么会阻止渲染，这里是包装器div的CSS：

#wrapper { display:block;width: 960px; margin:0 auto;min-height: 100%;overflow:auto; }

即使我禁用了这个包装器的所有CSS声明，它仍然不会渲染地图。谜！

Answer 1

我发现了这个问题，这很简单：

<div id="map_canvas" style="width: 300px; height: 300px;"></div>

而不是使用基于百分比的宽度，切换到绝对大小可以修复所有内容。