Question

为什么在地球上总是有可能如果我们在Google地图中使用“Doctype”，那么在正确显示Google地图时会出现问题？

在最近的一个案例中，这个“Doctype”只花了我2天没有任何生产力。真恶心的情况怎么样？这次我得到了我的一位同事（Subhankar Bannerjee）的帮助，非常感谢他，因为他的及时和有效的帮助。他还提到了同样的问题，他曾多次面对这个问题。

有人可以告诉我为什么谷歌地图会出现这种Doctype问题吗？

非常感谢任何帮助。

编辑（评论@Balus）： -
我正在使用（X）HTML 1.0 Transitional Doctype，用于Mozilla FF＆amp;谷歌Chrome浏览器。我还没有在IE v6 +中检查过这个谷歌地图，所以我无法对这些浏览器发表评论。

Answer 1

前一段时间Google Maps API v3我遇到了同样的问题，我必须说调试起来并不容易。

这里的问题是，如果您不在页面上使用DOCTYPE，页面将以怪异模式呈现。基本上，这允许使用样式而无需任何额外的CSS或JavaScript。在这种情况下，您可以使用此位加载地图：

<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>

然而，使用DOCTYPE，页面的呈现方式就像DOCTYPE所说的那样。如果没有任何额外的CSS，设置上面的样式将无法使用百分比。元素没有大小，所以你最终没有任何东西。因此，如果您使用的是XHTML 1.0 Strict，即

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">

如果您使用像素而不是百分比，页面会呈现：

<body onload="initialize()">
  <div id="map_canvas" style="width:500px; height:400px"></div>
</body>

你也可以在CSS中做到这一点。

所以你的选择就在这里：

您可以从here.找到有关Quirks模式的更多信息。还有一个表格，显示不同的浏览器如何对缺少DTD做出反应。

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

我正在使用此doctype，它似乎工作正常。它可能只是你的引导程序。你是如何加载谷歌的？你得到了什么错误？显示您获得的结果是什么？

Answer 3

您的问题是“如果我们使用'Doctype'”。这是否意味着你之前没有？如果你之前没有，那么，基本上，你正在改变网页布局方式的“规则”。没有正确的doctype，你就处于怪癖模式。

Answer 4

快速解决方案可能是按如下方式使用它：

document.getElementById("google-map").style.height = $(window).height()+'px';

前

var map = new google.maps.Map(document.getElementById("google-map"), myMapOptions);

它适用于doctype。试过试过！：）