Question

我有这个奇怪的问题，当我声明DOCTYPE时，我的Google Maps API脚本无效，没有地图呈现。

如果没有DOCTYPE，我会收到以下警告，但它可以正常工作并且地图已呈现：

资源被解释为其他资源，但传输的MIME类型未定义。

我对错误没有任何真正的线索，但我希望这里可能会有一些问题！

在这里，您可以看到没有DOCTYPE的脚本：
[自问题解答后删除的链接]

...这里是DOCTYPE声明为HTML5：
[自问题解答后删除的链接]

JavaScript源代码很长，但你可以在这里找到它：
[自问题解答后删除的链接]
但是如果有人关心的话，我已经在http://snipt.org/yZgm2公开发布了它！

感谢您的时间！

更新1：

所以，似乎我的JavaScript不是问题。但是div元素没有高度或宽度开始，并且由于某种原因，无论是否有DOCTYPE，它都有不同的作用。

这么新的问题！

为什么在声明DOCTYPE后，以下代码部分无效？

var mapElement = document.getElementById(mapOptions['mapid']);
mapElement.style.width=mapOptions['width'];
mapElement.style.height=mapOptions['height'];

更新2：

感谢@fivedigit和@duncan指出了CSS问题。只需添加测量单元即可解决所有问题！

mapElement.style.width=mapOptions['width']+'px';
mapElement.style.height=mapOptions['height']+'px';

Answer 1

不同之处在于doctype声明使浏览器进入标准模式，而不是quirks模式。这就是你的JavaScript中的一个小错误的地方。

在两个实例中都创建了地图，但是当声明了doctype时，地图的高度为0，宽度设置为默认值（100％）。

您可以使用以下代码来设置地图的宽度和高度：

if(mapOptions['width'] !== false){
    mapElement.style.width=mapOptions['width'];
}
if(mapOptions['height'] !== false){
    mapElement.style.height=mapOptions['height'];
}

您忘了在那里指定单位，在标准模式下，该样式规则将被删除。将代码更改为此以使其工作：

if(mapOptions['width'] !== false){
    mapElement.style.width=mapOptions['width'] + 'px';
}
if(mapOptions['height'] !== false){
    mapElement.style.height=mapOptions['height'] + 'px';
}

Answer 2

你可能需要为地图所在的div做一些关于CSS的事情。尝试添加这样的东西：

<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map1 { height: 100% }
</style>

在Chrome和Firefox中声明DOCTYPE时，Google Map API无效

2 个答案: