Google Map 不适用于 XHTML Doctype（文档类型）答案

【问题标题】：Google Map not working with XHTML Doctype (Document Type)Google Map 不适用于 XHTML Doctype（文档类型）
【发布时间】：2011-03-14 04:10:41
【问题描述】：

到底为什么如果我们在 Google 地图中使用“Doctype”，那么在正确显示 Google 地图时总会出现问题？

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

谁能告诉我为什么 Google Map 会出现这种 Doctype 问题？

非常感谢任何帮助。

编辑（@Balus 的评论）：-
我使用的是 (X)HTML 1.0 Transitional Doctype，用于 Mozilla FF 和 Google Chrome 浏览器。我还没有在 IE v6+ 中检查过这个谷歌地图，所以我不能对那些浏览器发表评论。

【问题讨论】：

【解决方案1】：

一个快速的解决方案可能是如下使用它：

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

之前

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

它与 doctype 配合得很好。久经考验！ :)

【讨论】：

【解决方案2】：

不久前Google Maps API v3 也遇到过同样的问题，我必须说调试起来并不容易。

这里的事情是，如果你不在你的页面上使用 DOCTYPE，页面就会以 quirks 模式呈现。基本上，这允许在没有任何额外 CSS 或 JavaScript 的情况下使用样式。在这种情况下，您可以使用此位来加载地图：

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

但是，使用 DOCTYPE 时，页面的呈现方式就像 DOCTYPE 所说的那样。如果没有任何额外的 CSS，设置上述样式将无法工作，因为它使用百分比。该元素没有大小，因此您最终会 100% 什么都没有。因此，如果您使用的是 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 的反应。

【讨论】：

+1 表示 100% 使用这个 css - .map {width: 500px;高度：500px；位置：固定！重要；左：0； z-index：1；顶部：0;}
在创建地图对象之前使用这个document.getElementById("google-map").style.height = $(window).height()+'px';

【解决方案3】：

您的问题是“如果我们使用 'Doctype'”。这是否意味着你以前没有？如果您以前没有这样做过，那么本质上，您正在改变网页布局的“规则”。如果没有正确的文档类型，您将处于怪癖模式。

【讨论】：

【解决方案4】：

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

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

【讨论】：