谷歌地图API没有;在Chrome和Firefox中声明DOCTYPE时不起作用

Google Map API doesn't work when DOCTYPE declared in Chrome and Firefox

本文关键字：声明 DOCTYPE 不起作用 Firefox 没有 API Chrome 谷歌地图      更新时间：2023-09-26

我有一个奇怪的问题，当我声明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>
相关文章：