我有一个奇怪的问题,当我声明DOCTYPE时,我的Google Maps API脚本无法工作,没有映射被渲染。
如果没有DOCTYPE,我会收到以下警告,但它有效,并且会渲染地图:
资源被解释为Other,但传输时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';
不同之处在于doctype声明使浏览器进入标准模式,而不是怪癖模式。这就是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';
}
您可能需要对映射所在的div的CSS做些什么
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map1 { height: 100% }
</style>
以下方式也在工作:
<script>
$(document).ready(function() {
var mapElement = document.querySelector('.responsive-map');
mapElement.style.width = '600px';
mapElement.style.height = '450px';
});
</script>
我的地图的HTML代码是:
<div class="responsive-map">
<iframe src="https://www.google.com/maps/embed?xxxxx" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>