Google Map 不适用于 XHTML Doctype(文档类型)
Posted
技术标签:
【中文标题】Google Map 不适用于 XHTML Doctype(文档类型)【英文标题】:Google Map not working with XHTML Doctype (Document Type) 【发布时间】: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+ 中检查过这个谷歌地图,所以我不能对那些浏览器发表评论。
【问题讨论】:
究竟是哪种文档类型?究竟是哪些网络浏览器?你知道(并且理解)hsivonen.iki.fi/doctype 吗? @Balus - 提供了不错的链接。谢谢 ***.com/questions/2127601/… 【参考方案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 中做到这一点。
所以你的选择就在这里:
保留 DOCTYPE 并使用像素而不是百分比或通过 CSS 指定宽度和高度。
删除 DOCTYPE 并使用百分比。不建议这样做,因为文档应始终说明应使用什么 DTD 呈现。
您可以从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,它似乎工作正常。它可能只是你的引导程序。你是如何加载谷歌的?你得到什么错误?显示你得到什么样的结果?
【讨论】:
以上是关于Google Map 不适用于 XHTML Doctype(文档类型)的主要内容,如果未能解决你的问题,请参考以下文章
Google Maps Javascript GeoLocation - 不适用于 Chrome